Comment recharger seulement un script au lieu de toute la page ?

Michel B. · 11 Novembre 2014

J’ai mis au point un générateur de phrases sur cette page : http://users.skynet.be/courstoujours/annexes/satisfecitotron.htm
Pour commander un tirage au sort de chacune des neuf séries de formules, j’utilise l’actualisation de la page "javascript:location.reload()" : cette méthode est un pis-aller. Il faudrait actualiser seulement le code javascript. Mais je rame…
Voyez par un clic-droit le code-source de ma page, vous comprendrez.
Quelqu’un peut-il me mettre sur la voie ou me donner la solution ?

UsagiYojimbo · 11 Novembre 2014

Il faut faire ça en ajax :

http://ajax.developpez.com/cours/
http://pausecafe.fdev-creation.com/jquery-ajax-rechargement-dune-parti ... dune-page/

Ajan · 11 Novembre 2014

UsagiYojimbo a dit:

Il faut faire ça en ajax :
Cliquez pour agrandir...

oui, Ajax permet de recharger une partie d'une page HTML. Mais à ma connaissance les script JS chargés de cette manière ne sont pas exécutés. Or si j'ai bien compris, c'est de cela qu'il est question.

UsagiYojimbo · 11 Novembre 2014

Faut redévelopper tout le truc pour ce faire, en effet. Mais c'est l'affaire de 10 15 mn...

zeb · 11 Novembre 2014

Tt la génération de phrase aléatoire est en dur dans le code javascript dont il faut la modifier pour que ce soit ré-entrant.
Il mange la balise body on dirait.

Michel B. · 11 Novembre 2014

zeb a dit:

Tt la génération de phrase aléatoire est en dur dans le code javascript dont il faut la modifier pour que ce soit ré-entrant.
Il mange la balise body on dirait.
Cliquez pour agrandir...

Ayant lu que la présence d'une "table" dispense de placer les balises "body" "/body", je les ai en effet supprimées. Si cela ne tient qu'à cela, je puis les ajouter. Mais là, n'en revient-on pas à un nouveau chargement de la page ?

zeb · 11 Novembre 2014

Michel B. a dit:

Ayant lu que la présence d'une "table" dispense de placer les balises "body" "/body"
Cliquez pour agrandir...

Sauf erreur c'est des conneries :wink:

En fait il faut que ta fonction ou ensemble de fonctions qui génère la phrase complète modifie le contenant de la phrase via le DOM avec un truc du genre <input type="button" onclick="document.getElementById("truc").innerHTML = ta_fonction();"

Michel B. · 11 Novembre 2014

zeb a dit:

En fait il faut que ta fonction ou ensemble de fonctions qui génère la phrase complète modifie le contenant de la phrase via le DOM avec un truc du genre <input type="button" onclick="document.getElementById("truc").innerHTML = ta_fonction();"
Cliquez pour agrandir...

J'avais pensé à une formule de ce genre. Mais sans savoir quelle syntaxe adopter.
Deux points sont à éclaircir, Zeb : "truc" et "ta_fonction()".

zeb · 11 Novembre 2014

truc c'est l'id du contenant par exemple :
<div id="truc">... ta phrase aléatoire ...</div>

ta_fonction() c'est le point d'entré javascript qui permet de composer ta phrase aléatoire.

en gros ce qui permet de composer ta phrase doit se trouver dans un truc du genre :
ta_fonction(){
... ton code ...
}
cette fonction peut en appeler d'autre mais il te faut un point d'entré unique.

baud74 · 11 Novembre 2014

et qu'elle est bien un :
Code:
return contenuhtmldudiv;
à la fin

Michel B. · 11 Novembre 2014

Je remercie les intervenants pour leur réponse.
Je pense cependant avoir contourné le problème en ajoutant sur ma page http://users.skynet.be/courstoujours/annexes/satisfecitotron.htm
deux cadres au premier, laissant le script démontrer le caractère casuel de l’affichage.

zeb · 11 Novembre 2014

Michel B. a dit:

Je pense cependant avoir contourné le problème en ...
Cliquez pour agrandir...

Oui mais bon c'est pas satisfaisant d'un point de vu technique ou intellectuel et c'est une "fuite du problème"

voici ton code grandement simplifié qui correspond pleinement a ton problème de concaténation d'une suite de variables aléatoires. Tu te prend beaucoup la tête avec ton code :wink:

PHP:

