dialogue Jquery pour ouvrir une autre page

Question

Il y a une page transaction.html

Comment ouvrir cette page dans une fenêtre contextuelle dans une autre page dans une show_transactions.html dire jquery dialogue

 $dialog.html() //open transaction.html in this dialog 
    .dialog({ 
     autoOpen: true, 
     position: 'center' , 
     title: 'EDIT', 
     draggable: false, 
     width : 300, 
     height : 40, 
     resizable : false, 
     modal : true, 
    }); 
    alert('here'); 
    $dialog.dialog('open'); 

Ce code est présent dans show_transactions.html

Merci ..

Answer 1

Vous pouvez utiliser la méthode .load() jQuery pour charger une page dans une boîte de dialogue, voici comment:

$("#dialog").dialog({ 
    autoOpen: false, 
    position: 'center' , 
    title: 'EDIT', 
    draggable: false, 
    width : 300, 
    height : 40, 
    resizable : false, 
    modal : true, 
}); 

$("#dialog_trigger").click(function() { 
    $("#dialog").load('path/to/file.html', function() { 
     $("#dialog").dialog("open"); 
    }); 
}) 

Cela suppose la boîte de dialogue a un ID de « dialogue » et qu'il existe un autre élément avec ID « dialog_trigger » qui est cliqué pour l'ouvrir. Vous devez placer ces deux fonctions dans la fonction de prêt de votre document pour que la boîte de dialogue soit chargée lors du chargement de la page, si ce n'est pas le cas, cela provoquera un léger retard, mais perceptible, pour l'utilisateur.

Answer 2

Vous pouvez aussi le faire comme ça ...

Créer une page de dialogue

<div id="MyDialogID" title="My Dialog Title"></div> 

Créer un lien (lorsque l'on clique sur ce lien, il ouvre la boîte de dialogue)

<a id="MyLinkToDialogID" href="Path to Dialog Page">Open My Dialog</a> 

Initialiser le dialogue (créer un n événement entre le lien et la boîte de dialogue)

$('#MyLinkToDialogID').each(function() { 
    var $link = $(this); 

    $.post($link.attr('href'), function (data) { 
     var $dialog = $(data) 
      .filter('#MyDialogID') 
      .dialog({ 
       autoOpen: false, 
       resizable: false, 
       height: 240, 
       width: 370, 
       modal: true 
      }); 

      $link.click(function() { 
       $dialog.dialog("open"); 
       $dialog.css("height", "240"); 
       $dialog.css("width", "370px"); 
       $dialog.dialog({ position: 'center' }); 

       return false; 
      }); 
    }); 
});