CODEWITHSUNDEEP
javascriptjqueryhtmljsonajax
JC Borlagdan
JC Borlagdan

Reputation: 3618

Get id of the <a> tag from one function to another

I am very new in javascript/jQuery so please bear with me if my question will be too easy for you and too difficult for me.
This is from a function, I just don't post the complete codes since it will be too long.

And I have another function which also have an ajax and I want to pass get the ID of the <a> tag:

function someName() {
  jQuery.ajax({
    type: 'POST',
    url: 'thisisprivate.aspx',
    data: {
      action: 'MyAction',
      word: 'Wednesday',
      count: '4',
      page: '1'
    },
    success: function(data) {
      var json = jQuery.parseJSON(data);
      var htmlInfo = '';
      for (i = 0; i < json.length; i++) {
        var htmlCode = '<a href="#/app/video?id=' + json[i].bcid + json[i].name + '" class="list" id="' + json[i].bcid + '"></a>';
        htmlInfo = htmlInfo + htmlCode;
      }

      jQuery('#WMVideoxx').html(htmlInfo);
    }
  });
}

and

function VideoDiv() {
  jQuery.ajax({
    type: 'POST',
    url: 'thisisprivate.aspx',
    data: {
      action: 'actionNameHere',
      idorname: id //I Want to pass the ID here
    });
}

Upvotes: 0

Views: 97

Answers (3)

Manjeet Barnala
Manjeet Barnala

Reputation: 2995

use onclick="function();" with your anchor and pass arguments that you want in your function

Your htmlcode should be like this

<a href="#/app/video?id=' + json[i].bcid + json[i].name + '" class="list" id="' + json[i].bcid + '" onclick="VideoDiv('+json[i].bcid+');"></a>

Your VideoDiv function 

function VideoDiv(id) 
{
   //your ajax goes here
}

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

What you are doing is:

jQuery('a').click(function() {
    VideoDiv(jQuery(this).attr('id'));
});

This will not work because of the nature of <a> tag being dynamically generated and the event doesn't get registered. Consider delegating the event (see Understanding Event Delegation for more information):

jQuery(document).on("click", 'a', function() {
    VideoDiv(jQuery(this).attr('id'));
});

The above code works, but will delegate for all the <a> inside the document. Instead, add a class or something that uniquely identifies that. And call it this way:

jQuery(document).on("click", 'a.class', function() {
    VideoDiv(jQuery(this).attr('id'));
});

Another thing about the above delegation of code is, it is better to use a closest static parent instead of document. Since I don't know the HTML structure, I have used document. :)

Also, as Ismael Miguel says, it is better to get the id using this.id:

jQuery(".static-parent").on("click", '.class', function () {
    VideoDiv(this.id);
});

The above would be the best code.

Also, it has been pointed out again, for better performance, you may replace the code with:

setTimeout(
  (function () {
    VideoDiv(this.id);
  }).bind(this), 10
);

This will let jQuery handle the next even handler, and will execute this code on the next 10ms (when available).

Upvotes: 2

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : you can put onclick call to a tag while creating it and pass this object which is nothing but the a tag element, see below code

 var htmlCode = '<a href="#/app/video?id='+json[i].bcid+json[i].name+'" class="list" id="'+ json[i].bcid +'" onclick="VideoDiv(this)"></a>';

Now make following changes in your javascript function

function VideoDiv(anchor)
{
    jQuery.ajax({
            type: 'POST',
            url: 'thisisprivate.aspx',
            data: {
                action: 'actionNameHere',
                idorname: anchor.id //pass id here from anchor object
            }
        });
}

NOTE: your data attribute in above ajax call is incomplete, please correct it.

Upvotes: 1

Related Questions