AJAX et les événements

[toshTosh]

Bonjour,

voila, je souhaite dans un formulaire ouvrir une popin quand une personne click sur un bouton radio, j'ai trouvé le plugin popin, mais pour activer la popin il faut une balise <a>, j'ai donc créer une balise dans ma page et fait un $('a').click();
ça marche mais seulement une fois, j'ai trouvé sur le site jquery ceci : http://docs.jquery.com/Frequently_As...JAX_request.3F
C'est un problème qui revient souvent, cependant je n'arrive pas vraiment à comprendre.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$('input[id|="motif_siret"]').live("click", function(){
        var id = $(this).attr("name");
        var url = "popin.php?id="+id;
        $('#popin a').attr("href",url);
        $('#popin a').click();
    });
 
 
    $('#popin a').popin({
        width:600,
        height:200,
        className: "mypopin",
        loaderImg : 'ajax-loader.gif',
        opacity: .6,
        onExit: function(){
 
	}
    });

Code :

1
2
3
4
 
<div id="popin">
    <a href="popin.php"></a>
</div>

Merci d'avance.

[SpaceFrog]

Une chose m'intrigue , attends je te mets les lignes cote à cote ...

Code :

var id = $(this).attr("name")

Code :

<div id="popin">

Y'a rien qui te choque ???

[eckerdecker]

Je réfléchi à son problème depuis un petit moment et en ce qui me concerne je ne vois rien de choquant entre les deux lignes que tu cites SpaceFrog.
Dans

Code :

var id = $(this).attr("name")

$(this) fait référence à l'objet input qui a été cliqué et pas au div#popin

Moi ce qui me choque, d'une part, c'est

Code :

$('input[id|="motif_siret"]')

Je ne connais pas ce sélecteur, je suppose que tu voulais faire un NOT, auquel cas ce serait plutôt

Code :

1
2
3
$('input[id!="motif_siret"]')
//ou
$('input').not('#motif_siret')

D'autre part, dans la ligne

Code :

var id = $(this).attr("name")

tu récupères l'attribut name de ton input type radio, es-tu bien sûr que c'est de cette info dont tu as besoin ? et pas l'attribut value ? (l'utilisation la plus courante des boutons radios consiste à leur donner le même name)

Enfin l'utilisation du 'click' sur un input type radio n'est pas le meilleur choix, 'change' me semble plus approprié.

Mais bon tout ça ne résout pas ton problème, si tu as une adresse à nous donner ça pourrait aider. L'article de la FAQ de jquery que tu indiques explique que la méthode bind() (et tous ses raccourcis) n'ajoute d'écouteurs que sur les noeuds présents dans ton DOM au moment ou tu l'appelles et que si tu veux t'adresser à des noeuds qui apparaîtront plus tard (suite a des appels ajax par exemple) tu dois utiliser la délégation d'évènement : .live() ou .delegate().

J'ai fais un petit jsfiddle et, à ce qu'on sait, ce n'est pas ton cas (http://jsfiddle.net/pSyVC/) si on modifie simplement la valeur du href l'évènement reste bindé sur le lien, aussi je ne vois pour l'instant pas vraiment où est le problème.

Ce que je peux éventuellement te proposer d'essayer serait le code suivant

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
$('input[id!=motif_siret]').live("change", function(){
  var id = $(this).attr("name");
  var url = "popin.php?id="+id;
  $('#popin a').attr("href",url).unbind().popin({
    width:600,
    height:200,
    className: "mypopin",
    loaderImg : 'ajax-loader.gif',
    opacity: .6
  }).click();
});

Pour être allé vérifier, je sais que le plugin popin ajoute un écouteur sur l'évènement 'click' à tous les éléments sur lesquels tu l'as mis. Ici on commence par détruire les écouteurs avant de (re)mettre popin et déclencher un click.

[toshTosh]

Pour répondre
Voici le code html de tête

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="popin">
    <a href="popin.php"></a>
</div>
 
<table>
    <tr>
        <td><input type="radio" id="C-10357" name="10357" value="C"/></td>
        <td><input type="radio" id="F-10357" name="10357" value="F"/></td>
        <td><input type="radio" id="B-10357" name="10357" value="B"/></td>
        <td><input type="radio" id="M-10357" name="10357" value="M"/></td>
        <td><input type="radio" id="S-10357" name="10357" value="S"/></td>
        <td><input type="radio" id="motif-siret-10357" name="10357" value="S"/></td>
    <tr>
    <tr>
        <td><input type="radio" id="C-10358" name="10358" value="C"/></td>
        <td><input type="radio" id="F-10358" name="10358" value="F"/></td>
        <td><input type="radio" id="B-10358" name="10358" value="B"/></td>
        <td><input type="radio" id="M-10358" name="10358" value="M"/></td>
        <td><input type="radio" id="S-10358" name="10358" value="S"/></td>
        <td><input type="radio" id="motif_siret-10358" name="10358" value="S"/></td>
    <tr>
    ...
</table>

c'est un tableau avec pour chaque ligne les 6 boutons radio, l'utilisateur doit en cocher une par ligne pour justifier le faite que la ligne soit dans le tableau.
pour chaque ligne je stocke l'id de l'enregistrement de la base de donnée dans l'attribut name et l'attribut id est le motif de validation suivi de l'id.
C'est pour cela que j'ai

Code :

var id = $(this).attr("name")

Je me fiche de la value du radio avec l'id="motif_siret..." en faite, il a un traitement différent et permet à l'utilisateur de modifier un numéro via une popin qui envoi un formulaire en ajax avant de revenir sur la page.

