CODEWITHSUNDEEP
javascriptjqueryhtml
Lohith Korupolu
Lohith Korupolu

Reputation: 1074

alert the value of an HTML tag generated from javascript using - jquery "attr"

I have a function which is generating a <tr>, and for each of this table, there is an Update Button along with the database values retrieved as JSON. This tr is appended to a table using $("#RawMatTable").html(RawMat); This automatically generated table is first viewed for new entries with the help of input tags in each td and can later be updated with the help of Update button - the code is as follows -

function GetRawMaterial() {

     var id = $('#UsrSelectedBprNo').val();
          $.ajax({
              type: "POST",
              url: "http://XXXXXXXXXX:XXXX/XXXXX.svc/XXXXX/" + id,
              data: "{}",
              contentType: "application/json",
              dataType:"json", 
              success:  function (msg) {                    
                   var RawMat = '';                               
                   $.each(msg, function(i,v){
                   RawMat += "<tr><td>" + "" + "</td><td>" + v.RM_Name + "</td><td id='sapCode"+i+"'>" + v.RM_SAP_Code + "</td><td>" + v.Unit+ "</td><td>" + v.Std_Qty + "</td><td>" + v.Allowable_Range + "</td><td>" + "<input type='text' id='actqty"+i+"'/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<button id="+i+">Update</button>" + "</td></tr>";                       

                   $("#RawMatTable").html(RawMat);

                   $('button').click(function() {                               
                   var attrValue = $(this).attr('id'); 

                   alert (attrValue);
                   });                                         
                   });

Once this is done.. i.e. the rows are generated, the values from within these tags should be used for my next function as inputs. These values are acting as my keys for my SQL query. For e.g. the value of "v.RM_SAP_Code" acts as a reference and following is my next function

  function UpdateRawMaterial() {
             $.ajax({
                 type: "PUT",
                 url: "http://XXXX.XXX.XXX/DRLServiceHost/BPRService.svc/UpdateRawMat/ " + BPRNo + "/" + SAP_Code + "/" + Act_Qty + "/" + In_House_Batch + "/" + Equip_Id + "/" + RM_Remark,
                 data: "{}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (result, txtstatus) {
                     alert(txtstatus);
                    },
                 error: function (result) {
                     alert("jQuery Error:" + result.statusText);
                 }
             });
         };

My question here is how do I read the value of my dynamically generated HTML tags, on a button Click - which is in the same row? More clearly, A row's "Update" button click should give the value of an HTML tag within the same row.

I am only able to get the id value of the clicked button so far, and unable to get an idea of how to read the other values.

Kindly let me know if this needs to be elaborated more....

Upvotes: 1

Views: 1043

Answers (2)

noj
noj

Reputation: 6759

Once inside the button click handler use the jQuery DOM Traversal methods to access the other elements in that row. For efficiency you should just set the html once at the end and you can use on() to register just one handler rather than one for each button.

var RawMat = '';

$.each(msg, function(i,v)
{
    RawMat += "<tr><td>" + "" + "</td><td>" + v.RM_Name + "</td><td id='sapCode"+i+"'>" + v.RM_SAP_Code + "</td><td>" + v.Unit+ "</td><td>" + v.Std_Qty + "</td><td>" + v.Allowable_Range + "</td><td>" + "<input type='text' id='actqty"+i+"'/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<button id="+i+">Update</button>" + "</td></tr>";
});

var $html = $(RawMat);

$html.on('click', 'button', function()
{
    // cache jquery object
    var $this = $(this);

    // alert id
    alert($this.attr('id'));

    // get the tr parent
    var $tr = $this.closest('tr');

    // alert 'RM_Name'
    $tr.find('td:nth-child(2)').text();
});

$("#RawMatTable").html($html);

Upvotes: 0

ThoKra
ThoKra

Reputation: 3029

You can try to work from something like this:

// Listen to click events on the button
$("button").click(function(e) {
    // Find the input field by first finding the parenting tr, then find the input
    var input = $(this).parents("tr").find("input[type='text']");
    alert(input.val());
});

In the callback function, this refers to the button, and you can find the parent tr by using .parents('tr'). After you have found the parent tr, you can find the input field.

(This requires a certain structure of the HTML, so if you do major refactoring, the code might not work)

Take a look at this JSFiddle to see it in action.

Upvotes: 1

Related Questions