xandeadx.ru Блог музицирующего веб-девелопера

Javascript → Как с помощью jQuery UI Dialog открыть AJAX окно

Опубликовано в

В jQuery UI виджете Dialog нет встроенной возможности показать окно с данными, полученными с помощью AJAX. Но это легко решаемо:

$('<div>').load('/some/url').dialog();

Или так, если после получения данных, их необходимо обработать:

$('<div id="my-dialog">Загрузка...</div>').dialog({
    open: function() {
        $.get('/some/url', function(response) {
            $('#my-dialog').html('<p>' + response + '</p>');
        });
    },
    close: function() {
        $('#my-dialog').remove();
    }
});
Похожие записи

Комментарии RSS

Спасибо!

В коде есть небольшой баг.
Вместо:
$('#my-dialog').remove();
Надо:
$('#my-dialog').html('');

Иначе второй раз окно не выскочит.

выскочит

Если объявить блок #my-dialog в самом html заранее.
При объявлении диалогового окна установить параметр "autoOpen: false".
Окно открывать и закрывать через методы open и close.
То в этом случае remove() сносит весь блок #my-dialog и в дальнейшем диалоговое окно не открывалось по событию open.

Код из топика корректен, т.к. блок #my-dialog постоянно вновь создается.

Себе и другим на заметку.
Пример JQuery UI диалога с динамической загрузкой URL-адреса в IFRAME
Есть и Demo

@Игорь там больше интерес представляет автоматическое изменение высоты диалога под высоту фрейма. я пока выкручивался так:

var $dialog = $('\
  <div id="dialog">\
    <iframe frameBorder="0" scrolling="no" width="100%"></iframe>\
  </div>\
');
 
$dialog.dialog({
  open: function() {
    var $iframe = $dialog.find('iframe');
    $iframe.attr('src', '/some/url').load(function () {
      $iframe.height($(this.contentWindow.document.body).height() + 10);
    });
  },
  close: function() {
    $('#dialog').remove();
  },
  width: 400
});

не могу разобраться, как преобразовать код, чтобы был autoOpen: false?
Если просто добавляю перед open: function() , ничего не работает

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

  <script>
     $(function () {
            $('.open').click(function () {
                 var id = $(this).data('image')
                $(id).dialog("open");
				$('<div id="my-dialog">Загрузка...</div>').dialog({
 
    open: function() {
        $.get('/personal/cart/ajax_cart.php', function(response) {
            $('#my-dialog').html('<p>' + response + '</p>');
        });
    },
    close: function() {
        $('#my-dialog').html('');
    }
});
            });
 
            $(".image").dialog({
                autoOpen: false,
                width: "auto",
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "blind",
                    duration: 1000
                }
            });
        });
 </script>
 
<div id="table" class="image" title="Basic table">
текст
</div>
<button id="openTable" class="open" data-image='#table'>Open Table</button>

как загрузить контент в Iframe + jquery dialog без перегрузки самой страницы
Iframe получается часть самой страницы src даёт перегрузку

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании