Lorsque je soumets un formulaire à l'aide d'AJAX, je souhaite recharger la section de la page qui a changé, plutôt que la page entière, et pour cela, j'utilise:
$('#body_container').load(a_href);
3 Réponses :
est le problème réel que les gestionnaires d'événements de votre script ne fonctionnent pas dans le contenu chargé de manière dynamique?
Si c'est le cas, changez ces gestionnaires d'événements pour utiliser la délégation d'événements. Par exemple: p> ou: p> où Le gestionnaire d'événements fonctionnera même si vous ne chargez que le script une fois lorsque la page est chargée pour la première fois. p> p> # my-div code> est un élément dans le contenu dynamique. p>
Bonjour, cela fonctionne au plus haut niveau (et est définitivement moins glitchy), mais les fichiers de script au plus haut niveau ne sont pas accessibles par les enfants lorsqu'ils se chargent. Si j'include manuellement le fichier de script en haut du HTML de l'enfant, cela fonctionne, mais à nouveau, c'est très glitchy.
Ce que vous devez faire à ce stade est décrit le problème de termes très spécifiques que les développeurs JavaScript comprendront et donnent un exemple de travail (non fonctionnel) où nous pouvons voir le problème en action. Le violon que vous avez posté n'atténue pas vraiment; Il n'est pas possible de dupliquer le problème là-bas, n'est-ce pas? Et la terminologie comme «les fichiers de script au plus haut niveau ne sont pas accessibles par les enfants lorsqu'ils chargent» n'ont pas de sens. Je fais cela depuis de nombreuses années et je n'ai aucune idée de ce que cela signifie. C'est pourquoi j'ai pris une supposition sauvage quant à ce que le problème pourrait être.
Continuer mon commentaire précédent ... Habituellement, nous ne pensons pas en termes d'éléments enfants "accéder à des fichiers de script". C'est l'inverse. Nous écrivons des fichiers de script qui accèdent aux éléments DOM. C'est pourquoi je et les autres intervenants prennent simplement des suppositions sauvages; Nous ne savons pas quel problème spécifique réel vous essayez de résoudre.
UHM ... J'ai déjà donné ces réponses exactes, et pourtant vous obtenez les seul avis du questionnaire. MDR
@MichaelGeary BTW, D $% ^ bons points de vos commentaires. Ma réponse était une suppose aussi. Bien que je suis où il est (il y a des années, mais j'étais là, lol) alors je pense que vous et moi sommes surpris pour son problème. Mais je ne suis pas sûr de bien comprendre la solution.
@MichaelGeary dans d'autres nouvelles, cela a inspiré mon prochain tutoriel / blogpostost, lol
@ SPYK3HH - "J'ai déjà donné ces réponses exactes, et pourtant vous avez obtenu le seul avis de commentaires." Je ne suis pas tout à fait sûr de ce que vous parlez de. J'ai posté ma réponse trois jours avant la vôtre - peut-être que cela représenterait la discussion précédente? Mais merci d'avoir posté votre réponse également - vous avez fourni beaucoup de détails utiles que je n'ai pas laissé de côté.
@MichaelGeary Oh, je n'ai même pas remarqué les dates, je n'ai même pas remarqué qu'il y avait une autre réponse avant quelques minutes! Oh bien, et je pense que ce qu'il veut dire par "Glitchy" qu'il ne comprend pas, est-il chargé du fichier fini et de plus, les événements sont donc attribués à plusieurs reprises, donc plusieurs appels, ainsi de multiples appels, ainsi que de nombreuses appels. Nous étions tous là une fois! : P
Si je comprends la question de la question, le problème est que vous n'initialisez pas les éléments dans les fichiers externes lorsqu'ils sont chargés de manière dynamique.
Vous devez utiliser le paramètre code> complet code> strong> (rappel) de la jQuery Fichier PHP / HTML principal qui charge du contenu externe: strong> p> contenu externe 1 (ajax_1.php): strong> p> < Pré> xxx pré> .charger () code> strong> méthode; qui exécute lorsque la demande correspondante est terminée. Voici le Documentation forte> . P>
Ceci est similaire à ce dont j'ai besoin, mais j'ai besoin de tout dans le script pour être accessible depuis le contenu externe, pas seulement une seule fonction.
Ceci est juste une démonstration. Ce que je montre ici est; Étant donné que le contenu est chargé de manière dynamique, vous devez lier chaque élément à l'événement / fonction appropriés que vous souhaitez "après" La demande / la charge est terminée. Les éléments DOM doivent être présents lorsque vous leur lierez un événement.
Vous utilisez déjà une délégation d'événement dans cet exemple, alors pourquoi ne pas le laisser faire le travail pour vous? Au lieu de $ ('# externe-div'). On (cliquez sur ',' # externe-btn ', fonctionTObecarked); code> Utilisez
$ (' # ajax_manage '). Sur (' Cliquez sur ',' # externe-btn ', fonctionTObecalled); code>. Maintenant, il vous suffit de le faire une fois lorsque la page est chargée pour la première fois, au lieu d'avoir à reproduire ce gestionnaire d'événements chaque fois que vous chargez du contenu.
y compris le même fichier JS dans chaque charge est un peu beaucoup. Ma suggestion serait d'inclure le fichier dans la tête code> principale code> la première fois. Ensuite, utilisez une "délégation" pour "dynamique" éléments.
Par exemple, disons que je chargez une vue partielle partielle qui aura des boutons de liaison similaires à ceux initialement chargés. Ainsi, je veux qu'ils maintiennent la même fonction de clic. Au lieu d'une affectation typique, telle que: p> i utilisera "délégation". JQuery nous donne un moyen facile de le faire qui affectera le même événement | méthode à tous les articles (présents et futurs [dynamique]) ayant un sélecteur correspondant. La façon de faire cela est comme: p> Le précédent indiquera à tous les balises Une chose à garder à l'esprit, Bien entendu, la délégation ne va pas travailler avec des «événements». Si vous devez utiliser JavaScript pour quelque chose comme «mise en page», vous êtes préférable de faire une fonction «rappel» à utiliser avec le succès d'une demande Ajax. Encore une fois, vous pouvez placer ces méthodes de rappel dans votre fichier tête unique, mais vous devrez "les appeler" au besoin dans $ .AJAX [Succès ou complet]. P> voir S'il n'y a pas assez d'informations, veuillez commenter et je vais essayer de faire tout ce que vous avez une question plus claire. p> p> A code> comportant la classe
BOB code> pour ne pas Allez-y où et vous alerte de leur lien. C'est peu que lorsque la balise
A code> a été ajoutée à la DOM. P>
Exemple h1>
P> .on code> est nouveau à partir de jQuery version 1.72 (je pense). Avant de pouvoir utiliser
.Live code> ou même
.Delegate code> à la place. P>
sur une note latérale h3>
Succès Code> et
complète code> http://api.jquerer.com/jQuery. Ajax / Pour en savoir plus sur les rappels de base d'un appel Ajax. De plus, à la version 1.7, vous pouvez gérer une liste em> ou jQuery objet de
Callbacks code> à tirer si nécessaire. Pour obtenir plus d'informations sur les listes de rappel, voir http://api.jquerery.com/category/ Callbacks-Object / P>
Lors de l'ajout d'une prime, vous devriez au moins laisser les gens qui ont b> ont répondu ce qui n'allait pas avec leur réponse et / ou fournir plus d'informations. Si vous avez eu des réponses vagues, cela peut être parce que votre question était vague pour commencer.
Pouvez-vous donner un exemple réel? un violon peut-être?
Salut @onurilildirim. Voici un violon: jsfiddle.net/fcqbd car je ne peux pas inclure le PHP, s'il vous plaît supposez simplement que Chaque fichier renvoie un modèle arbitraire et non pertinent (qui doit également accéder à JavaScript (et contient ainsi un