Question

I am working with AJAX with prototype and PHP. It is working for me but I need some small changes. Following is my running code for AJAX request:

JS/Prototype:

function ajaxRequest(url) {

    new Ajax.Request( url, {

          method: 'get',
          onSuccess: function( transport ) {

            // get json response
            var json = transport.responseText.evalJSON( true );
            alert(json);
        },     
        onFailure: function() {             
            alert('Error with AJAX request.'); 
        }  
    });

    return false;
}

HTML:

<a href='javascript:ajaxRequest("/testajax/ajaxresponse");'>Testing AJAX</a>

Question:

Now I want to change my link like this:

<a href='/testajax/ajaxresponse' class='AjaxLink'>Testing AJAX</a>

So prototype function should capture click event of class='AjaxLink' links and then get href part of clicked link and proceed. How can I change my above prototype function for such kind of links.

Thanks

Answer 1

This wont work. Why do you want such a link? If a link is specified in this way any click on it will follow its href and change location of actual document. Only way to prevent such a behavior then is by adding onclick again or in $(document).ready bind onclick handler, and manualy cancel the event.

UPDATE
However to bind onclick event on all links with AjaxLink class,execute request and cancel the event:

$(document).ready(function(){
   $('.AjaxLink').click(
      function(e){
        ajaxRequest(this.href);
        event.preventDefault ? event.preventDefault() : event.returnValue = false;
      }
   ); 
});