всплывающее диалоговое окно jquery - PullRequest
Новая
       11

всплывающее диалоговое окно jquery

0 голосов
/ 09 января 2012

Привет, Френц У меня проблема с диалоговым окном jquery-ui.Проблема в том, что когда я закрываю диалоговое окно, а затем нажимаю на ссылку, которая его запускает, она не появляется снова, если я не обновляю страницу или не сохраняю какие-либо данные в диалоговом окне.

Код, который я использовал: 

<script type="text/javascript"> 

    $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();

            $("<div></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        close: function () {
                            $(this).remove();
                        },
                        modal: true
                    })
                    .load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    });
</script>

Ответы [ 2 ]

0 голосов
/ 07 апреля 2012

Мне удалось заставить его работать, введя еще один div с песочными часами / вращающимся колесом «Please Wait», загружающим изображение. (Я использую jquery-1.7.1)

Попробуйте заменить эту строку: 

$("<div></div>")

С этим: 

$("<div><div style='text-align: center'><img src='@Url.Content("~/Content/images/loading.gif")' alt='Please Wait...' width='100px'/></div></div>")

Это мой рабочий код (в точности как исходный пост, за исключением одной строки): 

// these are for the popup dialogs
// need to use live instead of click because object doesnt exist on ready and will give an objectexpected
$(".openDialog, .editDialog").live("click", function(e) {
    e.preventDefault();

    // this div is duplicate of 'loading' div below
    $("<div><div style='text-align: center'><img src='@Url.Content("~/Content/images/loading.gif")' alt='Please Wait...' width='100px'/></div></div>")
        .addClass("dialog")
        .attr("id", $(this).attr("data-dialog-id"))
        .appendTo("body")
        .dialog({
            // NOTE: This is where the size of the popup window is set
            width: 800,
            position: 'top',
            title: $(this).attr("data-dialog-title"),
            close: function() { $(this).remove(); },
            modal: true
        })
        .load(this.href);
});
0 голосов
/ 09 января 2012
  1. Что @ MattBradley сказал.
  2. В этой строке, .attr("id", $(this).attr("data-dialog-id")), вы пытаетесь получить новый атрибут <div> data-dialog-id, назначая новый <div> атрибут id. Я уверен, что вы хотели присвоить атрибут data-dialog-id ссылки новому <div>.
  3. close: function() { $(this).remove(); } является избыточным. Если вы не имели в виду «удалить ссылку», а не само диалоговое окно, в этом случае вы бы использовали link вместо this (см. fiddle ).
  4. "Начиная с jQuery 1.7, метод .live () устарел. Используйте .on () для присоединения обработчиков событий. Пользователи старых версий jQuery должны использовать .delegate () предпочтительнее .live (). "
    Взято из документации jQuery live(). 
$('body').on('click', '.openDialog', function (e) {
    e.preventDefault();

    var link = $(this);

    $("<div></div>")
        .addClass("dialog")
        .attr("id", $(link).attr("data-dialog-id"))
        .appendTo("body")
        .dialog({
            modal: true
        })
        .load($(link).attr('href'),  {
            html: "<p>Text echoed back to request</p>"
        });
});

$('body').on("click", '.close', function (e) {
    e.preventDefault();
    $(this).closest(".dialog").dialog("close");
});

Демо здесь: http://jsfiddle.net/Ag6wj/

...