Discussion :

[chlock62]

Bonjour,

J'ai un problème avec une chaine non terminé, mais impossible de voir ou, pourtant j'ai déjà eu le problème mais bon

Code :

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

1
2
 
html += '<td class="reserver_td" onclick="location.href=\'utilisateur/reserver/?formation_id=\'+lieu_selected.formations[i].id+\';return false;">Réserver</td>';

Je précise que "lieu_selected.formations[i].id" est une donné JS

Merci les amis

[xtremdisc]

Salut,

essais ça :

Code :

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

html += '<td class="reserver_td" onclick="location.href=\'utilisateur/reserver/?formation_id=\''+lieu_selected.formations[i].id+'\';return false;">Réserver</td>';

il te manque 2 ' autour de ta variable.

[chlock62]

Merci l'ami de me venir en aide, top cool les forums

J'ai l'erreur suivante maintenant

Code :

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

1
2
3
4
5
 
SyntaxError: missing ; before statement (avant le 3)
 
 
location.href='utilisateur/reserver/?formation_id='3';return false;

[chlock62]

Merci mais c'est ok

Code :

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

1
2
 
onclick="location.href=\'utilisateur/reserver/?formation_id='+lieu_selected.formations[i].id+'\';return false;">Réserver</td></tr>';

[xtremdisc]

Ha oui en effet c'est normal.

Et comme ça : (2 solutions à tester)

Code :

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

1
2
html += "<td class=\"reserver_td\" onclick=\"location.href='utilisateur/reserver/?formation_id='"+lieu_selected.formations[i].id+"';return false;\">Réserver</td>";
html += '<td class="reserver_td" onclick="location.href=\'utilisateur/reserver/?formation_id="'+lieu_selected.formations[i].id+'";return false;">Réserver</td>';

[xtremdisc]

Ta ligne comporte des \' alors qu'elle est englobé par des ", plus besoin de \ devant tes ' du coup.

[xtremdisc]

En fait c'est plutôt ça qu'il te faut, désolé pour les 2 solutions érronées

Code :

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

html += "<td class=\"reserver_td\" onclick=\"location.href='utilisateur/reserver/?formation_id="+lieu_selected.formations[i].id+"';return false;\">Réserver</td>";

Sacré apostrophes et guillemets !!

[chlock62]

Tu dis

"Ta ligne comporte des \' alors qu'elle est englobé par des ", plus besoin de \ devant tes ' du coup. "

Il m'en faut pour le lien tout de même, même si c englober par de " comme tu dis

Ma solution

Code :

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

onclick="location.href=\'utilisateur/reserver/?formation_id='+lieu_selected.formations[i].id+'\';return false;">Réserver</td></tr>';

Ta solution

Code :

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

1
2
 
html += "<td class=\"reserver_td\" onclick=\"location.href='utilisateur/reserver/?formation_id="+lieu_selected.formations[i].id+"';return false;\">Réserver</td>";

Cela revien pratiquement au même car tu doit echapper pas mal contrairement a moi


Merci l'ami en tout cas

A plutard

[xtremdisc]

Ha oui j'avais pas vu que t'avais coller que ton onclick au lieu du html +='' complet.

Autant pour moi, ne tiens pas compte de cette remarque

[Watilin]

Le fond du problème ici, c'est qu'on a plusieurs niveaux d'interprétation : du JS dans un attribut HTML onclick, lui même généré par JS. S'embrouiller avec les guillemets est souvent le signe qu'on fait les choses de manière sous-optimale.

Ici, on a donc dans un premier temps une chaîne html construite par JS ; le moteur JS va devoir faire appel à l'interpréteur (le parseur) HTML pour créer l'arbre DOM correspondant. Dans un second temps, l'interpréteur HTML découvre un attribut évènementiel (onclick), et le passe à l'interpréteur JS. Tout ça fait beaucoup de parsing.

On peut supprimer un niveau d'interprétation en remplaçant l'attribut onclick par un gestionnaire d'évènement. Mais cela oblige à un changement de logique : il faut d'abord finaliser l'interprétation du HTML, puis avoir un moyen de sélectionner l'élément sur lequel on veut ajouter le gestionnaire.

Code :

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

1
2
3
4
5
6
7
8
9
10
html += '<td class="reserver_td">Réserver</td>';
…
machin.insertAdjacentHTML("beforeend", html);
Array.forEach(machin.querySelectorAll("td.reserver_td"),
  function ($td, i) {
    $td.addEventListener("click", function (event) {
      event.preventDefault();
      location.href = "utilisateur/reserver/?formation_id=" + lieu_selected.formations[i].id;
    });
  });

On peut encore supprimer un niveau d'interprétation en faisant générer le HTML par JS directement (au lieu de faire appel au parseur HTML comme c'est le cas quand on emploie innerHTML ou insertAdjacentHTML) avec les méthodes du DOM. Ça tombe bien, le DOM proposes des méthodes spécifiques pour construire les tableaux :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var $table = document.createElement("table");
…
var $tr = $table.insertRow();
for (var i = 0; i < truc; i++) {
  var $td = $row.insertCell();
  $td.className = "reserver_td";
  $td.formationId = lieu_selected.formations[i].id;
  $td.addEventListener("click", function (event) {
    event.preventDefault();
    location.href = "utilisateur/reserver/?formation_id=" + this.formationId;
  });
}

J'utilise une propriété expando (formationId) pour éviter le piège de la variable de boucle qui n'est pas évaluée immédiatement.


Je vous l'accorde, ça fait du code plus compliqué, mais c'est plus efficace car tout est fait en une seule passe, lors de l'interprétation du code JavaScript principal. Au lieu de générer du code source HTML et du code source JS qui nécessitent un nouvel appel aux interpréteurs respectifs, on génère des objets DOM directement exploitables par le navigateur. Et comme vous pouvez le voir dans mon second exemple, il n'y a plus de guillemets imbriqués