[AJAX] Récupérer un lien href et afficher le contenu dans une div

Version imprimable

bonjour j ai un probleme avec ajax:

je veux récupérer mon lien href et afficher le contenu de la page dans div:

par exemple j ai une table qui contient mes données et mes liens:

Code:

1
2
3
4
5
6
7
8
9
 
  <tr>
                   <td>{news_title}</td>
                   <td>{news_body}</td>
                   <td>{news_date}</td>  
                   <td><a  href="index.php?module=deletenews&action=deletenews&news_ref={news_ref}"  
                  onclick="javascript:if (!confirm('Voulez vous supprimer l'utilisateur  Confirmez ?')) return false;">Supprimer</a></td>
                   <td> <a  href="index.php?module=updatenewsform&action=updatenewsform&news_ref={news_ref}"   id="lien" onclick="load_updatenew('views/updatenews.html'); ">Modifier</a></td>
             </tr>

et ma fonction javascript

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
26
 
<script>  
      function load_updatenew(url) {
	    $(document).ready(function(){
        $("#lien").click(function(){
    	 page=($(this).attr("href"));
     jQuery.ajax({
      url:page,
      dataType: "html",
      success: function(data, textStatus, rawRequest) {
                      jQuery("#centre").html(data);
      },
 
      error: function(rawRequest, textStatus, errorThrow) {
 
          //jQuery(element).html("Impossible de charger les d�tails de la page...");
 
              jQuery("#centre").html("Erreur de chargement...");
 
 
      }
       });
     });
	 });
 }
 </script>

mon probleme se pose au niveau de la fonction javascript . quand je déclare l'url dans javascript et non dans href ça me retourne rien et si je la déclare au niveau de href ça me retourne mes données mais pas dans le contenu centre:

ma question est comment je vais faire pour récupérer le lien href sans la déclare au niveau de javascript
merci d avance

Bonjour,
tout d'abord la structure de la fonction function load_updatenew(url) { est pour le moins surprenante avec un $(document).ready(function() inside!!!

Pourquoi ne pas faire simplement
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $(document).ready(function () { $("#lien").click(function () { page = ($(this).attr("href")); jQuery.ajax({ url: page, dataType: "html", success: function (data, textStatus, rawRequest) { jQuery("#centre").html(data); }, error: function (rawRequest, textStatus, errorThrow) { jQuery("#centre").html("Erreur de chargement..."); } }); }); });
et ne rien mettre sur le onclick de ton lien

Code:

<a href="index.php?module=updatenewsform&action=updatenewsform&news_ref={news_ref}" id="lien">Modifier</a>

par contre il te faut stopper le comportement par défaut du lien en insérant en début de l'affectation de la fonction sur le click un event.preventDefault(), au final ta fonction pourrait ressembler à
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $(document).ready(function (){ $("#lien").click(function(event) { event.preventDefault() page = ($(this).attr("href")); jQuery.ajax({ url: page, dataType: "html", success: function (data, textStatus, rawRequest) { jQuery("#centre").html(data); }, error: function (rawRequest, textStatus, errorThrow) { jQuery("#centre").html("Erreur de chargement..."); } }); }); });

27/06/2012, 11h46
diengkals

merci bien

bizarre j affiche un tableau de données avec les liens modifier la première ligne marche bien c est à dire ça me retourne vers le contenu centre et les autres lignes me retourne vers les nouvelles lignes
avez vous une aidez ça cloche merci d avance
code javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script>  
 
  $(document).ready(function (){
	  $("#liennews").click(function(event) {
	   event.preventDefault();
	    page = ($(this).attr("href"));
	    jQuery.ajax({
	      url: page,
	      dataType: "html",
	      success: function (data, textStatus, rawRequest) {
	        jQuery("#centre").html(data);
	      },
	      error: function (rawRequest, textStatus, errorThrow) {
	        jQuery("#centre").html("Erreur de chargement...");
	      }
	    });
	  });
	});
 </script>

mon tableau hml

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
26
27
28
29
 
 <table >
               <caption>GESTION  DES NEWS</caption>
               <thead> 
            <tr>
			       <th>Titre</th>
			       <th>Body</th>
			         <th>Date</th>
			       <th>Supprimer</th>
			       <th>Modifier</th>
		     </tr>
		     </thead>
		       <!-- BEGIN new --> 
		     <tbody>
 
             <tr>
 
                   <td >{news_title}</td>
                   <td >{news_body}</td>
                   <td >{news_date}</td>  
                   <td  ><a  href="index.php?module=deletenews&action=deletenews&news_ref={news_ref}"  
                  onclick="javascript:if (!confirm('Voulez vous supprimer l'utilisateur  Confirmez ?')) return false;">Supprimer</a></td>
                   <td > <a  id="liennews" href="index.php?module=updatenewsform&action=updatenewsform&news_ref={news_ref}"  >Modifier</a></td>
 
             </tr>
 
             <tbody>
                <!-- END new --> 
           </table>

merci d 'avance

Problème résolu.

J'ai mis ceci :
Code:

1 2 $(" td #liennews").click(function(event)
Au lieu de :
Code:

1 2 $("#liennews").click(function(event)