jQuery Girl
  1. jQuery Girl
  3. La liste déroulante d’amorçage ne fonctionne pas après la soumission du formulaire ajax initial
Intereting Posts
Est-il possible d’avoir deux “” dans un même formulaire? jQuery Ajax renvoyant une erreur 404, mais réponse correcte Basculer dynamicment les divs créés Ajouter une div contenant une canvas ne fonctionne pas La propriété animate () scrollTop de jQuery ne fonctionne pas sur iPad Safari Erreur ‘$ .type n’est pas une fonction var obj = $ .type (pref);’ quand soumettre un formulaire dans jqGrid jQuery mobile css faites défiler et cliquez Style de bouton d’entrée de fichier avec jQuery-UI Désactiver par programme la série sur le graphique à barres multiples horizontal nvd3 Pourquoi ne peut pas changer la valeur de la fonction Jquery $ .post (JavaScript) La vidéo Vimeo ne fonctionne pas avec la balise HTML5 Spécifiez l’ordre des validateurs dans le plugin de validation jQuery Comment puis-je faire en sorte qu’une barre de notification ne s’affiche qu’une fois par session? nécessite des plugins js jquery Comment obtenir la valeur eq ()?

La liste déroulante d’amorçage ne fonctionne pas après la soumission du formulaire ajax initial

J’ai un menu déroulant sur ma page, manager.php , ici. Désolé pour le formatage – bootstrap.:

Ce code fonctionne bien lorsque je charge directement manager.php et que la liste déroulante s’initialise, mais ce n’est pas ainsi que le code doit fonctionner.

L’utilisateur commence par return.php ; cette page collecte un dataset provenant de l’utilisateur et les renvoie à manager.php .

Une fois que l’utilisateur a choisi de le faire sur return.php , ce code est exécuté: 

 $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#everything').html(data); } });

L’appel ajax fonctionne correctement et charge les données renvoyées par manager.php dans la div. Il transmet les données comme prévu. La seule chose qui NE FONCTIONNE PAS lors du chargement de manager.php dans la DIV est le menu déroulant. J’ai besoin de comprendre ce que je fais de mal pour activer cette fonctionnalité afin de pouvoir éviter de le faire à l’avenir.

Vous devez réinitialiser manuellement la liste déroulante après avoir chargé les données dans le div tout. J’ai modifié votre appel AJAX pour vous montrer où placer l’appel. 

 $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#everything').html(data); $('#searchBy').dropdown(); } });

Le chargement dynamic que vous effectuez ne provoque pas le rechargement du DOM, ce qui oblige la liste déroulante à être réinitialisée. Une fois votre appel AJAX terminé, vous pouvez réinitialiser manuellement la liste déroulante d’amorçage en appelant .dropdown(); .

MODIFIER

Généralement, les fonctions d’amorçage pour les fonctionnalités sont configurées à l’aide d’un appel $( document ).ready() . Cette fonction s’exécute une fois, après le chargement du DOM et uniquement après son chargement complet. Depuis que vous manipulez le DOM, vous ne causez plus le déclenchement de la fonction, vous devez déclencher manuellement la fonctionnalité dont vous avez besoin.

Vous souhaitez également charger vos inclus une seule fois sur chaque page. Ils doivent être sur manager.php pour que la fonction soit disponible lorsque vous entrez dans votre méthode de réussite. Je suggérerais d’utiliser un modèle pour votre projet afin de gérer tous vos inclus au même endroit. De même, si vous utilisez manager.php en tant que page à inclure dans une autre page, il n’est pas grave si vous n’avez pas la référence aux éléments JavaScript ne fonctionnera pas, car vous ne souhaitez pas que les utilisateurs accèdent à ce composant seul.

Le rechargement que vous effectuez semble forcer le contenu à être ré-ajouté à la page, forçant ainsi l’appel de $( document ).ready() dans le fichier inclus à être réexécuté. Vous pouvez le faire, mais c’est très inefficace.

vous ne pouvez pas initialiser le composant d’amorçage après le chargement de la page en ajoutant des clases d’amorçage. Pour ce faire, vous devez l’initialiser par vous-même

Pour initialiser une liste déroulante, écrivez ce code 

 $('.dropdown-toggle').dropdown();

après 

  $('#everything').html(data);

pour plus de détails: http://getbootstrap.com/javascript/#dropdowns

Donc, je ne suis pas sûr de savoir pourquoi cela fonctionne, mais cela a été le cas jusqu’à présent:

J’ai modifié mon appel ajax pour recharger le fichier .js de bootstrap avant d’exécuter le retour. 

 function reload_js(src) { $('script[src="' + src + '"]').remove(); $('

Pour la prime, quelqu'un peut-il m'expliquer:

a.) Pourquoi dois-je forcer le rechargement de bootstrap.min.js ?

b.) Pourquoi est-ce même nécessaire si j'ai un lien vers ce fichier dans les sections DEUX fichiers?

J'ai aussi essayé de le charger dans l'un, mais pas dans l'autre (donc je ne le charge pas deux fois) et cela ne fait rien.

c.) Pourquoi ça marche? Qu'est-ce que ça fait?

La page va charger DOM 1ère fois. ajax vient de mettre à jour une partie de la page, de sorte que les nouveaux éléments que vous appendez n’auront pas prop défini. vous avez besoin de réinitier comme vous l’avez fait ou de faire quelque chose comme ça

http://hussain.io/2012/01/reinitializing-jquery-event-on-ajax-response/