2010-03-15 4 views
1

J'essaye de réaliser deux choses, dont je n'arrive pas à comprendre. Sur un serveur sont une série de notes; tous contiennent un div (id = ajxContent). Certaines notes contiennent également un div additiona (id = ajxHead). L'ajxContent contient lui-même des liens (class = click) pour appeler le prochain versement, d'où la destination du lien dans une variable.Comment charger deux divs dans des cibles séparées avec JQuery?

Ceci est mon code:

$(document).ready(function(){ 
$('a.clicking').live('click', function(e){ 
    e.preventDefault(); 
    var theLink = $(this).attr('href'); 
    $('#loadText').load(theLink + '#ajxContent'); 
    $('h1').load(theLink + '#ajxHead'); 
}); 
}) 

Lorsqu'il échoue:

1) le ajxContent est chargé en la balise h1, ainsi que dans sa cible. 2) lorsque j'avais configuré le code différemment, s'il n'y avait pas de div id = ajxHead présent dans une note, le chargement effacerait néanmoins la valeur existante dans l'étiquette h1. Est-ce que je suis sur une mauvaise route ici, avec deux instructions de chargement? L'entrée est la bienvenue, merci.

Répondre

0

Vous avez besoin d'un espace là-bas pour obtenir la partie du contenu, see the .load() docs for details:

$(document).ready(function(){ 
    $('a.clicking').live('click', function(e){ 
    e.preventDefault(); 
    var theLink = $(this).attr('href'); 
    $('#loadText').load(theLink + ' #ajxContent'); 
    $('h1').load(theLink + ' #ajxHead'); 
    }); 
}); 

Mise à jour - Correction de votre page spécifique:

$('a.clicking').live('click', function(e){ 
    e.preventDefault(); 
    $.get($(this).attr('href'), function(resp) { 
     $('#loadText').html($(resp).filter('#ajxContent').html()); 
     var head = $(resp).filter('#ajxHead'); 
     if(head.length) $('h1').html(head.html()); 
    }); 
}); 

Parce que vos éléments sont les éléments racine, que je n'ai pas rencontrés, $(selector, context) ne fonctionne pas, car il le fait en interne: context.find(selector) Dans votre cas, ils ne sont pas les enfants d'un élément de réponse racine, ils sont tous sibl à la racine, faites alert($(resp).length) pour voir ceci.

Quoi qu'il en soit, le code ci-dessus va faire ce que vous cherchez, testé ici dans Chrome et Firefox, semble bon et ne demande qu'une seule fois la page.

+0

Merci beaucoup Nick. Votre premier versement a résolu ma première question, mais le h1 est toujours remplacé lorsqu'une note n'a pas de div ajxHead. Malheureusement, votre deuxième option renvoie un écran tout blanc? – Bussard

+0

@Bussard - Mis à jour, essayez à nouveau la deuxième option. –

+0

@Nick, non, maintenant le ajxContent ne charge pas. – Bussard