2009-09-21 12 views
1

Aller avec le juste jquery il blague je me demandais dans mon site Web j'ai un lien qui dit "Ajouter". Après avoir cliqué dessus, la page s'actualise et il dit supprimer. Je pense que ce serait mieux avec ajax et pas besoin de recharger la page. Comment est-ce que je fais ceci avec jquery (devrais-je le faire dans jquery?) Et comment je sais quand le serveur reçoit l'addition ainsi je peux mettre à jour mon image (je suis sûr qu'il y a un traitement/état complet?)Ajax Liens et jquery

Répondre

7

fonctions jQuery AJAX vous permettent de définir les fonctions de réussite et d'échec que vous pouvez utiliser pour mettre à jour votre page.

$("#mylink").click (function (event) { 
    $.ajax({ 
    type: "POST", // or GET 
    url: "/my/address.php", 
    data: "someData=someThing&someMore=somethingElse", 
    success: function(data) { 
     $("#someElement").doSomething(). 
    }, 
    error: function() { 
     // something's gone wrong. 
    } 
    }); 

    event.preventDefault(); // stop the browser following the link 
}); 

Pour plus de lire le jQuery AJAX page - il a beaucoup d'exemples).

0

vous devriez faire ceci avec jQuery :)

quelque chose comme ...

$("#input").click(function(){ 
    if($("#input").val() == "add") { 
     $("#input").val("remove"); 
    } 
}); 

Throw certains ajax là pour faire le travail.

1
  • Créez une fonction qui est déclenchée lorsque vous cliquez sur le lien.
  • effectuer un appel ajax au serveur.
  • Vous pouvez définir une méthode de rappel qui sera déclenchée si l'appel ajax est réussi.
  • Dans la fonction de rappel: modifiez Ajouter à Supprimer.

En un mot :-)

0

Introduction rapide à jquery.

HTML:

<a href="#" id="mylink"><img src="add.jpg"/></a> 

Javascript:

$(function() { 
    //Everything inside here is called on page-load 

    // This selects the link element by its id and add an onclick handler 
    $("#mylink").click(function() { 
     post_url = (The url to post to the server); 
     $.post(url, function() { 
      // This is called when the AJAX finishes successfully. 

      // Select the image element and modify the src attribute 
      $("#mylink img").attrib("src", "remove.jpg"); 
     }); 
    }); 
}); 
1

Vous pouvez le faire Jquery, son un excellent outil pour cela.

Fondamentalement, ajoutez un gestionnaire d'événements, cliquez sur votre lien comme indiqué ci-dessous:

 
<a href="/url" id="add-button"> Add </a> 

<script> 

function callback(response) { 
    // remove add button here and add the "remove " button 
} 

$('#add-button').click(function() { 
    $.get(this.href, data, callback); 
    //or 
    $.post(this.href, data, callback); 
} 

</script>