Discussion :

[MarshallPN]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !
Je tiens à préciser que seul la première ligne me pose problème. les autres fonctionnes correctement dans la console.
Cordialement, Flo

[MarshallPN]

Bonjour,

J'ai réussis à faire en sorte que mes fonctions charge lors du click sur le container ou le contenu est chargé via ajax. Le problème est qu'une fois arrivé sur l'article, pour que les fonctions charges il faut effectuer un click SUR la page de l'article. Une fois le click effectuer les fonctions sont lancé. Mais le but est que les fonctions soit lancé automatiquement au chargement de la page via Ajax. Rien qu'avec ce problème j'en ai appris beaucoup c'est cool ! La joie du Developpement quand ont débute ahah

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
    $("#fullscreenWrapper").on('click', '.magazine-text-mode-wrapper', function() {
        $(".article-image").insertAfter(".article-subheadline");
        $(".tipap-5-col-lift").insertBefore(".article-subheadline");
        $(".tipap-4-col-lift").insertBefore(".article-subheadline");
        $(".tipap-3-col-lift").insertBefore(".article-subheadline");
        $(".tipap-2-col-lift").insertBefore(".article-subheadline");
        $(".tipap-1-col-lift").insertBefore(".article-subheadline");
        $(".sst-commune").insertBefore(".tipap-2-col-lift");
    });

Cordialement, Flo

[Toufik83]

Salut,

Si tu veux qu'un code js s'exécute lors du chargement de la page, il faut le mettre dans un $(document).ready() ou directement dans $(function(){/* code ici ...*/}).

Avec $(document).ready() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$(document).ready(function(){//au chargement de la page exécute ces instructions
    /* code à exécuter ici */
     console.log("exécution de js");//cette ligne s'affichera dans la console du navigateur
});

Avec $(function(){}) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(function(){//au chargement de la page exécute ces instructions
      console.log("exécution de js");
});

[MarshallPN]

Bonjour Toufik83, Merci pour ta réponse.

Le Document Ready est bien présent, j'ai juste pas jugé utile de le mettre ici car il me semble que c'est, comme tu dis, nécessaire dans tout les cas.
En gros mon code actuel est comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
$(document).ready(function() {
    /*Fonctions pour la mise en page des articles*/
    $("#fullscreenWrapper").on('click', '.magazine-text-mode-wrapper', function() {
        $(".article-image").insertAfter(".article-subheadline");
        $(".tipap-5-col-lift").insertBefore(".article-subheadline");
        $(".tipap-4-col-lift").insertBefore(".article-subheadline");
        $(".tipap-3-col-lift").insertBefore(".article-subheadline");
        $(".tipap-2-col-lift").insertBefore(".article-subheadline");
        $(".tipap-1-col-lift").insertBefore(".article-subheadline");
        $(".tipap-sp-titre-5-col-lift").insertBefore(".article-subheadline");
    });
});

Le problème c'est qu'une fois arriver sur la page ou je souhaite que le JS s'éxécute, il faut que je click n'importe ou sur la page pour que les fonctions se lancent. Hors j'aimerais qu'elles se lancent au chargement du contenu appelé par Ajax.

[Invité]

Bonjour,

...j'ai juste pas jugé utile de le mettre ici...

tu peux continuer à copier-coller 1000 fois le même bout de code, ça ne changera rien.

Montre-nous ce qui se passe AVANT, et qui t'oblige à mettre ce "pansement".

...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...

OK : comment ?

[MarshallPN]

Bonjour jreaux62,

Je commence à peine a connaitre Ajax, donc a part te dire qu'il fait appel au flux avec un GET je ne pourrais pas t'en dire plus. Sachant que nous n'avons pas accès à la totalité des fichiers. J'ai un dossier client avec uniquement un sous-dossier js / css. Pour le reste je ne peux y accéder. Avec le peu de connaissance que j'ai en Ajax, je résumerais ça de la manière suivante ; Au clique sur un article (en mode journal et non en mode-text article) Ajax récupéré du xml via un GET et nous l'affiche dans une DIV.