Pour le selecteur, je l'ai trouvé sur le site jQuery, Attribute Contains Prefix Selector [name|="value"]Il me permet la sélection des balises avec l'attribut qui commence avec le préfixe "value".

Je ne peux pas donner d'adresse comme je le fait dans le cadre d'un stage. Je test la code des lundi matin et on verra bien ^^. merci.

ps : Je débute dans le jQuery et le mécanisme m'échappe encore, et j'ai pas réellement trouvé de tuto ou cours qui explique comment ça se passe avec la manipulation du DOM et les flux d'information, j'ai l'impression de coder a la one again a bis to fly.

[eckerdecker]

Pour le selecteur, je l'ai trouvé sur le site jQuery, Attribute Contains Prefix Selector [name|="value"]Il me permet la sélection des balises avec l'attribut qui commence avec le préfixe "value".

au temps pour moi, j'aurai appris un trucs aujourd'hui ^^

Sinon, dans ton html je vois un motif-siret-10357 et un motif_siret-10358

Est-ce que ta page est mise à jour d'une manière ou d'une autre après ton appel ajax ?

[SpaceFrog]

il me semble que pour le name comme pour l'id il faut éviter le nommage uniquement numérique ou qui commence par du numérique ...

[toshTosh]

J'ai tester ton code eckerdecker, mais il me retourne ça

Code :

$("#popin a").attr("href", url).unbind().popin({width: 600, height: 200, className: "mypopin", loaderImg: "ajax-loader.gif", opacity: 0.6}) is undefined

Sinon voila les pages executer aprés le click sur le bouton radio, c'est un simple formualaire avec un champ texte et deux checbox, quand l'utilisateur valide le jquery recupèere les valeurs et execute avec $post() le fichier new_siret.php qui effectue les changement dans la bdd, je fait un retour si la requete plante avec un alert.

popin.href

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Motif de non-notation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="../../../objets/jquery/jquery.js" type="text/javascript"></script>
<script src="js/siret.js" type="text/javascript"></script>
</head>
 
<body >
<h3>SIREN</h3>
<form action="ajax/new_siret.php" method='post' id='submit'>
	<table>
		<tr>
			<td><label for="alphee">Alphee :</label><input type="checkbox" id="alphee" /></td>
			<td><label for="anadefi">Anadefi :</label><input type="checkbox" id="anadefi"/></td>
		</tr>
			<tr><label for="siret">Siret : </label><input type="text" id="siret"/></tr>
		<input type="hidden" id="id" value="<?php echo $_GET['id']; ?>" />
		<input type="submit" value="valider" />
	</table>
</form>
</body>
</html>

siret.js

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function() {
	$('#submit').submit(function(){
	var url =$(this).attr("action");
	var id = $('#id').val();
	var siret = $('#siret').val();
	var anadefi = $('#anadefi').attr("checked");
	var alphee = $('#alphee').attr("checked");
 
	$.post(url, {id:id,siret:siret,alphee:alphee,anadefi:anadefi}, function(data){
		alert(data.erreur);
	}
	,'json');
		return false;
	});
});

new_siret.php

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
session_start();
include("../../../../objets/connectdb_mysql_anadefi.php");
$user_agence = $_SESSION['id'];
$t = array();
$anadefi = ($_POST['anadefi'] == "checked")? 1:0;
$alphee= ($_POST['alphee']== "checked")? 1:0;
$sql = "UPDATE SAISIES SET `SIRET` = '{$_POST['siret']}', `SIRET_ANADEFI_FAUX` = '$anadefi', `SIRET_SAPHYRE_FAUX` = '$alphee', `USER_AGENCE` = '$user_agence' WHERE ID = {$_POST['id']}";
$t['erreur'] = "$sql";
 if(!mysql_query($sql)){
 	$t['erreur'] = "erreur de la requete $sql";
 }
echo json_encode($t);
?>

[eckerdecker]

J'ai modifié mon jsFiddle (http://jsfiddle.net/pSyVC/2/) pour prendre en compte le fonctionnement de base du plugin popin et en faisant les appels de la même manière que dans le code de ton premier post. Je ne vois aucune raison qui fasse que seule la première popin s'ouvre.

- Vérifie bien tes id "motif_siret", dans le html que tu nous montres on voit un input qui porte l'id '"motif-siret-10357" (avec un tiret au lieu d'un underscore)

- Change ta ligne

Code :

$('input[id|="motif_siret"]')

par

Code :

$('input[id^=motif_siret]')

pourquoi ? je ne sais pas trop, mais je trouve étrange ce sélecteur jQuery : tu es obligé de mettre des guillemets, le préfixe doit être suivi d'un tiret ... avec celui-ci ça a juste besoin de commencer par. Tu peux aussi donner un class à tes input spéciaux et cibler directement par la class.

- Comme suggéré par SpaceFrog, modifie tes attributs name en préfixant les nombres d'au moins une lettre, au pire tu vires cette lettre après dans tes traitements.

Question : pourquoi fais-tu un live sur tes input ?

- Vérifie ta console javascript, n'as tu pas des erreurs qui apparaîtraient avec le chargement de ton formulaire ?

[toshTosh]

J'ai testé avec

Code :

$('input[id^=motif_siret]')

J'ai préfixé les attributs name d'une lettre.
l'id '"motif-siret-10357" était une erreur de frappe dans le post, j'ai pas l'erreur dans ma page.
La fonction live était un test, mais ça change rien que je le mette ou non.
Après j'ai vérifier dans la console web avec firebug, il ne se passe rien d'anormal.

Je vais remplacer le bouton radio avec un vrai lien, comme ça le problème sera réglé.

Merci beaucoup pour l'aide .

[SpaceFrog]

Code :

$('input[id^="motif_siret"]')