Global jQuery dialog variable not working properly_问答_开发者

Global jQuery dialog variable not working properly

开发者 https://www.devze.com 2023-01-02 02:42 出处：网络

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

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,
    });    
});

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");
}