user988544
user988544

Reputation: 576

jQuery UI Dialog within if else loop

I want to activate(load) the jQuery dialog only if the condition of my if statement is true. Something like this:

if (/*condition is true*/) {
  var dialog = '<div id="resultDialog" title="Search Results"><p>Results to your search.  </p></div>';
  $('body').append(dialog);
  $("#resultDialog").dialog({
    buttons: {
        "No": function () {
            $(this).dialog("close");
        },
        "Yes": function () {
            //do something
        }
    }
  });
  $("#resultDialog").dialog("open");
}else{
        //do something else
    };

The dialog is not dependent on a click/change event. As of now when I debug I can see that the condition is true but still the dialog is not appearing. Any suggestion/help will be appreciated.

Upvotes: 0

Views: 1361

Answers (1)

Mooseman
Mooseman

Reputation: 18891

Start your code with $(document).ready(function(){ and end it with }); Also, you are calling .dialog() on #dialog instead of #resultDialog. You do not need to use the call to open the dialog, unless you changed the default of autoOpen to false.

Your code, fixed and cleaned up:

$(document).ready(function(){
  if (/*condition is true*/) {
    var dialog = '<div id="resultDialog" title="Search Results" style="display:none"><p>Results to your search.</p></div>';
    $('body').append(dialog);
    $("#resultDialog").dialog({
      buttons: {
        "No": function () {
            $(this).dialog("close");
        },
        "Yes": function () {
            //do something
        }
      }
   });
 }else{
   //do something else
 }
});

Upvotes: 2

Related Questions