web-dev-qa-db-fra.com

jQuery: Charger le contenu de la boîte de dialogue modale via Ajax

Actuellement, mon dialogue modal est comme ça

<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>

La Div qui est chargée est incluse dans la même page. Comment déplacer cette div vers une deuxième page et charger le contenu via Ajax lorsque la boîte de dialogue est affichée? Et puis-je réutiliser le script pour charger différents contenus selon les besoins?

jqueryajaxdialogmodal-dialog
44
abel

Découvrez ce billet de blog de Nemikor, qui devrait faire ce que vous voulez.

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

Fondamentalement, avant d'appeler «open», vous devez d'abord charger le contenu de l'autre page.

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

essayez d'utiliser celui-ci.

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

$("#dialog").dialog(
       {
        bgiframe: true,
        autoOpen: false,
        height: 100,
        modal: true
       }
);
});
14
Fribu - Smart Solutions
$(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);
        }
});

Ajax-Request charge le dialogue, les ajoute au corps de la page actuelle et ouvre le dialogue.

Si vous voulez seulement charger le contenu, vous pouvez faire:

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

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

peut-être que ce code peut vous donner une idée.

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
Sergey Kharchishin