CODEWITHSUNDEEP
phpajaxjqueryyii
Neeraj Dangol
Neeraj Dangol

Reputation: 223

Get the id of the ajaxLink button before submission

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.

Upvotes: 0

Views: 1788

Answers (3)

bool.dev
bool.dev

Reputation: 17478

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)
}'

Upvotes: 3

user745235
user745235

Reputation:

If you are using jQuery you can do this to get the element attribute: $("#element_id").attr("id") or if you're using HTML5, you can use the data tag on your link, like:

<a href="bla.php" data-name="your_data_here">Link</a>

And also using jQuery you do this: $("#element_id").data("name")

Upvotes: 1

Ashkan Aryan
Ashkan Aryan

Reputation: 3534

You may need to elaborate more / post code fragments so that we can have a better idea about your problem. But from what you explain here, I assume that you want whatever processing your Ajax request to know which link originated it. Assuming the asynchronous processing is done somewhere else (outside your browser), it wouldn't have access to your DOM. Therefore, you need to embed the id as an argument in your ajax request. In other words, pass the id of element sending the request as part of the request.

Upvotes: 0

Related Questions