Question

I have created an ajax link(CHTML::ajaxLink) in Yii framework(not ajax form submit button) that passes some value to a controller via ajax. There are multiple link which passes different value to the controller. I want to get the id/class attribute of the clicked link before the value is passed to the controller(in “beforeSend” of the jquery.ajax options ). Simply i just want to get the id/class attribute that generated the ajax request. Help!!!

UPDATE::Here’s the code

echo CHtml::ajaxLink ("Click Here",
                              Yii::app()->createUrl('default/del/id/6'), 
                              array(
                                    'beforeSend' => 'function(){
                        //I want to get the id of the link here     
    }',
                                    'complete' => 'function(){
                            }',

                                    'update' => '#loadContent'),

        );
The above code will generate the following a tag:-
<a href="#" id="yt1">Click Here</a>

When the user click the above link, i want to get the id (yt1) in the beforeSend part of the
ajaxLink.

I tried the below code:

 'beforeSend' => 'function(){
 $("a").click(function(){
    var a = $(this).attr("id");
    alert(a); 
 }

The above code works but the id is alerted only when the link is clicked twice. On the third click, the id is alerted twice and keeps on increasing on subsequent clicks. I dont have any clue about this strange problem.

Answer 1

You can use $.proxy(), to change the context of the function to anchor tag from the current ajax object:

'beforeSend' => '$.proxy(function(jqXHR,settings){
        console.log($(this).attr("id"));// or alert($(this).attr("id"))
        // rest of your function
        // you can still use the jqXHR object, and the settings map to manipulate the ajax call
},this)'

Edit:

Let me tell you why the number of alerts is growing on subsequent clicks.

This is happening because each time you click, there is a new click handler getting associated to the <a>, because of this line:

$("a").click(function(){...})

So when you click the first time, the order of function calls is:

beforeSend callback
assign click handler (1)

So there is no alert yet.

Second time:

1st click handler's alert
beforeSend callback
assign click handler (2)

Third time:

1st click handler's alert
2nd click handler's alert
beforeSend callback
assign click handler (3)

And so on as it keeps increasing.

Edit2:

Alternative and better, you can use context option to make the context, the link that was just clicked:

'context'=>'js:this', // right now 'this' is link, so we can pass it
'beforeSend'=>'function(){// i would suggest using the signature 'function(jqXHR,settings)' so that 
    // you can modify the ajax call if you need to

    console.log($(this).attr("id"));// or alert($(this).attr("id"))
    // rest of your function
}'

From jquery’s ajax documentation:

By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax).

Edit3:

Another alternative: Pass the id of link as an additional setting key:

'idOfLink'=>'js:$(this).attr("id")',
'beforeSend'=>'function(){
     // now you can access the id like:
     console.log(this.idOfLink);// or alert(this.idOfLink)
}'