Utilisez AJAX pour remplir page après page en utilisant jQuery

Question

J'apprécierais toute aide sur ce problème. Disons que je veux charger les contrôles pour différents éléments sur la page après avoir terminé le chargement.

Alors:

Object 1 
<div id="controls1" class="controls" item_id="1"></div> 

Object 2 
<div id="controls2" class="controls" item_id="2"></div> 

Object 3 
<div id="controls3" class="controls" item_id="3"></div> 

Comment pourrais-je utiliser jQuery pour les populaires DIVs avec classe de "contrôles" à l'aide d'un appel AJAX? Dans ce cas, je suppose qu'il faudra faire 3 appels ajax à populaire chaque DIV.

Mon ajax pour récupérer le contenu est ajax.php? Request = commande & item_id =

Merci!

Answer 1

Une méthode de base pour ce faire est la suivante:

$(document).ready(function() { 
    $('#controls1').load('ajax.php?request=controls&item_id=1'); 
    $('#controls2').load('ajax.php?request=controls&item_id=2'); 
    $('#controls3').load('ajax.php?request=controls&item_id=3'); 
}); 

Une agréable façon serait de déterminer dynamiquement le nombre de divs 'contrôles que vous avez, et de les charger au besoin ... Par exemple:

$(document).ready(function() { 
    $('.controls').each(function() { 
     var theId = $(this).attr('item_id'); 
     $(this).load('ajax.php?request=controls&item_id=' + theId); 
    }); 
}); 

Bonne chance!

Mise à jour:

Pour éviter d'utiliser la coutume item_id attribut, vous pouvez extraire l'ID que vous voulez de l'ID de l'élément, en utilisant une expression régulière peut-être, comme si ... (avertissement, non testé)

$(document).ready(function() { 
    $('.controls').each(function() { 
     var theId = $(this).attr('id'); 
     theId = /controls(\d+)/.exec(theId)[1]; 
     $(this).load('ajax.php?request=controls&item_id=' + theId); 
    }); 
}); 

Answer 2

Utilisez jQuery.load().

Ceci remplira le DOM de la div cible (n'importe quel élément, en fait). Mais si vous voulez leur attacher des fonctions spéciales, vous devez le faire explicitement une fois le chargement terminé (dans le rappel).

gestionnaires d'événements simples peuvent être initialisées à se lier automatiquement à l'aide du nouveau contenu tiré par les cheveux jQuery.live() (par opposition à Usig jQuery.bind())

Cheers!

Answer 3

Ceci trouvera toutes les divs class = "controls" correspondantes, extraira l'élément item_id et remontera au serveur pour récupérer le code HTML.

En savoir plus sur la charge ajax ici: http://docs.jquery.com/Ajax/load#urldatacallback

$(document).ready(function() { 
     $('.controls').each(function(i) { 
      var itemId = $(this).attr('item_id'); 
      $(this).load('ajax.php?request=controls&item_id=' + itemId) 
     }); 
    }); 

Answer 4

En plus de faire des appels répétés à $.charge (ou autre) si vous voulez faire dans un unique appel ajax, voici deux options:

1 - Wrap tous ces divs dans un autre un, et que le serveur de fournir le contenu entier en une seule demande:

$(document).ready(function() { 
    $('#superDiv').load('foo.html'); 
}); 

2 - Envoyer un objet JSON au client contenant un ID/contenu carte

$(document).ready(function() { 
    $.get('foo.php', function(json) { 
     $('#controls1').html(json.controls1); 
     $('#controls2').html(json.controls2); 
     $('#controls3').html(json.controls3); 
    },"json"); 
});