jquery ui dialogs und externen Inhalt laden

Question

Ich habe eine Liste von Seiten, die dynamisch mit einem Echo Statement generiert werden. Beispiel:

<a href="<?php echo $action['href']; ?>"><span onclick="jQuery('#category_edit_dialog').dialog('open'); return false"><?php echo $action['text']; ?></a> 

dies der Code ist die jQuery UI Dialogfenster für die Herstellung:

$.ui.dialog.defaults.bgiframe = true; 
$(function() { 
    $("#category_edit_dialog").dialog({ 
     width: 960, 
     hide: 'slide', 
     autoOpen: false, 
    }); 

    $('#open_category_edit_dialog').click(function() { 
     $('#category_edit_dialog').dialog('open'); 
     return false; 
    }); 

}); 

was ich will ist im Moment achive, die Links ein jQuery UI-Dialog geklickt wird, den Inhalt laden . Die Frage ist eher, wie externe Links geladen werden, die mit PHP generiert werden.

Answer 1

Sie haben die HREF int den Anker, also alles, was Sie tun müssen, ist mit der jQuery load-Funktion, um die Verknüpfung zu HTML zu bekommen und es auf Ihrer Seite zu setzen.

Angenommen, den folgenden HTML-Code für Ihre Links (die ungeradee unclosed Spanne im Anker nicht Sinn für mich):

<a href="<?php echo $action['href']; ?>" class="dialogLink"><?php echo $action['text']; ?></a> 

Sie Ihren Javascript ändern könnte es wie folgt funktioniert:

$.ui.dialog.defaults.bgiframe = true; 
$(function() { 
    $("#category_edit_dialog").dialog({ 
     width: 960, 
     hide: 'slide', 
     autoOpen: false 
    }); 

    $('a.dialogLink').click(function() { 
     var url = $(this).attr('href'); 
     $('#category_edit_dialog').load(url, function() { 
      $('#category_edit_dialog').dialog('open'); 
     }); 
     return false; 
    }); 
}); 

Der Schlüssel ist das Klickereignis, das an die Links mit der Klasse von dialogLink gebunden wird. Er erhält die URL, auf die er verweist, wenn er angeklickt wird, lädt den Inhalt, der unter dieser URL gefunden wurde, in den Dialoginhalt div, den Sie bereits auf der Seite hatten, und sobald er den HTML-Code enthält, öffnet er den Dialog.

Answer 2

Mit jQuery können Sie mit der Funktion load() einen AJAX-Aufruf für den zu ladenden Inhalt an den Server senden. Wenn Sie haben wollen, das alles auf einen Klick Ereignis passieren, dann können Sie etwas tun:

HTML:

<a id="clicker" href="#">Click Here</a> 
<div id="content"></div> 

jQuery:

$(document).ready(function(){ 
     $('#clicker').click(function(){ 
      $('#content').load('URL OF YOUR PHP PAGE'); 
      //start your dialog here 

     }); 

    }); 

Natürlich den Inhalt div in meinem Beispiel ist das div, mit dem Sie den Dialog erstellen. Auf diese Weise sehen Benutzer, wenn sie auf den Link klicken, dass der Dialog mit dem vom Server geladenen Inhalt geöffnet wird.