Discussion :

[Mister Paul]

Bonjour,

je débute avec jQuery...
je souhaiterais ajouter un lien a href à un titre créé avec jQuery depuis une fonction.

J'ai mis :

Code :

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

jQuery('.video').html(json.title).attr('href',json.url).attr('target','_blank');

Mais je récupère ce résultat

Code :

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

<h4 class="mes classes"  href="https://www.aaaa.fr" target="_blank">Mon titre</h4>

J'aurais voulu

Code :

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

<h4 class="mes classes"><a href="https://www.aaaa.fr" target="_blank">Mon titre</a></h4>

Comment s'y prendre ?

Merci pour l'aide
Paul

[Invité]

Bonjour,

Code html :

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

<h4 class="video autres classes"></h4>

Code jQuery :

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

1
2
3
4
5
6
7
json = {
  'title' : 'Mon titre',
  'url' : 'https://www.aaaa.fr',
}
 
jQuery('.video').append('<a>');
jQuery('.video > a').html(json.title).attr('href',json.url).attr('target','_blank');

[Mister Paul]

Bravo.
Bravissimo.

Je reste toujours émerveillé de voir le code arriver à faire ce qu'on lui demande.
D'autant plus que je n'arrive pas à bien l'exprimer...
Alors ça a toujours quelque chose de magique.


Merci.

[Mister Paul]

Bon, je me suis réjouis trop vite…

Oui le lien en target _blank a bien été généré,
mais Non le contenu textuel n’est pas mis à jour par la fonction alors qu’il le devrait

Bon c’est sans doute de ma faute avec les modifications de code pour essayer de simplifier…


Alors voici :

Code initial avant l’insertion du lien.
L’avant dernière ligne génère le bon texte à chaque lancement de la fonction :

Code :

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

1
2
3
4
5
6
7
8
9
success: function (json) {
		if (json != 0){
		jQuery('.video').html('');
		jQuery('.video').html(json.title);
		jQuery('.video').next().children().attr('src',json.image);
		jQuery('.video').next().children().css( "cssText", "width: 120px !important" );
		jQuery('.video').next().next().html(json.text);
		jQuery('#end_at').val(json.end_at);
		}

Code actuel :
A l’avant dernière ligne le code génère bien le bon lien,
Mais le contenu textuel n’est plus modifié par la fonction alors qu’il le devrait :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
success: function (json) {
		if (json != 0){
		jQuery('.video').html('');
		jQuery('.video').append('<a>');
		jQuery('.video > a').html(json.title).attr('href',json.url).attr('target','_blank');
		jQuery('.video').next().children().attr('src',json.image);
		jQuery('.video').next().children().css( "cssText", "width: 120px !important" );
		jQuery('.video').next().next().append('<a>');
		jQuery('.video > a').next().next().html(json.text).attr('href',json.url).attr('target','_blank');
		jQuery('#end_at').val(json.end_at);
		}

Un dernier petit coup de pouce ?

[Invité]

Bonjour,

montre le code HTML qui va avec.
.next().next() ?

[Mister Paul]

Oops... j'aimerais bien te copier/coller le code html mais je ne vois vraiment pas lequel...


En tous cas, utilisé sur une seule ligne, tel quel, ce code fonctionne et génère le bon texte (mis à jour)

Code :

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

 jQuery('.video').next().next().html(json.text);

[Invité]

C'est simple :

• Tu as des balises avec la classe "video" (.video),
• et un div (?) avec l'id "end_at" (#end_at).

C'est ce qu'on veut voir...
Sinon, on ne peut pas savoir quoi corriger.

[Mister Paul]

OKi
Ça c'est le code html généré :

Code HTML :

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

1
2
3
4
5
6
<div class="nspArt nspCol3" style="padding:0 20px 20px 0;clear:both;">
	<input type="hidden" name="end_at" id="end_at" value="2018-10-12T15:40:01+0000">
	<h4 class=" nspHeader tleft fnone has-image"><a href="https://www.test.com" target="_blank">Texte OK</a></h4><a href="https://www.test.com" class="nspImageWrapper tleft fleft gkResponsive" style="margin:6px 14px 0 0;" target="_blank"><img class="nspImage"
		  src="mon_image_OK MISE A JOUR.png" alt="" style="width: 120px !important;"></a>
	<p class="nspText tleft fnull"><a href="https://www.test.com" target="_blank">Texte NON MIS A JOUR</a><a></a><a></a></p><a class="readon fright" href="https://www.test.com" target="_blank">Texte OK</a>
</div>

[Mister Paul]

Ça n'est pas ce que tu me demandais ?

[Invité]

Bonjour,

Code :

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

.....Texte NON MIS A JOUR</a><a></a><a></a>.....

1- Et ça, ça ne te dérange pas ?
Ça devrait pourtant te mettre la puce à l'oreille.

2- Et je ne vois aucune balise avec la classe "video" ??

3- Quel est le code initial (AVANT modif. JS) ?

4- A tout hasard je dirais qu'il faut remplacer :

Code :

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

		jQuery('.video > a').next().next().html(json.text).attr('href',json.url).attr('target','_blank');

par

Code :

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

		jQuery('.video').next().next().find('a').html(json.text).attr('href',json.url).attr('target','_blank');

[Mister Paul]

Pardon, je n'avais pas vu que tu avais édité ton post initial et je cherchais de mon côté.

De ton côté, ton "à tout hasard" tombe évidemment pile dedans !


Je récupère le bon texte, mais doublé.
Alors j'ai enlevé à mon code :

Code :

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

jQuery('.video').next().next().append('<a>');

qui était à l'origine des <a></a> successifs à chaque reload du script.

Tout semble impec !

Merci infiniment.
(si, si...)

[NoSmoking]

Bonjour,
je viens de regarder rapidement ton code jQuery et le moins que l'on puisse dire qu'il te facilite le « plantage » !
Exemple :

Code :

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

1
2
jQuery('.video').append('<a>');
jQuery('.video > a').html(json.title).attr('href', json.url).attr('target', '_blank');

tu accèdes en fait au même élément <a> crée fraichement.

Tu aurais meilleur compte de créer cet élément en utilisant le chainage, tu gagnerais en lisibilité

Code :

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

1
2
3
4
5
6
7
8
var elem = $("<a></a>", {
    "href": json.url,
    "title": json.title,
    "target": "_blank",
    "style": json.style,
    "text": json.texte
  })
  .appendTo($("'.video"));

Une bonne solution est souvent d'écrire le HTML auquel on veut aboutir pour bien en visualiser les hiérarchies.