2010-07-21 5 views
2

Besoin d'aide de base avec JQuery et AJax. J'ai un ulAide de base de JQuery

<div id="topics"> 

<h1><a href="index.html">JQuery</a></h1> 
    <h3>A Working Primer</h3> 

<ul> 
    <li><a href="articles/includingJQuery.html">Including JQuery</a></li> 
    <li><a href="articles/tools.html">Tools of the Trade</a></li> 
</ul> 
    </div> 

Un vide div où j'aime le contenu Ajax à charger dans la même page que ci-dessus:

<div id="articles"> 
    </div> 

et mon script

$(document).ready(function(){ 
    $("#topics ul li a").click(function(){ 
$('#articles').load(''); 

return false; 
    }); 
}); 

Pas exactement sûr que mettre dans la charge de sorte que sa dynamique. Toute aide est appréciée :)

Répondre

4

Si le contenu est situé à l'emplacement de l'attribut href, alors vous devez obtenir la valeur de cet attribut:

$('#articles').load(this.href); 

alors essayez ceci:

$(document).ready(function(){ 
    $("#topics ul li a").click(function() { 
       // use the content of the href attribute 
       //  for the load parameter 
     $('#articles').load(this.href); 
     return false; 
    }); 
}); 
+0

Merci Patrick :) J'aime revenir de déjeuner et avoir 5 réponses qui m'attendent, surtout quand elles sont à peu près toutes correctes. – mdgrech

+0

@mdgrech - De rien. : o) – user113716

0
$('#articles').load($(this).attr('href')); 

Essayez que ....

0

En utilisant

fonctionnerait vaguement, mais alors vous finiriez avec le document à distance chargé, y compris les balises tête/corps en double. Pour plus de complexité, vous pouvez spécifier une fonction de rappel dans le fichier .load() et l'utiliser pour lire le contenu renvoyé, collecter uniquement les enfants de l'élément <body> et insérer ces enfants dans votre élément.

0

Cela ressemble à ce que vous cherchez ... La fonction suivante appelle un Webservice ASP.Net. J'utilise ensuite les données JSON renvoyées à partir du Webservice pour ajouter html à mon élément. Je pense que vous pouvez probablement voir à partir de cet exemple ce que je fais et l'appliquer à votre propre code. Faites-moi savoir si vous avez besoin de moi pour clarifier quoi que ce soit.

$(function() { 
    $.ajax({ 
     type: "POST", 
     data: "{}", 
     datatype: "json", 
     url: "../webServices/myTestWS.asmx/testMethodTV", 
     contentType: "application/json; charset-utf-8", 
     success: function (msg) { 
      var len = msg.d.rows.length; 
      $('#sidetree').append('<ul id="treeview">'); 
      for (i = 0; i < len; i++) { 
       $('#sidetree').append("<li><span class='expandable'>" + msg.d.rows[i].data + "</span></li>"); 
      } 
      $('#sidetree').append('</ul>'); 

    }); 
}); 
0

Vous devez structurer chaque page inclus pour avoir le même nom div, comme #container, où les données que vous vouliez chargé dans le #articles div est situé. Ensuite, vous pouvez simplement faire:

$(document).ready(function() { 
    $("#topics ul li a").click(function() { 
    var url = $(this).attr('href'); 
    $('#articles').load(url + ' #container'); 
    return false; 
    }); 
}); 

Cela ne chercher le #container div et exclure tous les html supplémentaires/balises corps que vous ne voulez pas et vous ne devez pas traiter avec des fonctions de rappel. Voir http://api.jquery.com/load/