Comment ouvrir un lien href dans un dialogue jQuery?

Ok, donc j'ai le code suivant indiqué ci-dessous pour créer une boîte de dialogue à l'aide d'un div dans une page particulière:Comment ouvrir un lien href dans un dialogue jQuery?

$('#modal').dialog({ 
    autoOpen: false, 
    width: 600, 
    height: 450, 
    modal: true, 
    resizable: false, 
    draggable: false, 
    title: 'Enter Data', 
    close: function() { 
     $("#modal .entry_date").datepicker('hide'); 
    } 
}); 

$('.modal').click(function() { 
    $('#modal').dialog('open'); 
});

Il est tout beau travail. Cependant, maintenant ce que je veux faire est aussi de pouvoir ouvrir un lien dans une fenêtre de dialogue. Par exemple en utilisant quelque chose le long des lignes du code ci-dessous:

<a href="/path/to/file.html" class="modal">Open Me!!</a>

Je l'ai déjà fait par hardcoding le chemin comme dans le code exemple ci-dessous:

$('#modal').load('/path/to/file.html').dialog('open');

Dans ce cas cependant, nous ne peut pas coder en dur le chemin dans le javascript car il y aura plusieurs éléments provenant de la base de données. À ce stade, j'ai du mal à comprendre comment faire fonctionner cela. Je suis également convaincu que la réponse est vraiment évidente, et je me prépare simplement à être humilié par les gens intelligents ici à StackOverflow. Je me suis gratté la tête assez longtemps cet après-midi, donc mon ego a été rangé, et j'espère que quelqu'un pourra me diriger dans la bonne direction pour le coder correctement.

Source

2010-03-22 Phil

Eh bien, la page doit savoir ce que le chemin est en quelque sorte * *, non? Comment la page obtient-elle cette information? Lorsque vous avez cette réponse, votre approche consistant à utiliser "load" avant d'ouvrir la boîte de dialogue est assez proche de ce dont vous avez besoin. – Pointy

Vous pouvez simplement saisir l'attribut href et charger que

$('.modal').click(function(e) { 
    e.preventDefault(); 
    $('#modal').load(this.href).dialog('open'); 
});

Source

2010-03-22 17:56:38 PetersenDidIt

Cela a fait l'affaire. Je savais que vous seriez en mesure d'obtenir le href un peu comment, mais tout ce que j'ai essayé a ouvert le lien, même si cela n'empêchait pas le navigateur d'ouvrir le lien d'abord! Merci beaucoup!!! – Phil

Phil, vous devez saisir l'attribut href:

var link = $('#modal').attr('href'); 
$('#modal').load(href).dialog('open');

Source

2010-03-22 17:58:04 ground5hark

Vous avez oublié de dire que vous devez désactiver la balise d'ancrage pour envoyer une requête au serveur. Cela est fait en arrêtant la propagation sur le navigateur par 'preventDefault' ou' return false; ' –

Dans cette taille de dialogue du code et le titre est déclarer en lien

<script type="text/javascript"> 

    function tb_parseQuery(query) { 
     var Params = {}; 
     if (!query) { return Params; }// return empty object 
     var Pairs = query.split(/[;&]/); 
     for (var i = 0; i < Pairs.length; i++) { 
      var KeyVal = Pairs[i].split('='); 
      if (!KeyVal || KeyVal.length != 2) { continue; } 
      var key = unescape(KeyVal[0]); 
      var val = unescape(KeyVal[1]); 
      val = val.replace(/\+/g, ' '); 
      Params[key] = val; 
     } 
     return Params; 
    } 
    $(document).ready(function() { 
     $('a.uimodal').bind('click', function() { 

     var $this = $(this); 
     var url = $this.attr("href"); 



     var queryString = url.replace(/^[^\?]+\??/, ''); 
     var params = tb_parseQuery(queryString); 
     TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL 
     TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL 
      TB_Title = (params['title']); 



     $('<div>').dialog({ 
      modal: true, 
      open: function() { 
       $(this).load(url); 
      }, 
      height: TB_HEIGHT, 
      width: TB_WIDTH, 
      title: TB_Title 
     }); 
     return false; 
    }); 
    }); 
</script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a> 
    </div> 
    </form> 
</body> 
</html>

Source

2012-12-14 19:35:02

Comment ouvrir un lien href dans un dialogue jQuery?

Répondre

Questions connexes