диалог jquery - замена элемента диалога

0

У меня есть документ С#page div, который содержит диалог jQuery div #dia и JS для его создания. Что-то вроде этого:

<script>
var x;
</script>
<div id="page">
    <div id="dia">bla</div>
    <script>
    $(function () { x = $('#dia').dialog(); });
    </script>
</div>

Пока это прекрасно. Однако теперь мне нужно удалить содержимое # страницы и заменить их новым контентом. Этот новый контент будет содержать еще один div с id #dia и тот же JS-код, чтобы сделать это в диалоговом окне.

Кажется, это не работает. Вместо этого, похоже, что x по-прежнему является старым диалогом до замены.

Я думаю, что jQuery перемещает div #dia где-то еще, когда я создаю диалог, и поэтому, когда я заменяю содержимое # страницы, старый диалог все еще существует. Затем, когда запускается мой код $ ('# dia'). Dialog(), он применяется только к старому div, который уже является диалогом.

Я попытался запустить $ ('# page'). Empty(), x.dialog('destroy') и x.remove() перед заменой элементов, но ничто из этого не помогает.

Как это сделать правильно?

  • 0
    Переменная x присваивается глобальному объекту window, верно? так что это определенно все еще существует, когда контент удаляется или удаляется.
  • 0
    Да, это все еще существует. Однако он должен быть перезаписан после выполнения нового тега <script>.
Теги:
dialog

2 ответа

1
Лучший ответ

Ваш скрипт настроен только на готовый документ.

$(function() { ... });

это короткая рука для

$(document).ready(function () { ... });

Поскольку вы динамически загружаете контент на страницу, но не меняете страницу, она не запускает новое событие для документа. Впоследствии значение x не будет изменено, и новый контент не будет преобразован в диалог.

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

<script>
    var x;

    function reloadContent(url) {
        $("#page").load(url, function () {
           x = $("#dia").dialog();
        }
    }
</script>
<div id="page">
    <div id="dia">bla</div>
    <script>
        $(function () { x = $('#dia').dialog(); });
    </script>
</div>
<button type="button" onclick="reloadContent('new/url/for/content');>Change Content</button>

Если вы собираетесь вручную поменять содержимое с помощью $.html(), вам также придется вручную повторно инициализировать диалоговое окно.

Поделиться
  • 0
    Сначала я тоже так думал, но, видимо, это не проблема. Код определенно исполняется, он просто не превращает правый div в диалог.
  • 0
    @Nils Что вы ожидаете получить от х? Вот скрипка , которая правильно меняет местами диалоги.
Показать ещё 1 комментарий
1

Вам нужно повторно запустить селектор через обратный вызов после загрузки нового содержимого. Что-то вроде этого:

$("div#page").load("/your/url/", function() {
    x = $('#dia').dialog();
});

В противном случае указатель все равно будет указывать на устаревший элемент.

Кроме того, вы можете пойти более общим и сделать что-то подобное, чтобы перезагрузить переменную каждый раз, когда заменяется #page:

var x;
function initDialog(){
    x = $('#dia').dialog();
}
$(document).ready(function(){
    $("div#page").ajaxSuccess(initDialog);
});

Надеюсь это поможет.

Поделиться
  • 0
    Я не использую метод .load (), но заменяю содержимое вручную с помощью html (), поэтому я не думаю, что это применимо.
  • 0
    Затем вы можете просто инкапсулировать свою диалоговую функциональность в функцию, как я делал выше, и повторно вызывать эту функцию после замены HTML.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню