Discussion :

[Lexarino]

Bonjour à tous,

Je découvre Jquery depuis peu et je ne saisis pas totalement la logique.
Notamment sur la façon dont il peut interpréter l'import de nouveaux éléments dans le DOM, par la requête ajax.

J'essaie de rendre une mini messagerie plus fluide et j'y introduis donc Jquery pour ajouter des messages ou les modifier sans rechargement de page.

Voilà le scénario :
Lorsque je souhaite modifier un message, je passe par une requête ajax en jquery qui va aller chercher le message concerné en base de données et le retourner dans un textarea avec un bouton (image) pour validation. Ces nouveaux éléments prennent place dans la page par l'attribut html() de la fonction ajax de Jquery.
Jusqu'ici no problemo. (cf photo).



Mon problème :
Comment faire pour que la fonction "clik" de ce nouveau "bouton modifier" de soumission du textarea, importé dans le DOM, puisse soumettre le contenu tapé dans le textarea lui aussi fraichement importé dans le DOM.
D'après mon constat Jquery ne gère que le DOM lors du chargement de la page ? (je débute hein !).

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
 
	$('img#bt_modifier').click(function() {
		var parentId = $(this).closest("tr").attr("id");
		var modMessage = $(this).closest("textarea").val();
		// appel ajax :
		$.ajax({
			url: 'modules/mailbox3.php',
			type: 'post',
			data: 'id=' + parentId + '&message=' + modMessage + '&cmd=enrgModifier',
			dataType: 'html',
			success: function(code_html, statut){
				$('tr#'+parentId+' td.max').html(code_html);
			},
		});
	}

En gros si j'ai bien compris, ceci ne marche pas car "img#bt_modifier" n'est pas connu de Jquery car importé après chargement :

Autrefois je passais par des requête Ajax en javascript basic qui faisaient le job sans difficulté avec onClik, onBlur par le biais de fonctions...
Mais je pense que Jquery a une autre approche, plus simple et plus rapide...

Dites moi si je fais fausse route et par la même occasion si vous avez des références de bouquins pour appréhender Jquery façon débutant je suis preneur.

Merci !

[danielhagnoul]

Bonsoir

Différences entre on() avec 1 ou 2 sélecteurs

[Lexarino]

Bonjour danielhagnoul et merci de m'avoir mis sur la piste du on().
Je me suis paluclhé la doc et... j'ai changé d'approche : je place l'évènement non plus sur le bouton (click) mais sur le fait de quitter le textarea (blur) ce qui du coup à le mérite de faciliter la récupération de son contenu alors connu de Jquery...

Code :

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

1
2
3
4
5
 
	$('table tbody tr').on('blur', 'textarea', function() {
		var modMessage = $(this).val();
		... on lance l'ajax pour modifier l'entrée en base de données.
	});

... mais j'ai pas l'esprit tranquille, je pense que je suis passé à côté de ton histoire de double sélecteur ?
Et ça me tarabiscote !! Mon bouton est juste là pour faire joli, pour que pas perturber l'usager !

[danielhagnoul]

Je ne connais pas votre HTML, donc je donne un exemple.

Si la table (statique) a l'ID "maTable" et le bouton al'ID "btnModifier" (code dynamique), alors : $( "#maTable" ).on( "click", "#btnModifier", function( event ){ console.log( event.target, this ); });.

Si le tag table n'est pas statique, on peut se raccrocher au "body" : $( "body" ).on( "click", "#btnModifier", function( event ){ console.log( event.target, this ); });