CODEWITHSUNDEEP
javascripthtmljquery
Roberto Van-Tuyl
Roberto Van-Tuyl

Reputation: 17

How can I capture the attribute id from a dynamically generated html?

I am pretty sure this is not so complicated but I have been for hours trying to figure out how to catch the id of this dynamically generated anchor tags.

What I do in my code is that everytime a text input changes, theres an ajax request that goes to a php file and returns me a json array with the prices then I render this results of search in buttons that will be clickable to do other types of request but so far here's where I'm stuck.

heres's the code that loops through the array and renders this buttons (NOTE:The Id of the buttons are variables rendered by the function too.

$.ajax({
       type: "POST",
       url: "php/get_products.php",
       data: {query:prod_qry},
       success: function(data){
       $('#loader_s').hide();
       var jsarray = JSON.parse(data);
       var length = jsarray.length;
           for(i=0;i<jsarray.length;i++){
                        var index1 = i;
                        var index2 = Number(i++) + 1;
                                var index3 = Number(i++) + 2;
                                $('#modal-bod').append('<a onclick="renderProds();" class="btn btn-default-item prod_sel" style="margin-top:10px;" id="'+index3+'" data-dismiss="modal">'+jsarray[index1]+' <span class="pull-right" st>lps. '+jsarray[index2]+'</span></a>');
                            }
                        }

Then here's the function renderProds()

function renderProds(){
                var id = $(this).attr('id');
                alert(id);
           }

the alert is just to try and catch the values for testing purposes, but what really goes there is another Ajax request.

The only thing I get here is that the var Id is undefined...

Upvotes: 1

Views: 691

Answers (3)

farvilain
farvilain

Reputation: 2562

You use jQuery.. so USE jQuery !

Ajax can do the JSON.parse for you with just dataType: "json". The inline onclick is bad practice. Move the success function to make your code more readable.

$.ajax({
   type: "POST",
   url: "php/get_products.php",
   data: {query:prod_qry},
   dataType : 'json',
   success: productsUpdate
});

function renderProds(event){
    var id = $(event.target).attr("id");
    alert("Id is:"+id);
}

function productUpdate(data){
    $('#loader_s').hide();
    for(i=0;i<data.length;i++){
        var link = $('<a>....</a>');
        link.click(renderProds);
        $('#modal-bod').append(link);
    }
}

Now, this is readable. Complete the link creation with your code, without the onclick, remove the inline css and use a real css selector and finally, check this ugly Number(i++)+ .... it looks so bad.

Upvotes: 0

sdespont
sdespont

Reputation: 14025

I would do :

onclick="renderProds(this);"

function renderProds(that){
    var id = that.id;
    alert(id);
}

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You can pass object like

function renderProds(obj) {
    var id = obj.id;
    alert(id);
}

Pass invoker object like

 onclick="renderProds(this);"

Upvotes: 2

Related Questions