Le problème des titres, sous titres, images qui ne se mettent pas dans le bonne ordre c'est, il me semble, dû à la façon dont les journaliste créent leurs articles. Ils peuvent par exemple ajouter un titre, sous titre et image puis modifier le titre et dans ce cas la, le titre seras considéré comme étant ajouté en dernier par la techno qu'ils utilisent ET du coup, le titre se trouvera à la fin dans les articles. Je suis nouveaux dans cette boite, je ne connais pas tout et la plus part sont en vacance. Y compris le responsable développement. La boite ou je travaille va prochainement revoir entièrement leurs façon de travailler à cause de ce genre de problème. Mais pour le moment il faut faire avec.

Je ne peux hélas pas donner d'information supplémentaire. Ce qui est sur, c'est que mon code jquery fonctionne et résout entiérement le problème MAIS néccessite un click à chaque fois qu'on arrive sur un article pour que les fonctions charges et place le contenu la ou il faut.

[Invité]

Si déjà tu nous disais quel est l'ordre correct, on avancerait (peut-être...).
Quelle doit être la structure HTML finale ?

[Toufik83]

Hors j'aimerais qu'elles se lancent au chargement du contenu appelé par Ajax.

as-tu accès au fichier js qui contient la fonction ajax qui génère le flux ?

Si oui, tu peux alors mettre les lignes de ton code dans le callback "success" ou "done" afin qu'il s'exécute directement après que le contenu d'ajax soit chargé.

[MarshallPN]

as-tu accès au fichier js qui contient la fonction ajax qui génère le flux ?

Si oui, tu peux alors mettre les lignes de ton code dans le callback "success" ou "done" afin qu'il s'exécute directement après que le contenu d'ajax soit chargé.

Hello,
Non je n'ai justement pas accès à ce fichier..

Si déjà tu nous disais quel est l'ordre correct, on avancerait (peut-être...).

Salut,
Qu'entends tu par "Ordre Correct" ?

[Toufik83]

Montre nous le code html généré par la fonction ajax.

Pour cela tu fais un clic droit sur un article puis cliques sur Inspecter, l'outil de développement à droite s'ouvre, tu copies le code html de l'article et tu le colle ici.

[MarshallPN]

Bonjour à toutes et à tous,

Désolé pour le temps que j'ai mis pour revenir ici mais le problème a été résolu via un setTimeout. le code se lancer bien mais avant que les éléments ne soit charger. Voici le code actuellement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
$('.magazine').on('click', function() {
    setTimeout(test, 400);
});
 
function test() {
    //Creation Container pour englober les sous-titre
    $('.text-wrapper').prepend("<div class=Container-subheadline></div>");
    //Placement des sous-titre dans le container sous-titre
    $(".article-subheadline").appendTo(".Container-subheadline");
    //Creation du container engloblant les titres avant le container sous-titre
    $('.Container-subheadline').prepend("<div class=Container-titre></div>");
    //Placement des titres dans le container
    $(".tipap-5-col-lift, .tipap-4-col-lift, .tipap-3-col-lift, .tipap-2-col-lift, .tipap-1-col-lift, .tipap-page-double-lift, .text.tipap-sp-titre-4-col-lift, .tipap-sp-titre-5-col-lift").appendTo(".Container-titre");
    //Placement du container Titre avant le container sous-titre
    $(".Container-titre").insertBefore(".Container-subheadline");
    //Placement des images à la suite du container des sous-titre
    $(".article-image").insertAfter(".Container-subheadline");
    //Creation Container les 2 div signature
    $('.text-wrapper').append("<div class=Container-signature></div>");
    //Placement des div signature dans le container signature
    $(".paragraph.text.smt-signature-lift, .paragraph.text.smt-signature-mail-lift").appendTo(".Container-signature");
    //Placement des surtitres avec puce noir
    $(".paragraph.topheadline.srt-surtitre-on-en-parle-lift").insertBefore(".Container-titre");
    //Placement des titre Bref (fond coloré)
    $(".paragraph.text.tetb-en-bref-ig").insertBefore(".Container-titre");
    // placement surtitre sport
    $(".paragraph.topheadline.srt-sp-surtitre-sport").insertBefore(".Container-titre");
};

Encore merci pour votre aide.
Bonne continuation à tous