php jquery ui dialogs und Laden von externen Inhalten




jquery ui form elements (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 das alles auf einem Klick-Ereignis haben möchten, können Sie Folgendes 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 ist das Inhalts-div in meinem Beispiel das div, das Sie zum Erstellen des Dialogs verwenden. Wenn der Benutzer auf den Link klickt, wird der Dialog mit dem vom Server geladenen Inhalt geöffnet.

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

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

Dies ist der Code zum Erstellen des jquery-ui-Dialogfensters:

$.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 erreichen möchte, ist in dem Moment, in dem Links geklickt werden, wird ein Dialog den Inhalt laden. Die Frage ist eher, wie externe Links geladen werden, die mit PHP generiert werden.


Answer #1

Sie haben die HREF-Funktion im Anker, also müssen Sie nur die jQuery-Ladefunktion verwenden, um die Verknüpfung mit HTML zu erhalten und sie auf Ihre Seite zu setzen.

Angenommen, der folgende HTML-Code für Ihre Links (dieser seltsame nicht abgeschlossene Bereich im Anker hat für mich keinen Sinn ergeben):

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

Sie können Ihr Javascript so modifizieren, dass 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.





dialog