web-dev-qa-db-fra.com

Comment charger dynamiquement du contenu depuis une URL externe, à l'intérieur d'un widget de dialogue modal jquery ui?

J'ai déjà posé cette question auparavant, mais je ne pense pas avoir bien expliqué ce que j'essayais d'accomplir.

Il existe plusieurs liens sur mon site Web et je souhaite ouvrir le contenu du lien dans un widget de dialogue modal jquery ui.

J'essaie d'utiliser 'this' pour référencer le lien que l'utilisateur sélectionne de manière dynamique. Qu'est-ce que je fais mal ici?

Le code que j'utilise est ci-dessous:

<a href="index.cs.asp?Process=comments&id=1" id="test">comment #1</a>
<a href="index.cs.asp?Process=comments&id=2" id="test">comment #2</a>
<a href="index.cs.asp?Process=comments&id=3" id="test">comment #3</a>
<div id="somediv"></div>                                    
    <script type="text/javascript">

    $(document).ready(function() {  

        $("#somediv").load(this.getTrigger().attr("href")).dialog({
            autoOpen: false,
            width: 400,
            modal: true
        });     
        $("#test").click(function(){$( "#somediv" ).dialog( "open" );});
});

</script>
javascriptjqueryjquery-ui
9
Efe

http://jsfiddle.net/qp7NP/

Un couple de changements: changé ID en classe et utilisé IFrame.

<a href="http://wikipedia.com/" class="test">comment #1</a><br>
<a href="http://ebay.com/" class="test">comment #2</a><br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
    <iframe id="thedialog" width="350" height="350"></iframe>
</div>
<script>
$(document).ready(function () {
    $(".test").click(function () {
        $("#thedialog").attr('src', $(this).attr("href"));
        $("#somediv").dialog({
            width: 400,
            height: 450,
            modal: true,
            close: function () {
                $("#thedialog").attr('src', "about:blank");
            }
        });
        return false;
    });
});
</script>

Si vous souhaitez extraire le code HTML au lieu d'IFrame, vous devrez utiliser Ajax (XMLHttpRequest), comme ceci: http://jsfiddle.net/qp7NP/1/

16
CC.

Vous ne pouvez pas avoir plusieurs éléments avec le même ID. Changez vos liens en class="test" et donc votre événement click à $('.test').click().

De plus, si vous avez toujours des problèmes, et je me souviens que j'avais des problèmes similaires, car la façon dont JQUery Dialog se comporte avec le DOM Il va littéralement déchirer votre #somediv du contenu et l'ajouter au bas de la page pour afficher cette boîte de dialogue. J'ai résolu mes problèmes de chargement de dialogue dynamique en l'enveloppant dans une autre div.

<div id="somediv-wrap">
  <div id="somediv">

  </div>
</div>

<script>
    $(document).ready(function() {  

        $("#somediv-wrap").dialog({
                  autoOpen: false,
                   width: 400, 
                   height:200,
                   modal: true
                  });  

        $(".test").click(function(event)
          {
              event.preventDefault();
              var link = $(this).attr('href');

              $("#somediv").load(link,function(){
               $( "#somediv-wrap" ).dialog( "open" );   
              });                        
      });
   });
</script>
0
InspiredBy