Ajax Links and jquery

Question

Going with the just jquery it joke i was wondering in my website i have a link that says "Add". After clicking it the page refreshes and it says remove. I figure this would be better with ajax and not require the page to reload. How do i do this with jquery (should i do it in jquery?) and how do i know when the server receives the add so i can update my picture (i am sure there is a processing/complete state?)

Answer 1

You should do this with jQuery :)

something like...

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

Throw some ajax in there to do the work.

Answer 2

• Make a function that get's triggered when the link is clicked.
• make an ajax-call to server.
• You can define a callback-method that will be triggered if the ajax-call is successful.
• In the callback-function: change Add to Delete.

In a nutshell :-)

Answer 3

jQuery AJAX functions let you specify success and failure functions.

$("#mylink").click (function () {
  $.ajax({
    type: "POST", // or GET
    url: "/my/address.php",
    data: "someData=someThing&someMore=somethingElse",
    success: function(data){
     $("#someElement").doSomething().
    }
  });
  return false; // stop the browser following the link
};

For more read the jQuery AJAX page - it has loads of examples).

Answer 4

Quick intro to 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");
        });
   });
});

Answer 5

You can do it Jquery,its a great tool for it.

Basically, add a click event handler to your link as given below:

<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>

Answer 6

This would be the needed jQuery function: http://docs.jquery.com/Events/toggle