como carregar uma página com jQuery UI diálogo

StackOverflow https://stackoverflow.com/questions/1608249

  •  05-07-2019
  •  | 
  •  

Pergunta

isso é possível para carregar outra página com jQuery UI diálogo?

Como Dialog + Ajax

Graças

Foi útil?

Solução

Se você quiser carregar conteúdo em um diálogo usando Ajax, você pode facilmente usar $ .load: 

// initialize dialog
var dialog1 = $("#dialog").dialog({ autoOpen: false,
  height: 600,
  width: 350
});

// load content and open dialog
dialog1.load('path/to/otherPage').dialog('open');

Verifique um exemplo aqui .

Outras dicas

O design da caixa de diálogo JQuery UI é tal que ele precisa de conteúdo existente para operar em cima. Tipicamente nos exemplos esta é uma DIV retirado do BODY existente de DOM.

Há casos, porém, onde a adição de marcação para páginas existentes apenas para criar um diálogo - especialmente se o conteúdo é carregado pelo AJAX - causa problemas. Por exemplo, você pode ter uma biblioteca JavaScript que pode ser chamado a partir de um número de páginas e não quero adicionar marcação para cada um deles.

Uma forma alternativa ( inspirado por este ) é aqui:

A diferença é que você cria o DIV programação (será automaticamente adicionado ao DOM) - e quando o diálogo é fechada nós destruí-lo completamente -. E removê-lo do DOM no evento 'close' 

function JQDialog(title, contentUrl, params) {
  var dialog1 = $("<div>").dialog(
  {
     autoOpen: false,
     modal: true,
     title: title,
     close: function (e, ui) { $(this).remove(); },
     buttons: { "Ok": function () { $(this).dialog("close"); } }
  });
  dialog1.load(contentUrl).dialog('open');
}

Substituir dialog1.load(contentUrl).dialog('open'); com o seguinte se você não quiser que a caixa de diálogo para abrir (e potencialmente flicker) até que o conteúdo é carregado. Isso também irá permitir que ele seja devidamente centrado sem trabalho adicional. 

dialog1.load(contentUrl, function () {
    $(this).dialog('open');
});

eu prefiro esperar até que eu tenha o conteúdo para criar o diálogo. Parece mais fácil para mim. Além disso, auto-dimensionamento não parece trabalho de outra forma: 

    $.ajax({
        'url': contentUrl,
        'success': function success(data, textStatus, xhr) {
            $("<div>" + data + "</div>").dialog({
                "width": "auto",
                "height": "auto",
                "close": function (e, ui) { $(this).remove(); }
            });
        }
    });

Claro, basta incluir um iframe em HTML do seu diálogo.

Se você especificamente precisa ou quer um iFrame em vez de conteúdo injetado no dom, eu tenho uma extensão para isso aqui: http://plugins.jquery.com/project/jquery-framedialog

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top