CODEWITHSUNDEEP
jquery-uidialog
Mark Steggles
Mark Steggles

Reputation: 5563

jquery ui dialog is creating two dialogs

A screenshot : http://d.pr/i/A4Kv

This is my dialog code:

function popupbox(title,html,buttonTxt,buttonAction) {
  var buttons = {};
  if(buttonTxt != null) {
    buttons[buttonTxt] = buttonAction;
  }
  buttons['Cancel'] = function() {
    jQuery(this).dialog('destroy').remove();
  };
  var p = jQuery('<form class="dialoginnerbox">' + html  + '</form>');
  p.dialog({
    autoOpen: false,
    resizable: false,
    modal: false,
    width: 'auto',
    height: 'auto',
    maxHeight: 600,
    maxWidth: 980,
    title: title,
    close: function(event, ui){
        jQuery(this).dialog('destroy').remove();
    },
    buttons: buttons
  });
  p.dialog('open');
}

Any ideas?

---- UPDATE ----

I swapped out the returning html for some dummy text and that fixed it.. so something with the html that is being put into the popup is making it open twice...

Upvotes: 1

Views: 5278

Answers (5)

CDenby
CDenby

Reputation: 95

If you wrap your html in a single tag, it may clean it up. The inclusion of divs inside the html may cause a dialog for each one unless there's a layer above:

This didn't work for me:

<hr /> blah blah blah 
<h3>blahblahtitle</h3> 
<div id=somestufffirst>here's the stuff</div> 
<div id=someotherstuff>here's some more stuff</div>

But this did:

<div>
<hr /> blah blah blah 
<h3>blahblahtitle</h3> 
<div id=somestufffirst>here's the stuff</div> 
<div id=someotherstuff>here's some more stuff</div>
</div>

Upvotes: 0

user3129978
user3129978

Reputation: 11

function display_dialog() { if($('.dialog_wrapper').length) { return; }

$('<div class="dialog_wrapper"</div>').dialog({
    autoOpen: true,
    modal: true,

Upvotes: 1

Felipe
Felipe

Reputation: 265

A workaround for this problem is to use a counter:

var count = 0;
var $dialog = $('<div></div>') .dialog({ ...

autoOpen: false,
                        modal: true,
                        height: 625,
                        width: 500,
                        title: pagetitle
...
});

if (count > 0) {
                        $dialog.dialog("destroy").remove();
                        count = 0;
                    }
                    $dialog.dialog('open');
                    count++;

worked for me... for the dialog issue, but i am getting multiple requests on the server ... something like that: when i click for the first time on the link, it sends on information to the server. When i click for the second time (without refreshing the browser) it sends the same information twice. When i click for the third time, three requests are sent to the server, and so on...

Upvotes: 0

Mark Steggles
Mark Steggles

Reputation: 5563

Malformed html and inline script tags cause jquery ui dialog to open multiple dialogs.

Upvotes: 4

Scott Johnson
Scott Johnson

Reputation: 63

With jQueryUI dialogs; jQuery may consider valid html as malformed html in some cases. The reason I say this is I ajax loaded the html for my dialog with valid html and valid html comments. I got double dialog boxes until I removed the html comments from the ajax loaded html. Example...

content.htm

<div id="myDialogContent">Alert!</div><!-- Here is an innocent looking comment -->

dialog.js

$.get( '/content.htm', function( html ){ 
    $( html ).dialog(); 
});

This would produce a double dialog. If the html begins or ends with an html comment, the same dialog issue occurs. The only way around is to either remove the html comment or wrap the html text in another html tag like so...

dialog.js

$.get( '/content.htm', function( html ){ 
    $( '<div>'+html+'</div>' ).dialog(); 
});

This would produce one dialog.

Upvotes: 1

Related Questions