Глобальная диалоговая переменная jQuery не работает должным образом - PullRequest
Новая
       15

Глобальная диалоговая переменная jQuery не работает должным образом

1 голос
/ 02 июня 2010

Когда я вызываю функцию, диалог не работает. Если я перемещу конструкцию диалога в функцию showtimes_list, все работает нормально.

Я думал, что переменные, объявленные вне функции, были глобальными в контексте? 

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

--- Редактировать ---

Это вызывается из onClick для showtimes_list.

--- Редактировать ---

Это работает: 

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

1 Ответ

1 голос
/ 02 июня 2010

Вместо создания нового пустого элемента div, добавьте элемент div в документ, например ::

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

Тогда ваш сценарий станет 

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

Затем, когда вы хотите изменить HTML-код этого элемента, вместо изменения самого диалога, вы захотите изменить элемент dialogContent: 

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

    dialog_list.dialog("open");
}

Если вам не нужны эти пустые элементы div в вашей структуре HTML, вы должны динамически добавлять их в тело и использовать классы вместо идентификаторов.

Редактировать: чтобы ответить на ваш вопрос о том, почему он не работает, когда dialog_list находится вне функции, я думаю, что он как-то связан с созданным html.

Когда вы вызываете .dialog (), jQuery генерирует следующий 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>

Когда это за пределами вашей функции, она вызывается всякий раз, когда она встречается в скрипте ... Затем в вашей функции вы изменяете сгенерированный HTML. Прошло много времени с тех пор, как я динамически обновлял содержимое диалога, но я столкнулся с той же проблемой, и сгенерированный HTML был виновником. Я думаю, что мое решение заключалось в том, чтобы вместо вложенных элементов div в моем исходном ответе я создал диалог, как вы это сделали (вне функции), а внутри функции вы изменили html ui-dialog-content

Например: 

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