jQuery code dans ajax contenu chargé ne fonctionne qu'une fois

Question

Je regarde autour de SO depuis un certain temps et n'ai pas été en mesure de trouver quelque chose qui correspond à mon problème, que je ne suis même pas sûr que je peux bien expliquer, alors prenez ça pour ce que ça vaut.

J'ai une page qui charge le contenu dans un div via AJAX (en utilisant la méthode .load()). Il y a plusieurs liens dans la navigation, ce qui signifie que le contenu changera en naviguant sur le site sans actualiser la page entière.

(En fait, pour être honnête, j'ai juste criblé la mise en page DocTemplate [http://css-tricks.com/examples/DocTemplate/] de css-tricks.com Apparemment, même si je ne suis pas un réinventer le programmeur de type de roue, je suis un bash ma tête contre le rouler sans cesse pour le faire fonctionner programmeur.)

Ainsi, index.php charge un certain contenu DB dans un div. Il existe également un formulaire d'entrée modale de l'interface utilisateur jQuery sur index.php. Essentiellement, le seul HTML sur la page est un div vide et un formulaire. Tout cela fonctionne très bien, jusqu'à ce que j'appelle une autre page, puis aller retour à index.php. Le contenu de la base de données n'est pas chargé, et mon formulaire est montré là dans toute sa gloire nue. Je sais pourquoi cela arrive. La page n'a pas été actualisée, rien n'a démarré le code pour charger le contenu et masquer le formulaire.

Ma question est, comment puis-je m'assurer que AJAX .load() et le .dialog() sera exécuté lors du chargement de index.php à nouveau? Est-ce même possible?

Merci, et mes excuses pour la longueur. Je suis bavard quand je suis confus.

Answer 1

Une solution simple et rapide consiste à désactiver la mise en cache d'index.php. Vous pouvez le faire en envoyant les en-têtes Http appropriés. De cette façon, votre page sera toujours recharger.

Answer 2

votre question n'est pas très facile à comprendre. Il semble que vous utilisez le retour bouton du navigateur pour revenir à votre fichier index.php? Lorsque vous cliquez sur le bouton Précédent, le navigateur recharge la page telle qu'elle a été initialement chargée (c'est-à-dire dans l'état où elle était avant toute interaction de l'utilisateur).

Il est donc normal que le navigateur affiche la page nue.

Il vous voulez gérer le bouton de retour et plus généralement l'histoire du navigateur dans une application ajax, vous pouvez utiliser des plug-ins d'histoire jquery existants, comme this one

J'espère que cela vous aidera,

Jerome Wagner

Answer 3

Vous pouvez ajouter une logique de sorte que lorsque votre page a fini de charger, vous vérifiez si la région dynamique est remplie. Si ce n'est pas le cas, exécutez votre routine .load().

$(document).ready(function() { 
    if($('div#theDIV').find('something_that_should_be_there').length == 0) { 
     $('div#theDIV').load('etc,etc') 
    } 
}) 

Answer 4

Je l'ai fonctionné. Je dois relier manuellement les événements dans la fonction de rappel .load() lorsque le contenu est chargé à nouveau.

Answer 5

Le problème est que .bind() lie uniquement les éléments qui existent à l'instant .bind() s'exécute. Puisque vous chargez plus de choses avec ajax plus tard, après .bind() couru, les nouveaux éléments n'auront pas l'événement lié. Il y a 2 solutions de contournement à ceci:

• soit, comme vous l'avez fait, rebind les éléments après chaque charge ajax
• ou utiliser .live() au lieu de .bind().
  La syntaxe de .bind() est similaire à
  $('element').bind('some-event', function() {blabla});. 'some-event' est quelque chose que vous liez: click/submit/mouseover/etc.
  .live() est absolument le même:
  $('element').live('some-event', function() {blabla});

Notez qu'il ya des notations abrégées pour des événements communs:

$('element').click(function() {blabla}); // These are equivalent to 
$('element').bind('click', function() {blabla}); // You need to use .on() 
$(document).on('click', 'element', function() {blabla});