11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Externaliser window.confirm

Pages :
Bonjour,

J'ai ce petit code qui marche bien :

<table class="act">
<tr><td class="lnk"><a href="b.php?c=PVa" class="av">Valider</a></td>
<td class="lnk"><a href="b.php?c=PMd" class="av">Modifier quantit&eacute;</a></td></tr>
<tr><td colspan="2" class="lnk"><a href="b.php?c=PSc" class="su" onclick="return window.confirm ('Voulez-vous vraiment supprimer le panier ?');">Supprimer le panier</a></td></tr>
</table>


Mon objectif est d'externaliser window.confirm.

J'ai essayé cela :

<table class="act">
<tr><td class="lnk"><a href="b.php?c=PVa" class="av">Valider</a></td>
<td class="lnk"><a href="b.php?c=PMd" class="av">Modifier quantit&eacute;</a></td></tr>
<tr><td colspan="2" class="lnk"><a href="b.php?c=PSc" class="su">Supprimer le panier</a></td></tr>
</table>


var su = document.querySelector ('table.act a.su');
su.addEventListener ('click', function ()
{
return window.confirm ('Voulez-vous vraiment supprimer le panier ?');
}
);


L’alerte s'affiche bien avec ses deux choix : Ok et Annuler.
Mais que l'on clique sur Ok ou Annuler le résultat est le même, le panier est supprimé.

J'ai cherché sur Internet et pas compris où est l'erreur.

Pouvez-vous m'aider ?

Merci d'avance.
Modifié par boteha_2 (19 Jul 2020 - 18:58)
Salut,
La fonction window.confirm renvoie un booléen (true si "OK" a été choisi, false dans le cas contraire)

Il faut donc vérifier le choix fait par l'utilisateur, et s'il choisit "Annuler" alors bloquer l'ouverture du lien. Voilà un exemple :


const su = document.querySelector('table.act a.su');
// su.onclick = function (event) {...} est aussi valide
su.onclick = event => {
    if (!window.confirm('Voulez-vous vraiment supprimer le panier ?')) {
        event.preventDefault();
    }
}

// Avec addEventListener, si tu es plus familier avec cette méthode
su.addEventListener('click', event => {
    if (!window.confirm('Voulez-vous vraiment supprimer le panier ?')) {
        event.preventDefault();
    }
});


C'est testé en local est normalement ça marche Smiley smile
Modifié par Wazazaby (19 Jul 2020 - 22:40)
Bonjour,

MERCI de ton suivi.

J'ai testé les deux méthodes en réel.

Elles fonctionnent toutes deux très bien sur Firefox ou Chrome, mais pas sur IE.

J'essaye dans la mesure du possible de produire un code valide pour IE9 (c'est peut-être idiot).

J'ai adapté comme suit et cela semble fonctionner aussi pour IE.

const su = document.querySelector ('table.act a.su');

