Charger un code js après le chargement de la page

[alv]

Bonjour,
Je cherche comment charger un code js après le chargement de la page.

Le contenu de la page :

Code:

Quelques sujets<br/>
<span class="bandeau_quelquessujets_images">
   <img src="article(1).png"/>
   <img src="article(2).png"/>
   <img src="article(3).png"/>
</span>
<span class="bandeau_quelquessujets_liens" id="bandeau_quelquessujets_liensactualite">
   <script src="/21314.js" type="text/javascript"></script>
</span>

C'est le code js contenu dans "21314.js" que je souhaite qui se charge après le chargement de la page.

Comment faire ?
Merci d'avance.

[alv]

Up

[alv]

Up

[alv]

Up svp

[Miettes]

Coucou

Tu peux tester ça :

Code:


jQuery(function(){
  var member="";                        // si inscrit
  var fichier="......../feed/?f=29";
  var limite_debut="1";                  // sujets compris entre 1
  var limite_fin="3";                    // et plus
  var aspect="0";                        // 0 ou 1 (1: liens et descriptions, 0: liens)
  var minute="1";                        // 0 ou 1 (1: dates et heures, 0: pas dates et pas heures)
  var sujet="1";                        // 0 ou 1 (1: titres, 0: pas titres)
  var te="Raleway,Verdana,Arial,Helvetica,sans-serif";  // police
  var fil_textsize="13";                  // taille des liens et descriptions
  var title_textcolor="000000";        // couleur des liens
  var tlien="none";                    // style des lien (none ou underline)
  var text_textcolor="000000";        // couleur des descriptions
  var frame_color="";                  // couleur d'arriere plan
  var content="1";                    // 0 ou 1 (1: format html, 0: format texte)
  var extract="";                        // vide ou nombre de caracteres a garder dans le corps du flux
  var cache="15";                        // gestion du cache exprimee en minutes - en fonction de la frequence de mise a jour
 
  document.write('<'+'script type="text/javascript" charset="ISO-8859-1" src="http://www.actifpub.com/rss.php?fichier_AP_='+fichier+'&limite_AP_='+limite_debut+'&limite1_AP_='+limite_fin+'&aspect_AP_='+aspect+'&minute_AP_='+minute+'&sujet_AP_='+sujet+'&te_AP_='+te+'&fil_textsize_AP_='+fil_textsize+'&title_textcolor_AP_='+title_textcolor+'&text_textcolor_AP_='+text_textcolor+'&frame_color_AP_='+frame_color+'&content_AP_='+content+'&cache_AP_='+cache+'&extract_AP_='+extract+'&tlien_AP_='+tlien+'&java=1&member_AP_='+member+'"></sc'+'ript>');

});


[alv]

Bonjour,
Merci pour le code mais il y a un problème. Le script se charge bien après le chargement de la page, mais le code affiche les liens sur toutes la page.

[Miettes]

Ah bah ça c'est normal ^^

Code:

document.write();

Signifie : j'écris directement dans la page.

Je suppose que toi, tu veux que ces liens ne s'affichent que dans un bloc en particulier ?

[alv]

Oui, dans un "span" :

Code:

<span class="bandeau_quelquessujets_liens" id="bandeau_quelquessujets_liensactualite">

[Miettes]

Du coup, au lieu de ça :

Code:

document.write('<'+'script type="text/javascript" charset="ISO-8859-1" src="http://www.actifpub.com/rss.php?fichier_AP_='+fichier+'&limite_AP_='+limite_debut+'&limite1_AP_='+limite_fin+'&aspect_AP_='+aspect+'&minute_AP_='+minute+'&sujet_AP_='+sujet+'&te_AP_='+te+'&fil_textsize_AP_='+fil_textsize+'&title_textcolor_AP_='+title_textcolor+'&text_textcolor_AP_='+text_textcolor+'&frame_color_AP_='+frame_color+'&content_AP_='+content+'&cache_AP_='+cache+'&extract_AP_='+extract+'&tlien_AP_='+tlien+'&java=1&member_AP_='+member+'"></sc'+'ript>');

