CODEWITHSUNDEEP
jqueryjquery-uidialog
JamesG
JamesG

Reputation: 1601

Jquery Dialog opening multiple times when contains textfield, textareas etc

For some reason when I open a dialog that contains input types it opens multiple Dialogs.

Here is my code: 

    var addTagsDialog = $("<p>This is just a test tag</p> <br /><input type='text' />");

    addTagsDialog.dialog({
      buttons: {
        "Update": function () {
          console.log('Update Func Run');
        }
      },
      Cancel  : function () {
        addTagsDialog.dialog('destroy').remove();
      }
    });

Here is a fiddle: https://jsfiddle.net/jrrxxbdg/

If I take out: 

  <br /><input type='text' />

Then it only opens up one dialog modal.

I am using these versions:

Can anyone see why this is the case?

I read on another questions that it is possibly because I am not destroying the modals after using them however each time I have used a modal I had added

dialog('destroy').remove();

and this does not explain how it is replicating in JSFiddle.

Any thoughts?

Upvotes: 0

Views: 37

Answers (1)

Barmar
Barmar

Reputation: 781058

You need to wrap everything into a DIV. When you create the elements that way, you're making a jQuery collection of 4 separate elements (<p>, textElement, <br>, <input>). Then it's creating a dialog for each of them.

Use:

var addTagsDialog("<div><p>This is just a test tag</p> <br /><input type='text' /></div>");

Upvotes: 1

Related Questions