jQuery : Chargement du contenu d'une boîte de dialogue modale via Ajax

Question

jQuery : Chargement du contenu d'une boîte de dialogue modale via Ajax

Demandé el 1 de Octobre, 2010: Quand la question a-t-elle été
83187 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Actuellement, ma boîte de dialogue modale se présente comme suit

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

Le Div qui est chargé est inclus dans la même page. Comment puis-je déplacer cette division vers une deuxième page et charger son 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 ?

Demandé el 1 de Octobre, 2010 par abel

Answer 1

5 Réponses

Answer 2

73voto

Sam Points 1014

Consultez cet article du blog de Nemikor, qui devrait faire ce que vous voulez.

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

En fait, avant d'appeler "ouvrir", vous "chargez" d'abord le contenu de l'autre page.

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

Répondu el 1 de Octobre, 2010 par Sam (1014 Points )

Answer 3

14voto

Fincha Points 983

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
       }
);
});

Répondu el 1 de Octobre, 2010 par Fincha (983 Points )

Answer 4

7voto

temp2010 Points 21

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

Répondu el 4 de Février, 2013 par temp2010 (21 Points )

Answer 5

5voto

Floyd Points 1300

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

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

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

Les requêtes Ajax chargent la boîte de dialogue, les ajoutent au corps de la page actuelle et ouvrent la boîte de dialogue.

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

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

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

Répondu el 1 de Octobre, 2010 par Floyd (1300 Points )

Answer 6

0voto

kindrosker Points 91

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

Répondu el 6 de Avril, 2013 par kindrosker (91 Points )

jQuery : Chargement du contenu d'une boîte de dialogue modale via Ajax

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

jQuery : Chargement du contenu d'une boîte de dialogue modale via Ajax

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: