Prevent jquery ui opening a second dialog box when clicking on a button

Question

I have a leaflet map with 2 layers and when I'm clicking a button "save", it opens a dialog box with a form to send some informatons to my database.

When my first layer is selected and I'm clicking on my "save" button, it opens the dialog box corresponding to my first layer.

But then, when my second layer is selected and I'm clicking on my "save" button, it opens the dialog box corresponding to my second layer, but also the form I've opened just before for my first layer.

So, is it possible prevent the opening of this form ? Because if I do a .dialog('close'), it on the form not corresponding, it works but we can see it opening and then closing, so that's not really good !

I have already tested .dialog("destroy"); and .remove(); but it removes my dialog boxes in the DOM and I can't open them other times after.

So, here is some code :

 //Code in the oneachfeature function from my layer1 $('#save').on('click',function(e){ var dialog1 = $("#dialog1").dialog({ autoOpen: false, modal: true, show: { effect: "blind", duration: 500 }, hide: { effect: "blind", duration: 500 }, close: function(event, ui) { //$(this).dialog("destroy"); //$(this).dialog("close"); //$(this).remove(); }, height: 400, width: 500, modal: true, position: { my: "center center", at: "center center", of: "#map" }, buttons: { Valider: function() { // Ajax to send informations in the form }, // end of valider Annuler: function() { dialog1.dialog("close"); }, }, // end of buttons }); // end of dialog dialog1.dialog("open"); $("#dialog2").dialog('close'); }); // end of save //Code in the oneachfeature function from my layer2 $('#save').on('click',function(e){ var dialog2 = $("#dialog2").dialog({ autoOpen: false, modal: true, show: { effect: "blind", duration: 500 }, hide: { effect: "blind", duration: 500 }, close: function(event, ui) { //$(this).dialog("destroy"); //$(this).dialog("close"); //$(this).remove(); }, height: 400, width: 500, modal: true, position: { my: "center center", at: "center center", of: "#map" }, buttons: { Valider: function() { // Ajax to send informations in the form }, // end of valider Annuler: function() { dialog2.dialog("close"); }, }, // end of buttons }); // end of dialog dialog2.dialog("open"); $("#dialog1").dialog('close'); }); // end of save 

Answer 1

Your two save buttons, for each layer, seem to have the same id. Maybe there is a conflict when you install your "onclick" listeners ? So the behavior is not what you expect. Try to set unique ids for these buttons