wake-up-neo.com

jQuery: Laden von modalen Dialoginhalten über Ajax

Derzeit ist mein modaler Dialog so

<html>
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/humanity/jquery-ui.css" type="text/css" />
 </head>
 <body>
  <div id="dialog" title="Title Box">
   <p>Stuff here</p>
  </div>
  <script type="text/javascript">
   jQuery(
    function() {
     jQuery("#dialog")
      .dialog(
       {
        bgiframe: true,
        autoOpen: false,
        height: 100,
        modal: true
       }
      );
     jQuery('body')
      .bind(
       'click',
       function(e){
        if(
         jQuery('#dialog').dialog('isOpen')
         && !jQuery(e.target).is('.ui-dialog, a')
         && !jQuery(e.target).closest('.ui-dialog').length
        ){
         jQuery('#dialog').dialog('close');
        }
       }
      );
    }
   );
  </script>
  <a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click to view</a>
 </body>
</html>

Das geladene Div ist auf derselben Seite enthalten. Wie verschiebe ich das div auf eine zweite Seite und lade den Inhalt über Ajax, wenn das Dialogfeld angezeigt wird? Und kann ich das Skript wiederverwenden, um je nach Bedarf unterschiedliche Inhalte zu laden?

44
abel

Schauen Sie sich diesen Blogbeitrag von Nemikor an, der tun sollte, was Sie wollen.

http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

Grundsätzlich wird vor dem Aufruf von 'open' der Inhalt von der anderen Seite zuerst geladen.

jQuery('#dialog').load('path to my page').dialog('open'); 
71
Sam

versuchen Sie es mit diesem.

$(document).ready(function(){
$.ajax({
    url: "yourPageWhereToLoadData.php",
    success: function(data){
        $("#dialog").html(data);
    }   
});

$("#dialog").dialog(
       {
        bgiframe: true,
        autoOpen: false,
        height: 100,
        modal: true
       }
);
});
$(function ()    {
    $('<div>').dialog({
        modal: true,
        open: function ()
        {
            $(this).load('Sample.htm');
        },         
        height: 400,
        width: 400,
        title: 'Dynamically Loaded Page'
    });
});

http://www.devcurry.com/2010/06/load-page-dynamically-inside-jquery-ui.html

7
temp2010
var dialogName = '#dialog_XYZ';
$.ajax({
        url: "/ajax_pages/my_page.ext",
        data: {....},
        success: function(data) {
          $(dialogName ).remove();

          $('BODY').append(data);

          $(dialogName )
            .dialog(options.dialogOptions);
        }
});

Der Ajax-Request lädt den Dialog, fügt sie dem Body der aktuellen Seite hinzu und öffnet den Dialog.

Wenn Sie nur den Inhalt laden möchten, können Sie Folgendes tun:

var dialogName = '#dialog_XYZ';
$.ajax({
            url: "/ajax_pages/my_page.ext",
            data: {....},
            success: function(data) {
              $(dialogName).append(data);

              $(dialogName )
                .dialog(options.dialogOptions);
            }
});
4
Floyd

dieser Code kann Ihnen eine Idee geben.

http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

$(document).ready(function() {
    $('#page-help').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href'))
            .dialog({
                autoOpen: false,
                title: $link.attr('title'),
                width: 500,
                height: 300
            });

        $link.click(function() {
            $dialog.dialog('open');

            return false;
        });
    });
});
0
Thomas
<button class="btn" onClick="openDialog('New Type','Sample.html')">Middle</button>

<script type="text/javascript">
    function openDialog(title,url) {
        $('.opened-dialogs').dialog("close");

        $('<div class="opened-dialogs">').html('loading...').dialog({
            position:  ['center',20],
            open: function () {
                $(this).load(url);

            },
            close: function(event, ui) {
                    $(this).remove();
            },

            title: title,
            minWidth: 600            
        });

        return false;
    }
</script>
0