su.addEventListener('click', function (e)
{
if (! window.confirm ('Voulez-vous vraiment supprimer le panier ?'))
{
e.preventDefault ();
}
}


Comme je suis prudent j'attends un peu avant de cocher Résolu.
Modifié par boteha_2 (19 Jul 2020 - 23:04)
Ça doit être une question de syntaxe pour IE (avec la fonction fléchée) donc comme tu as reformaté ça marchera
Modifié par Wazazaby (20 Jul 2020 - 22:57)
Salut,
Tout à fait. La notation "() => {" ne fonctionne pas comme la notation "function() {". Les fonctions fléchées ne transmettent pas les arguments implicites comme this et ne fonctionnent pas sous IE.
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es

Pour le problème initial, l'annulation d'un événement dépend de la manière dont il a été enregistré. La façon la plus sûre et compatible est d'utiliser preventDefault et stopPropagation. Le return false est utilisé avec jQuery mais pas recommandé en JS standard.
Bonjour,

Merci de toutes ces précisions.

Autrement j'ai un script un peu plus complexe qui fonctionne partout sauf IE.

Avez-vous idée de ce qui ne plait pas à notre cher IE ?

const prom = document.querySelectorAll ('div.prom > a[id]');

if (prom.length > 0)
{
for (let i = 0; i < prom.length; i++)
{
prom[i].addEventListener ('click', function (e)
{
const idImg = prom[i].id.split ('X');
const id = idImg[0];
const height = idImg[1];

const win = window.open ('popup.php?nom='+id+'G.jpg', '', 'scrollbars=yes,resizable=yes,width=420,height='+height);
e.preventDefault ();
}
);
}
}
Bonjour,

Remplacer prom[ i] par this et cela marche sur IE.

const idImg = this.id.split ('X');


Ce qui est bizarre c'est que j'ai gardé prom[ i] à la ligne d'avant.

prom[i].addEventListener ('click', function (e)

Modifié par Felipe (21 Jul 2020 - 22:22)
Déjà, tu pourrais indenter ton code pour qu'il soit plus lisible :

const prom = document.querySelectorAll ('div.prom > a[id]');

if (prom.length > 0)
{
  for (let i = 0; i < prom.length; i++)
  {
    prom[i].addEventListener('click', function (e)
    {
      const idImg = prom[i].id.split ('X');
      const id = idImg[0];
      const height = idImg[1];

      const win = window.open(
        'popup.php?nom='+id+'G.jpg', 
        '', 
        'scrollbars=yes,resizable=yes,width=420,height='+height
      );
      
      e.preventDefault ();
    });
  }
}


Le problème que tu soulèves concerne la notion de bloc et de portée des variables, ainsi que les fonctions callback. Chaque accolade ouvrante déclare un nouveau bloc et l'accolade fermante suivante termine ce bloc. Les variables déclarées à l'intérieur ne peuvent pas être utilisées à l'extérieur. Dans ton cas, tu ne peux pas utiliser id après l'accolade fermante suivante, par exemple.

Ensuite, la fonction addEventListener prend 2 paramètres : une chaîne nommant l'événement à surveiller et une fonction contenant le traitement à exécuter lorsque l'événement survient. Tout ce qui est compris dans le bloc de function (e) est indépendant du reste du code, car l'appel à cette fonction a lieu plus tard, quand tu n'es plus dans la boucle. A ce moment prom[ i ] n'existe plus. C'est pour ça que tu as accès au mot clef this qui est un paramètre implicite de la function anonyme. En réalité cette fonction est interprétée comme ça : function(this, e). this contenant l'élément qui a déclenché l'événement.
Modifié par Ostara (23 Jul 2020 - 18:39)
Bonjour Ostara,

Merci de tes précisions.

Voilà donc le code indenté qui marche sur IE.

const prom = document.querySelectorAll ('div.prom > a[id]');

if (prom.length > 0)
{
  for (let i = 0; i < prom.length; i++)
  {
    prom[i].addEventListener('click', function (e)
    {
      const idImg = this.id.split ('X');
      const id = idImg[0];
      const height = idImg[1];

      const win = window.open(
        'popup.php?nom='+id+'G.jpg', 
        '', 
        'scrollbars=yes,resizable=yes,width=420,height='+height
      );
      
      e.preventDefault ();
    });
  }
}
Bonjour,

Je pensais avoir compris mais je n'arrive pas à gérer window.confirm dans une boucle.

<p>Item 1<a class="ad" href="ad.php">Supprimer</a></p>
<p>Item 2<a class="ad" href="ad.php">Supprimer</a></p>


const adr = document.querySelectorAll ('a.ad');
for (let i = 0; i < adr.length; i++)
{

adr[i].addEventListener('click', function (e)
{
if (! window.confirm ('Voulez-vous vraiment supprimer cette adresse ?'))
{
e.preventDefault ();
}
}
}


Ne marche pas.
Voyez-vous où est l'erreur ?
Modérateur
Bonjour,

Je crois qu'il manque une parenthèse fermante dans ce code.

Le code ci-dessous me semble fonctionner :
var adr = document.querySelectorAll ('a.ad');
for (let i = 0; i < adr.length; i++)
{
	adr[i].addEventListener('click', function (e)
		{
			if (! window.confirm ('Voulez-vous vraiment supprimer cette adresse ?'))
			{
				alert(1);
				e.preventDefault ();
			}
			else
			{
				alert(2);
			}
		},false);
}


Amicalement,
Modifié par parsimonhi (26 Jul 2020 - 18:50)
MERCI.

Tu as raison, il manque une une parenthèse fermante et un point-virgule en prime.

Désolé de vous avoir dérangé, voilà un code qui marche en plus de celui de parsimonhi.

const adr = document.querySelectorAll ('li a.ad');

for (let i = 0; i < adr.length; i++)
{

adr[i].addEventListener('click', function (e)
{
if (! window.confirm ('Voulez-vous vraiment supprimer cette adresse ?'))
{
e.preventDefault ();
}
});
}


Accessoirement dans ce cas je pourrais utiliser le sélecteur getElementsByClassName(), il paraît que c'est plus rapide.
Pour un petit script comme le mien je doute de constater une différence.
Bonjour,

Encore un petit problème sur lequel je rame.

<p><input type="radio" name="moyen" id="Ab1ad" value="CB^6476^2110" />
<label for="Ab1ad"><img src="im/de/CB.gif" alt="" width="42" height="36" /> se termine par 6476, expire fin 10&nbsp;/&nbsp;21</label>
<a href="v.php?h=b1ad1>Supprimer</a></p>


En ciblant le lien <a> j'aimerais récupérer la valeur de l'input.

p est le parent
label et input sont frères.

const carte = document.querySelectorAll ('p > a');

for (let i = 0; i < carte.length; i++)
{

carte[i].addEventListener('click', function (e)
{
if (! window.confirm ('Voulez-vous vraiment supprimer la carte qui se termine par '+this.ParentNode.input.value+' ?'))
{
e.preventDefault ();
}
});
}
Bonjour,

Je me suis aperçu que la variable dont j'ai besoin est aussi présente dans href (qui dans le code html ci-dessus est allégée).

Mon problème est donc résolu.

Cela dit, si quelqu'un sait comment atteindre le grand frère cela reste intéressant.
Salut,
parentNode avec un "p" minuscule. Et puis "input" ne peut pas être ciblé comme ceci. Comme il est premier enfant, this.parentNode.firstChild.value
Bonjour Seven tears,

Je savais bien que l'on ne pouvait pas cibler input comme cela, c'était juste pour montrer ce que je voulais cibler.

Merci de ton code :

this.parentNode.firstChild.value


Très intéressant.
Bonjour,

Désolé de vous déranger encore mais je ne vois pas où est le bug de ce petit code qui coince :

const imax = document.querySelectorAll ('p.cll > img');

for (let i = 0; i < imax.length; i++)
{
imax[i].addEventListener('click', function (e)
{
const tist = this.alt;
const idImg = this.id.split('X');
const id = idImg[0];
const height = idImg[1];

const win = window.open ('popup.php?nom='+id+'G.jpg&tit='+tist+', '', 'scrollbars=yes,resizable=yes,width=420,height='+height);
			
e.preventDefault ();		
}
);
}


je pense que le problème vient de const win car si je me contente d'enlever :
&tit='+tist+
Le pop-up s'ouvre bien.

const win = window.open ('popup.php?nom='+id+'G.jpg', '', 'scrollbars=yes,resizable=yes,width=420,height='+height);


Mais je ne vois pas où est l'erreur de syntaxe dans :

const win = window.open ('popup.php?nom='+id+'G.jpg&tit='+tist+', '', 'scrollbars=yes,resizable=yes,width=420,height='+height);


A moins que ce soit le contenu du alt qui bloque, uen grande chaine avec entités html ?
Bon pardon, j'ai trouvé, il faut enlever +' derrière tist

Donc :

const win = window.open ('popup.php?nom='+id+'G.jpg&tit='+tist, '', 'scrollbars=yes,resizable=yes,width=420,height='+height);


Fonctionne.

Désolé pour le dérangement.
Bonjour,

Autre problème sans doute facile pour les experts.

<tr>
<td><input type="radio" name="super" value="COMTFV006SM-D" id="ACOMTFV006SM-D"  /></td>
<td>6 fibres, OS2 (9 / 125), Str. serr&eacute;e &gt;&gt; <input type="text" size="4" name="unit[COMTFV006SM-D]" id="UCOMTFV006SM-D" /> m</td>
</tr>


J'ai ciblé input type="text" et je dois récupérer l'id de l'input type="radio".

L'objectif est d'externaliser cette phrase magique :

if (this.form.elements['ACOMTFV006SM-D'].checked == false) {this.form.elements['ACOMTFV006SM-D'].checked=true;}



const tex = document.querySelectorAll ('input[text]');

for (let i = 0; i < tex.length; i++)
{	
tex[i].addEventListener('click', function ()
{
/* recréer cet effet */
if (this.form.elements['ACOMTFV006SM-D'].checked == false) {this.form.elements['ACOMTFV006SM-D'].checked=true;}

}
);
}

Modifié par boteha_2 (06 Aug 2020 - 22:15)
Bonjour,

<tr>
<td><input type="radio" name="super" value="COMTFV006SM-D" id="ACOMTFV006SM-D"  /></td>
<td>6 fibres, OS2 (9 / 125), Str. serr&eacute;e &gt;&gt; <input type="text" size="4" name="unit[COMTFV006SM-D]" id="UCOMTFV006SM-D" /> m</td>
</tr>


J'ai essayé cela :

const tex = document.querySelectorAll ('input[type="text"]');

for (let i = 0; i < tex.length; i++)
{	
tex[i].addEventListener('click', function ()
{
const id_radio = this.parentNode.parentNode.children.children.id;
document.getElementById (id_radio).checked=true;
}
);

}


Ne marche pas.

Voyez-vous où est l'erreur ?
Modifié par boteha_2 (09 Aug 2020 - 14:28)
Pages :
Sujet clos
Aller à