Discussion :

[jojo51]

Bonjour, j'ai travaillé un long moment sur ce problème avant de poser ma question, seulement je galère.
J'utilise la fonction Dialog de Jquery UI sur plusieurs resultat.
Je charge en ajax un paramètre sur chaque element.
Mon problème est que lors du click, le parametre envoyé est toujours le meme puisqu' il y a plusieurs fois la même class $(".dialog-link") sur la page.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function() {
	$( "#dialog" ).dialog({
		autoOpen: false,
		width: 400,
		 buttons: {
			Ok: function() {
				$( this ).dialog( "close" );
			}
		}
	});
	$( ".dialog-link" ).click(function( event ) {
		$( "#dialog" ).dialog( "open" );
		event.preventDefault();
	});
});
$(function() {	
	$(".dialog-link").click(function () {	
		$('#dialog').load($(this).attr('ajax'));
	});
});

Si j essais de faire ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function() {
	$( "#dialog" ).dialog({
		autoOpen: false,
		width: 400,
		 buttons: {
			Ok: function() {
				$( this ).dialog( "close" );
                                $('#dialog').load($(this).attr('ajax'));  //Ici le parametre prend toujours la meme valeur => Le dernier affiché sur la page,( pour l'exemple il affiche 3)
			},
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
		}
	});
	$( ".dialog-link" ).click(function( event ) {
		$( "#dialog" ).dialog( "open" );
		event.preventDefault();
	});
});

Code html :

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

1
2
3
<a href="javascipt void()" ajax="3"  class="dialog-link" >Click</a>
<a href="javascipt void()" ajax="2"  class="dialog-link" >Click</a>
<a href="javascipt void()" ajax="1"  class="dialog-link" >Click</a>

En gros je veux pouvoir lire l'element sur lequel je clique et envoyer ma requete sur le click 'OK' du dialog.
Pour l'instant il ne sert que d avertisseur, je voudrais qu'il server à la confirmation.
Merci pour votre aide.

[Lorenzo77]

si tu veux recup le lien cliqué, faut utiliser la propriété de l'évenement:
e.target

ce qui permet d'éviter de mettre un écouteur sur chaque lien mais plutot sur le niveau supérieur

Code :

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

1
2
3
4
5
 
// le DIV contient tes A
$('DIV').on('click', function(e){
    console.log(e.target);
});

si tu veux un évenement sur chaque lien alors utilise $(this)

[jojo51]

Code :

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

1
2
3
4
$( ".dialog-link" ).click(function( event ) {
	$( "#dialog" ).dialog( "open" );
	event.preventDefault();
});

Cette fonction écoute deja l’événement, mais elle ne se lance pas sur le click ok de la fenêtre dialog mais sur le 1er click.
Dans les options de dialog il y a la possibilité de lancer une instruction sur le click ok mais ca nécessite un sélecteur qui ne soit pas une class.
C'est un probleme qui est lié à l'utilisation de jquery.

Code :

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

1
2
3
4
5
buttons: {
	Ok: function() {
		$( this ).dialog( "close" );
	}
}

En tout cas merci pour ton aide, ça m a permis de comprendre un peu plus comment fonctionne le javascript.

[danielhagnoul]

Bonsoir

Si j'ai bien compris (Lorenzo77 à raison de suggérer l'utilisation de event.target ) :

Code :

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

1
2
3
4
5
6
7
$( ".dialog-link" ).on( "click", function( event ){
    event.preventDefault();
 
    $( "#dialog" ).load( $( event.target ).attr( 'ajax' ), function(){
	$( "#dialog" ).dialog( "open" );
    });
});

[jojo51]

Je viens d'essyaer seulement l ecouteur click ecoute le 1 er click qui ouvre la boite de dialog, mais le click du bouton ok.
En tout cas ta solution fonctionne, mais sur le premier click Peut etre que je passe a coté de quelquechose.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function() {
	$( "#dialog" ).dialog({
		autoOpen: false,
		width: 400,
		 buttons: {
			Ok: function() {
				$( this ).dialog( "close" );
			}
		}
	});
 
	$( ".dialog-link" ).on( "click", function( event ){ 
		event.preventDefault(); 
 
	$( "#dialog" ).load( $( event(click'ok').target ).attr( 'ajax' ), function(){   // ici j ai changé j ai mis click ok mais bon c'est pas comme ca que ca marche
	$( "#dialog" ).dialog( "open" );
    });
});