Home/ Questions/Q 843249
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T06:05:44+00:00

When I call the function, the dialog doesn’t work. If I move the dialog

  • 0

When I call the function, the dialog doesn’t work.
If I move the dialog construction into the showtimes_list function, everything works fine.

I thought that variables declared outside a function were global in context?

var dialog_list = $("<div></div>").dialog({
    autoOpen: false,
    modal: true,
    height: 300, width: 720,
});

function showtimes_list(sid){
    dialog_list.html("");
    $.get("ajax_showtimes.php?sid="+sid, function(data){
            dialog_list.html(data);
        }
    );

    dialog_list.dialog("open");
}

—Edit—

This is being called from an onClick to showtimes_list.

—Edit—

This is working:

function showtimes_list(sid){
    $("#stl").dialog("open");
    $("#stl").html("");
    $.get("ajax_showtimes.php?sid="+sid, function(data){
            $("#stl").html(data);
        }
    );    
}

$(function(){
    $('<div id="stl"></div>').appendTo(document.body).dialog({
        autoOpen: false,
        modal: true,
        height: 300, width: 720,
    });    
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Instead of creating a new empty div, add the div to the document, e.g.:

    <body>
   <div id="dialog">
      <div id="dialogContent"></div>
   </div>
</body>

    Then, your script will become

    var dialog_list = $("#dialog").dialog({ });

    Then, when you want to change the HTML of that element, instead of changing the dialog itself, you’d want to change the dialogContent element:

    function showtimes_list(sid){    
     var content = $("#dialogContent");
     content.html("");
    $.get("ajax_showtimes.php?sid="+sid, function(data){
            content.html(data);
        }
    );

    dialog_list.dialog("open");
}

    If you don’t want these empty divs in your HTML structure, you should add them to the body dynamically and use classes instead of ids.

    Edit: to answer your question as to why it doesn’t work when the dialog_list is outside the function, I’d imagine it has something to do with the generated html.

    When you call .dialog(), jQuery generates the following HTML:

    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

    When this is outside of your function, it is called whenever it is encountered in the script… Then, in your function, you change that generated HTML. It’s been a while since I dynamically updated dialog content, but I ran into the same problem, and the generated HTML was the culprit. I think my solution was to, instead of the nested divs in my original answer, I created the dialog as you did (outside the function), and inside the function, you change the html of the ui-dialog-content

    For instance:

    function showtimes_list(sid){
    dialog_list.find('.ui-dialog-content').html("");
    $.get("ajax_showtimes.php?sid="+sid, function(data){
            dialog_list.find('.ui-dialog-content').html(data);
        }
    );

    dialog_list.dialog("open");
}
    • 0