Global jQuery dialog variable not working properly

Question

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

Not really enough to go on here. Are you calling this in the document.ready() function? Or is this just in a script tag? — womp
– womp, Commented Jun 1, 2010 at 22:18
@Pointy typo'd it.. sorry. It doesn't work when called without moving the variable setup into the function. — Ben Dauphinee
– Ben Dauphinee, Commented Jun 1, 2010 at 22:25
Is there any Console output about an error of somesort, or try add a div element to your html page with an attribute id and then select that element as your dialog_list. — RobertPitt
– RobertPitt, Commented Jun 1, 2010 at 22:30
Are you sure the value of dialog_list is not modified at any time between where it's declared there or when the click event fires? With the code as you've written it, dialog_list is definitely in context in showtimes_list. — VoteyDisciple
– VoteyDisciple, Commented Jun 1, 2010 at 22:39

Jim Schubert · Accepted Answer · 2010-06-02 02:10:09Z

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

Collectives™ on Stack Overflow

Global jQuery dialog variable not working properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related