Discussion :

[spy74]

Bonjour,
J’ai un petit souci à cause du ciblage d’id avec le Protocol ajax.
(J’utilise la libraire jquery 1.3.2)
Mon but : faire apparaitre le contenu d’une page avec des liens (de manière asynchrone « ajax ») et et que ces même liens puisse être utilisé aussi.
Voila dans mon fichier index.php
Code JS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="template/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function()
 {
  $("#ajout").click(function () {
	$("#boite_g").load("manager/import.php");});//chagement du menu choix
  <!--fonction d'ajout du texte-->
  $("#ajout_texte").click(function () {
     alert("plop!");
	});
}); 
//-->
</script>

Code HTML

Code :

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

1
2
3
4
<a href="#ajout_modul" id="ajout" class="button"><span class="add">Ajout d'un module</span></a>
<div id="boite_g">
</div>
<a href="#" id="ajout_texte" class="button"><span class="new_texte">Nouveaux texte</span></a>

Voila le fichier import.php
Code HTML

Code :

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

1
2
3
4
5
6
7
8
<table border="0" cellspacing="1" cellpadding="0">
  <tr>
    <td width="100px"><a href="#" id="ajout_texte" class="button"><span class="new_texte">Nouveaux texte</span></a></td>
    <td width="100px"><a href="#" class="button"><span class="new_tableau">Nouveaux tableau</span></a></td>
    <td width="100px"><a href="#" class="button"><span class="new_gi">Nouvelle Gestion d'image</span></a>
</td>
  </tr>
</table>

Mon problème c’est que le message « plop » produit par l’alerte (« plop ») ne fonctionne pas dans les lien charger de manière asynchrone mais marche avec le lien déjà charger.
Je voudrais bien savoir si c’est possible que les lien charger de manière asynchrone puisse interagiravec le code js déjà établie sur la page et si oui comment faire .
Merci d’avance pour votre aide
Cordialement
vincent

[Bovino]

Salut,

Sujet maintes fois traité


Et un petit lien vers la FAQ

[spy74]

Merci de ta réponse
Dls d’avoir posé une question inutile^^ et minentes fois traité ^^ mais cependant je ne vois pas bien comment faire et dans la recherche je n’est rien trouver (en se qui concerne une adaptation a jquery).
J’ai fait ceci mais ça ne marche pas je ne dois pas bien m'y prendre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--
$(document).ready(function()
 {
  $("#ajout").click(function () {
	$("#boite_g").load("manager/choix.php");});//chagement du menu choix
  <!--fonction d'ajout du texte-->
    xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		document.getElementById('ajout_texte').innerHTML = xhr.responseText;
		afterAjax();}}
	$("#ajout_texte").click(function () {
	 alert("plop!");
	});
});

[spy74]

petit up voila le code :
je ne voix pas trop comment déclarer la fonction afterAjax();

voila ce que j'ai tenté mais sans conviction .... d'ailleurs ça ne marche pas ^^

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$(document).ready(function()
 {
  $("#ajout").click(function () {
	$("#boite_g").load("manager/choix.php");});//chagement du menu choix
  <!--fonction d'ajout du texte-->
	$("#ajout_texte").click(function () {
	 alert("plop!");
	 afterAjax();
	});
});

Si quelqu'un à une idée

[bigben89]

Le problème, c'est que $('#ajout_texte').click( ... ) n'affecte que les éléments existants, et pas aux éléments créés par la suite (via ton load).
Je vois 2 solutions :
- soit tu réaffectes les évènements après le chargement de choix.php

Code :

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

1
2
3
4
5
6
$('#boite_g').load('manager/choix.php', function(){
    // code exécuté une fois le chargement effectué
    $('#ajout_texte').click(function(){
        alert('plop');
    });
})

- soit mieux, utiliser la fonction live, dispo depuis jQuery 1.3, qui affecte les éléments existants ET ceux créés après.

Code :

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

1
2
3
$('#ajout_texte').live('click', function(){
    alert('plop');
})

[nabab]

Si ta fonction doit etre lancée apres l'exécution de ta requete Ajax, il te faut la mettre en "callback" de ta requete:

Code :

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

1
2
3
4
5
6
7
8
9
 
$(document).ready(function(){
  $("#ajout").click(function () {
    $("#boite_g").load("manager/choix.php","",function () {
      alert("plop!");
      afterAjax();
    });
  });
});

[spy74]

merci beaucoup pour vaux réponses ça marche nikel

et hop résolu