<html> <head> <title></title> <meta content=""> <style></style> </head> <body onload="tf();"> <div id="truc" style="border:1px solid red;"></div> <script type="text/javascript"> var msg1 = new Array(); var msg2 = new Array(); var msg3 = new Array(); var msg4 = new Array(); var msg5 = new Array(); var msg6 = new Array(); var msg7 = new Array(); var msg8 = new Array(); var msg9 = new Array(); msg1.push("Des d\u00e9cennies durant,"); msg1.push("Depuis de nombreuses ann\u00e9es,"); msg1.push("Au jour le jour,"); msg1.push("\u00C0 tout moment,"); msg1.push("Quoi qu\u2019il arriv\u00E2t,"); msg1.push("Tout au long de sa carri\u00E8re,"); msg2.push("cet enseignant hors du commun"); msg2.push("ce distingu\u00e9 professeur"); msg2.push("ce ma\u00eetre chevronn\u00e9"); msg2.push("ce serviteur d\u00e9vou\u00e9"); msg2.push("cet esprit \u00e9clair\u00e9"); msg2.push("ce formateur n\u00e9"); msg2.push("ce soldat du savoir"); msg2.push("ce brillant \u00e9l\u00e9ment"); msg3.push("a d\u00e9velopp\u00e9"); msg3.push("a produit"); msg3.push("a propos\u00e9"); msg3.push("a construit"); msg3.push("a cr\u00e9\u00e9"); msg3.push("a con\u00E7u"); msg3.push("a \u00e9labor\u00e9"); msg4.push("\u00e0 la satisfaction g\u00e9n\u00e9rale"); msg4.push("avec comp\u00e9tence"); msg4.push("avec minutie"); msg4.push("all\u00E8grement"); msg4.push("avec talent"); msg4.push("avec enthousiasme"); msg5.push("des documents de grande qualit\u00e9"); msg5.push("des le\u00E7ons irr\u00e9prochables"); msg5.push("une p\u00e9dagogie d\u2019exception"); msg5.push("des exercices g\u00e9niaux"); msg5.push("des pages remarquables"); msg5.push("des modules interactifs des plus int\u00e9ressants"); msg6.push("en d\u00e9pit de"); msg6.push("malgr\u00e9"); msg6.push("nonobstant"); msg7.push("toutes les"); msg7.push("la multitude de"); msg8.push("querelles"); msg8.push("cabales"); msg8.push("calomnies"); msg8.push("vexations"); msg8.push("duperies"); msg9.push("qu\u2019il a d\u00fb affronter."); msg9.push("dont il se serait bien pass\u00e9."); msg9.push("men\u00e9es contre lui."); msg9.push("dont il fut l\u2019objet."); msg9.push("sem\u00e9es sous ses pas."); msg9.push("ourdies contre lui."); function AffMsg1(){return msg1[Math.round(Math.random(1)*(msg1.length-1))]} function AffMsg2(){return msg2[Math.round(Math.random(1)*(msg2.length-1))]} function AffMsg3(){return msg3[Math.round(Math.random(1)*(msg3.length-1))]} function AffMsg4(){return msg4[Math.round(Math.random(1)*(msg4.length-1))]} function AffMsg5(){return msg5[Math.round(Math.random(1)*(msg5.length-1))]} function AffMsg6(){return msg6[Math.round(Math.random(1)*(msg6.length-1))]} function AffMsg7(){return msg7[Math.round(Math.random(1)*(msg7.length-1))]} function AffMsg8(){return msg8[Math.round(Math.random(1)*(msg8.length-1))]} function AffMsg9(){return msg9[Math.round(Math.random(1)*(msg9.length-1))]} function tf(){ document.getElementById("truc").innerHTML=AffMsg1()+' '+AffMsg2()+' '+AffMsg3()+' '+AffMsg4()+' '+AffMsg5()+' '+AffMsg6()+' '+AffMsg7()+' '+AffMsg8()+' '+AffMsg9(); } </script> <input type="button" onclick="tf();" value="go" /> </body> </html>

ce code comprend une fonction (tf) qui se charge de changer le contenu de la page (div truc) en concaténant la sortie de fonctions destinées a choisir aléatoirement un élément de leur tableaux respectifs (qui peuvent donc être de taille quelconque). ces fonctions sont précédées de l'initialisation des différentes variables utilisées, notamment des tableaux d'expressions possibles.

une première expression est générée sur le onload du body afin d'&avoir un affichage dès la première consultation, l'appui sur le bouton provoque le renouvellement des expressions pour composer une autre phrase.

Michel B. · 11 Novembre 2014

zeb a dit:

voici ton code grandement simplifié qui correspond pleinement a ton problème de concaténation d'une suite de variables aléatoires.
Cliquez pour agrandir...

C'est un superbe travail que vous avez fait là et je vous en suis très reconnaissant.
Je mentionne sur ma page votre aide diligente et fais un lien vers le forum Webrankinfo. Grâce à vous, ce générateur de phrases est abouti.
Merci encore.

spout · 11 Novembre 2014

Voici une version encore plus simplifiée, plus DRY, plus facile à maintenir, etc:
http://jsfiddle.net/oL762nat/

zeb · 11 Novembre 2014

spout a dit:

Voici une version encore plus simplifiée, ...
Cliquez pour agrandir...

+1 l'axe spinn est plus adapté encore à une construction de ce style, même si c'est très loin de l'original proposé.

Michel B. · 11 Novembre 2014

spout a dit:

Voici une version encore plus simplifiée
Cliquez pour agrandir...

Je vous remercie également, Spout, pour le développement de cette application. Comme vous le voyez sur mon site, j'ai intégré le code conçu par Zeb.
En effet, le code que vous proposez est encore réduit mais ne semble pas s'intégrer à une page html.
Ma page renvoie également à votre travail.

Similar Threads - recharger seulement script	Forum	Date
Changer l'URL sans recharger la page	URL Rewriting et .htaccess	2 Janvier 2011
AJAX JQuery : recharger une page	Développement d'un site Web ou d'une appli mobile	23 Décembre 2009
Search Console +1000 pages valides sur Search console mais seulement 4 sur les résultats de "site:"	Problèmes de référencement spécifiques à vos sites	18 Septembre 2020
Etre dans le top 3 des résultats de recherche seulement avec une stratégie de contenu ?	Référencement Google	17 Septembre 2019
email (seulement) vers hotmail impossible alors que tout est au vert	Développement d'un site Web ou d'une appli mobile	9 Septembre 2019
1 catégorie seulement sur le site	Demandes d'avis et de conseils sur vos sites	14 Octobre 2018
3% des images du sitemap indexées seulement	Crawl et indexation Google, sitemaps	9 Avril 2018
Générer du trafic avec les photos : sitemap ou seulement "alt" ?	Débuter en référencement	31 Juillet 2017
Comment Autoriser seulement Google à avoir un lien direct	URL Rewriting et .htaccess	13 Février 2017
Desindexation page accueil et pages menu seulement	Crawl et indexation Google, sitemaps	4 Août 2016