essaie de faire ça :

Code:


var contenu = '<'+'script type="text/javascript" charset="ISO-8859-1" src="http://www.actifpub.com/rss.php?fichier_AP_='+fichier+'&limite_AP_='+limite_debut+'&limite1_AP_='+limite_fin+'&aspect_AP_='+aspect+'&minute_AP_='+minute+'&sujet_AP_='+sujet+'&te_AP_='+te+'&fil_textsize_AP_='+fil_textsize+'&title_textcolor_AP_='+title_textcolor+'&text_textcolor_AP_='+text_textcolor+'&frame_color_AP_='+frame_color+'&content_AP_='+content+'&cache_AP_='+cache+'&extract_AP_='+extract+'&tlien_AP_='+tlien+'&java=1&member_AP_='+member+'"></sc'+'ript>' ;

$('#bandeau_quelquessujets_liensactualite').html(contenu);


[alv]

Le code ne marche pas.
C'est un script spécial d'actifpub et il ne s'exécute pas en installant ton dernier code. Ca ne marche qu'avec "document.write".

Du coup, comment faire qu'avec "document.write", le script s'exécute dans un "span" après le chargement de la page ?

[Miettes]

Tu l'as mis sur le forum indiqué dans ton profil ?

Si oui, tu as une erreur javascript ailleurs, ça explique peut etre pourquoi le script ne fonctionne pas.

[alv]

Oui, c'est sur le forum de mon profil.
J'ai installé le code dans un template qui n'est pas encore en ligne.

Une erreur ? où ça ?

[alv]

Up

[alv]

Up

[Lixyr]

Bonsoir Alv,

J'ai deux erreurs sur votre forum :

- fichier 25672.js

