Fonctions inopérantes sur le contenu appelé par Ajax
Bonjour;
Étant nouveaux sur le forum je tiens à me présenter. Je m’appelle Florian, âgé de 24 ans et développeur web en alternance dans un journal de presse.
Je suis actuellement à la fin de ma 1 re année.
Aujourd'hui et depuis quelques jours, je suis confronté à un problème, qui je pense, peux être résolu rapidement par des personnes maitrisant bien Jquery ce qui n'est pas mon cas.
Je travaille actuellement sur un projet de virtualisation des journaux, en bref, la possibilité de feuilleter les journaux et différentes éditions que propose mon boulot à leurs abonnés.
Nous appelons ça l'E-paper. Celui-ci a été créé par un prestataire et nous (développeur web du journal) n'avons accès qu'a un dossier "client" avec 3 sous-dossiers : Img, Css, Js.
Donc autant vous dire que nous sommes très limités. Vraiment.
Petit résumé de mises en situation (N'oubliez pas que je débute dans le développement y compris dans la boîte ou je travaille donc je m'excuse d'avance si je n'utilise pas les termes exact) :
*imaginez-vous avec un journal en ligne avec la même apparence que si vous teniez ce dit journal dans vos mains. Nous pouvons changer de page via une petite animation représentant le même effet qu'un vrai journal. Top.
*il y a la possibilité de cliquer sur un article afin de voir celui-ci de manière plus visible. Lorsque nous cliquons sur cet article, du Ajax récupère un flux et l'intégre dans une div qui vient prendre toutes l'espace disponible dans le navigateur (un peut comme si nous avions été redirigé vers une autre page).
Résumé du problème :
*dans un article nous avons : un titre, un sous-titre, une image, le contenu de l'article. Problème => tout ne s'affiche pas dans le bon ordre. Seule solution à m'a porté => Jquery.
Si j'écris les fonctions suivantes dans la console tout va à sa place. Mais, quand j'écris cela dans mon .js les fonctions ne sont pas exécutés sur le contenu des articles lorsque Ajax les intégres (bien après le chargement complet de la page) :
Code:
1
2
3
4
5
6
|
$(".article-image").insertAfter(".article-subheadline");
$(".article-image").insertAfter(".tetb-en-bref-locales");
$(".tipap-5-col-lift").insertBefore(".article-subheadline");
$(".tipap-4-col-lift").insertBefore(".article-subheadline");
$(".tipap-3-col-lift").insertBefore(".article-subheadline"); |
Alors j'ai essayer cela :
Code:
1
2
3
4
5
6
7
8
|
$(".magazine-text-mode-wrapper").bind("DOMSubtreeModified", function() {
$(".article-image").insertAfter(".article-subheadline");
$(".article-image").insertAfter(".tetb-en-bref-locales");
$(".tipap-5-col-lift").insertBefore(".article-subheadline");
$(".tipap-4-col-lift").insertBefore(".article-subheadline");
$(".tipap-3-col-lift").insertBefore(".article-subheadline");
}); |
La le navigateur crash !
Donc j'ai bidouiller jusqu'à trouver cela :
Code:
1
2
3
4
5
6
7
8
|
$(".magazine-text-mode-wrapper").one("DOMSubtreeModified", function() {
$(".article-image").insertAfter(".article-subheadline");
$(".article-image").insertAfter(".tetb-en-bref-locales");
$(".tipap-5-col-lift").insertBefore(".article-subheadline");
$(".tipap-4-col-lift").insertBefore(".article-subheadline");
$(".tipap-3-col-lift").insertBefore(".article-subheadline");
}); |
Miracle, tout fonctionne, mais qu'une seul fois.. forcément au vue du .one, si je quitte l'article et vais sur un autre, les fonctions ne sont plus exécutés. J'ai bouffé de la DOC à gogo mais n'est pas trouvé une alternative fonctionnel au .one
Si quelqu'un à une solution, je suis preneur et cela me permettra d'en connaitre d'avantage sur JQUERY.
Je vous remercie pour votre lecture et j’espère avoir été le plus clair possible et que quelqu'un me diras : Ben voyons Jammy, faut comme cela et tout iras mieux ! :lol:
Je tiens à préciser que seul la première ligne me pose problème. les autres fonctionnes correctement dans la console.
Cordialement, Flo