if(_userdata['user_posts']>=1){document.write('<img class="bandeau_cadenas" src=...
ReferenceError: _userdata is not defined

- fichier http://peuplevert.forumloire.com/

...var heures = date.getHours();var minutes = date.getMinutes();var secondes = date...
TypeError: document.getElementById(...) is null

Les erreurs de JS stoppent toute lecture de JS qui serait après, donc comme dit Miettes, c'est surement pour ça que le code fourni au dessus ne fonctionne pas.

[alv]

Bonjour Lixyr,

J'ai corrigé les erreurs, je pense.

Pour revenir à mon problème, j'ai fait ceci :
Feuille 24788.js :

Code:

var member="";         // si inscrit
var fichier="...../feed/?f=29";
var limite_debut="1";      // sujets compris entre 1
var limite_fin="3";         // et plus
var aspect="0";         // 0 ou 1 (1: liens et descriptions, 0: liens)
var minute="1";         // 0 ou 1 (1: dates et heures, 0: pas dates et pas heures)
var sujet="1";            // 0 ou 1 (1: titres, 0: pas titres)
var te="Raleway,Verdana,Arial,Helvetica,sans-serif";   // police
var fil_textsize="13";      // taille des liens et descriptions
var title_textcolor="000000";   // couleur des liens
var tlien="none";         // style des lien (none ou underline)
var text_textcolor="000000";   // couleur des descriptions
var frame_color="";         // couleur d'arriere plan
var content="1";         // 0 ou 1 (1: format html, 0: format texte)
var extract="";            // vide ou nombre de caracteres a garder dans le corps du flux
var cache="15";         // gestion du cache exprimee en minutes - en fonction de la frequence MAJ

var actualite = '<'+'script type="text/javascript" charset="ISO-8859-1" src="http://www.actifpub.com/rss.php?fichier_AP_='+fichier+'&limite_AP_='+limite_debut+'&limite1_AP_='+limite_fin+'&aspect_AP_='+aspect+'&minute_AP_='+minute+'&sujet_AP_='+sujet+'&te_AP_='+te+'&fil_textsize_AP_='+fil_textsize+'&title_textcolor_AP_='+title_textcolor+'&text_textcolor_AP_='+text_textcolor+'&frame_color_AP_='+frame_color+'&content_AP_='+content+'&cache_AP_='+cache+'&extract_AP_='+extract+'&tlien_AP_='+tlien+'&java=1&member_AP_='+member+'"></sc'+'ript>';

jQuery(function(){
   $('#bandeau_quelquessujets_imagesactualite').html('
      <span class="bandeau_quelquessujets_images">
         <img src="..../Bandeau_actualite_article(1).png"/>
         <img src="..../Bandeau_actualite_article(2).png"/>
         <img src="..../Bandeau_actualite_article(3).png"/>
      </span>
   ');
   $('#bandeau_quelquessujets_liensactualite').html(actualite);
});

Template overall_header :

Code:

<span id="bandeau_quelquessujets_imagesactualite"></span><span id="bandeau_quelquessujets_liensactualite" class="bandeau_quelquessujets_liens"></span>
<script src="/24788.js" type="text/javascript"></script>

Les images se chargent bien après la page, mais les liens n'apparaissent pas du fait de :

Code:

$('#bandeau_quelquessujets_liensactualite').html(actualite);

Ca ne marche qu'avec document.write mais ça apparaît sur toute la page et dans le "<span id='bandeau_quelquessujets_liensactualite'>"

[Lixyr]

Il y a encore des erreurs de JS lorsque je suis sur votre forum.

- fichier peuplev...ire.com (ligne 71, col. 2306)

...var heures = date.getHours();var minutes = date.getMinutes();var secondes = date...
TypeError: document.getElementById(...) is null

- fichier fr.js (ligne 2151, col. 2)

$(document).on('click', function(e) {
TypeError: $(...).on is not a function

Je vous conseille de désactiver tous les JS sauf celui sur lequel vous travaillez pour déjà essayer de le faire fonctionner, et ensuite, corriger les erreurs dans les autres.

[alv]

Comment vous faites pour voir ça ?

Quant à mon problème, j'ai changé de code :
Feuille 21881.js :

Code:

jQuery(document).ready(function(){
   $('#bandeau_quelquessujets_imagesactualite').html('
      <img src="..../Bandeau_actualite_article(1).png"/>
      <img src="..../Bandeau_actualite_article(2).png"/>
      <img src="..../Bandeau_actualite_article(3).png"/>
   ');
   jQuery('#bandeau_quelquessujets_liensactualite').load('/f29-actualite-reactions-aux-articles span.titre_sujet:lt(4)');
});

Template overall_header :

Code:

<span id="bandeau_quelquessujets_imagesactualite" class="bandeau_quelquessujets_images"></span>
<span id="bandeau_quelquessujets_liensactualite" class="bandeau_quelquessujets_liens"></span>
<script src="/21881.js" type="text/javascript"></script>

C'est parfait. Ça apparaît les 4 derniers sujets de la catégorie souhaitée, et après le chargement de la page.
Reste un petit soucis. Le code affiche un lien comme ceci :

Code:

<a href="....">Texte du lien</a>

mais je souhaiterais afficher une image dans le lien, comme ceci :

Code:

<a href="....">Texte du lien<br/><img src="..."/></a>

J'ai essayé ceci :

Code:

<script type="text/javascript">
$('#bandeau_quelquessujets_liensactualite a').append('<span class="bandeau_quelquessujets_section"><img src="..../Bandeau_actualite_sectionreactionsauxarticles.png"/></span>');
</script>

mais ça ne marche pas.

[Lixyr]

Où est-ce que je peux voir sur le forum ces span ? C'est quelle partie ?

Vous avez encore des erreurs :

- fichier peuplev...ire.com (ligne 71, col. 2306)

...var heures = date.getHours();var minutes = date.getMinutes();var secondes = date...
TypeError: document.getElementById(...) is null

- fichier fr.js (ligne 2151, col. 2)

$(document).on('click', function(e) {
TypeError: $(...).on is not a function

Pour les voir vous devez avoir Firebug. Et aller dans l'onglet "console".

[alv]

Je suis entrain de modifier le template overall_header et les modifications ne sont pas encore en ligne. Les span sont dans le code.

Le code se présente comme ça :
Template overall_header :

Code:

<span id="bandeau_quelquessujets_imagesactualite" class="bandeau_quelquessujets_images"></span>
<span id="bandeau_quelquessujets_liensactualite" class="bandeau_quelquessujets_liens"></span>
<script src="/21881.js" type="text/javascript"></script>

Feuille 21881.js :

Code:

jQuery(document).ready(function(){
   $('#bandeau_quelquessujets_imagesactualite').html('
      <img src="..../Bandeau_actualite_article(1).png"/>
      <img src="..../Bandeau_actualite_article(2).png"/>
      <img src="..../Bandeau_actualite_article(3).png"/>
   ');
   jQuery('#bandeau_quelquessujets_liensactualite').load('/f29-actualite-reactions-aux-articles span.titre_sujet:lt(4)');
});

L'exécution des codes donne ce résultat :

Code:

<span id="bandeau_quelquessujets_imagesactualite" class="bandeau_quelquessujets_images">
   <img src="..../Bandeau_actualite_article(1).png"/>
   <img src="..../Bandeau_actualite_article(2).png"/>
   <img src="..../Bandeau_actualite_article(3).png"/>
</span>
<span id="bandeau_quelquessujets_liensactualite" class="bandeau_quelquessujets_liens">
   <span class="titre_sujet">
      <a href="....">TEXTE</a>
   </span>
   <span class="titre_sujet">
      <a href="....">TEXTE</a>
   </span>
   <span class="titre_sujet">
      <a href="....">TEXTE</a>
   </span>
   <span class="titre_sujet">
      <a href="....">TEXTE</a>
   </span>
</span>

J'ai installé Firebug et il n'y a plus d'erreur sur "?tt=1".

[alv]

Up

[Lixyr]

Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné. Je vous invite à lire : - Règles générales du forum - Charte de ce forum

Hum à vu de nez, essayez quelque chose comme ça :

Code:

each( jQuery('#bandeau_quelquessujets_liensactualite span a'), function(key, ahtml) {
  var texte_1 = $(this).text();
  var texte_2 = texte_1 + "<img src="..." />";
  $(this).text(texte_2);
});

C'est à vu de nez, il se peut qu'il y ait des erreurs (j'ai codé ça directement dans la réponse)... Mais j'aurais préféré tester directement le code sur votre forum, vu que votre forum se rempli avec JS...

Après je pense que ça risque de ne pas fonctionner, vu que le JS se charge au chargement de la page, vos div se remplissent déjà par du JS, elles n'existent donc pas initialement. Mais je dis peut-être une bêtise... Il faut tester.

[alv]

Bonjour,
A 40 minutes avant les 24 heures, je me suis permis de mettre un up. Sur 24 heures, ce n'est que 40 minutes en avance.

J'ai essayé ceci :

Code:

jQuery(document).ready(function(){
   $('#bandeau_quelquessujets_imagesactualite').html('
      <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea24.png"/>
      <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea22.png"/>
      <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea23.png"/>
   ');
   jQuery('#bandeau_quelquessujets_liensactualite').load('/f29-actualite-reactions-aux-articles span.titre_sujet:lt(4)');
});

each(jQuery('#bandeau_quelquessujets_liensactualite span a'), function(key, ahtml){
   var texte_1 = $(this).text();
   var texte_2 = texte_1 + "<img src='http://i84.servimg.com/u/f84/19/37/16/39/bandea39.png'/>";
   $(this).text(texte_2);
});

Comme vous vous en doutiez, ça ne marche pas.

[Lixyr]

Je sais, mais si on part du principe que 40 minutes ça ne fait que 40 minutes, on peut aussi penser que deux heures ne sont que deux heures.


Il faudrait valider les templates et le code JS, que je puisse directement essayer sur votre forum, ça ira plus vite.

[alv]

J'ai validé. La feuille js est "22640.js".

[Lixyr]

Oh j'y étais presque :

Code:

jQuery.each(jQuery('#bandeau_quelquessujets_liensactualite span a'), function(key, ahtml){
  var texte_1 = jQuery(ahtml).text();
  var texte_2 = texte_1 + " " + "<img src=\"http://i84.servimg.com/u/f84/19/37/16/39/bandea39.png\"/>";
  jQuery(ahtml).text(texte_2);
});

Par contre ce sera toujours la même image.

[alv]

Ça tombe bien, je souhaite que ce soit tout le temps la même image.

Ca ne fonctionne pas :
Feuille 22668.js :

Code:

jQuery(document).ready(function(){
   $('#bandeau_quelquessujets_imagesactualite').html('
      <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea24.png"/>
      <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea22.png"/>
      <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea23.png"/>
   ');
   jQuery('#bandeau_quelquessujets_liensactualite').load('/f29-actualite-reactions-aux-articles span.titre_sujet:lt(4)');

   $('#bandeau_quelquessujets_imagessaison').html('
      <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea25.png"/>
      <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea26.png"/>
      <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea27.png"/>
   ');
   jQuery('#bandeau_quelquessujets_lienssaison').load('/f23-saison-matchs span.titre_sujet:lt(4)');
});

jQuery.each(jQuery('#bandeau_quelquessujets_liensactualite span a'), function(key, ahtml){
   var texte_1 = jQuery(ahtml).text();
   var texte_2 = texte_1 + " " + "<img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea39.png"/>";
   jQuery(ahtml).text(texte_2);
});

[Lixyr]

Il faut mettre le code dans la déclaration de la librairie jQuery...

Code:

    jQuery(document).ready(function(){
      $('#bandeau_quelquessujets_imagesactualite').html('
          <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea24.png"/>
          <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea22.png"/>
          <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea23.png"/>
      ');
      jQuery('#bandeau_quelquessujets_liensactualite').load('/f29-actualite-reactions-aux-articles span.titre_sujet:lt(4)');
   
      $('#bandeau_quelquessujets_imagessaison').html('
          <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea25.png"/>
          <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea26.png"/>
          <img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea27.png"/>
      ');
      jQuery('#bandeau_quelquessujets_lienssaison').load('/f23-saison-matchs span.titre_sujet:lt(4)');
   
    jQuery.each(jQuery('#bandeau_quelquessujets_liensactualite span a'), function(key, ahtml){
      var texte_1 = jQuery(ahtml).text();
      var texte_2 = texte_1 + " " + "<img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea39.png"/>";
      jQuery(ahtml).text(texte_2);
    });
});

[alv]

Bonsoir,

Avec cette modification, le code ne marche plus du tout (feuille "22187.js")

Je pense qu'il y a un soucis dans le code :

Code:

var texte_2 = texte_1 + " " + "<img src="http://i84.servimg.com/u/f84/19/37/16/39/bandea39.png"/>";

Les guillemets autour de l'adresse de l'image qui se ferment et qui s'ouvrent.
Je l'ai modifié comme ça :

Code:

var texte_2 = texte_1 + " " + "<img src='http://i84.servimg.com/u/f84/19/37/16/39/bandea39.png'/>";

Le code s'exécute, mais l'image n'apparaît pas.

[Lixyr]

Il n'y a pas de soucis dans le code, enfin le code que j'ai fourni non, sauf que je viens de voir que quand je le copie-colle, certaines choses sont enlevées... Normalement il y a des anti-slash avant les guillements de l'attribut src de l'image... >___<

Code:

      var texte_2 = texte_1 + " " + "<img src=\"http://i84.servimg.com/u/f84/19/37/16/39/bandea39.png\"/>";

Je ne sais pas pourquoi ils ont disparu quand j'ai copié-collé, surtout que ça fait plusieurs fois... J'espère que là c'est bon.