CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
SHK
SHK

Reputation: 1

How to pass a object in js funcion as a function parameter?

I have a jquery foreach appended list in a table. what I want is to pass the full object that I am getting from an ajax success function.but when I try to pass the Object as a parameter to a different JS function, the parameter gets undefined.

this is my appended table:

$.ajax({

  type: "post",
  url: "@Url.Content("~/Estimate/GetOffsetLetterHeadCost
  ")",
  data: $('#OffLetterHeadForm').serialize(),
  datatype: "json",
  traditional: true,
  success: function(data) {

    var Json = data;

    $.each(Json, function(index, obj) {


      var row = '<tr>' + '<td style="padding:10px" > <b style="font-size:18px">' + obj.VendorName + '</b>  </td>  ' + '<td><label  id="machineId' + index + '">' + obj.MachineName + '  < / label > < /td > ' + '<td> <input type="button"   value="Order" id="btn' + index + '"onclick = "SaveOffsetOrder(obj)" / > < /td></tr > ';

      $("#AllVendorsList").append(row);

    });

  }
});


function SaveOffsetOrder(obj) { // here i am getting obj undefined
  // do something with obj
}
<table id="AllVendorsList" class="table table-striped table-hover  " style="font-size:14px; font-family:'Trebuchet MS'"></table>

please help..Thanks

Upvotes: 0

Views: 81

Answers (3)

audrynyonata
audrynyonata

Reputation: 83

it's easy to mess up variable and string/text within quotation, so colors will help a lot. make sure all variable 'pop out' more.

if still doesn't work, switch all single quotes to double, and replace all double quotes in position of single quote. or, discard and just use selector later in script rather than using onclick property

EDITED (added escape characters in function parameter \' )

<html>
<body>
    The content of the body element is displayed in your browser.
<script>
    var obj = "hello world";
    var row = '<tr>\
        <td style="padding:10px" >\
            <b style="font-size:18px">'+obj+'</b>\
        </td>\
        <td>\
            <label id="machineId'+obj+'">'+obj+'</label>\
        </td>\
        <td>\
            <input type="button" value="Order" id="btn'+obj+'" onclick = "SaveOffsetOrder(\'' + obj +' \')"/>\
       </td>\
    </tr>';

    document.body.innerHTML = row;
    function SaveOffsetOrder(obj){
        alert(obj);
    }
</script>
</body>
</html>

----before (only works for integers?)-----

var row = '<tr>\
    <td style="padding:10px" >\
        <b style="font-size:18px">'+obj.VendorName+'</b>\
    </td>\ 
    <td>\
        <label id="machineId'+index+'">'+obj.MachineName+'</label>\
    </td>\ 
    <td>\
        <input type="button" value="Order" id="btn'+index+'" onclick = "SaveOffsetOrder(' + obj + ')"/>\
    </td>\
</tr>';

Upvotes: 0

Ullas Hunka
Ullas Hunka

Reputation: 2211

Instead of using onclick use bind which will make life pretty much easier. E.g.

'<td> <input type="button"   value="Order" id="btn' + index + '" 
      / > < /td></tr > '
$("#AllVendorsList").append(row);
$("#btn" + index).bind("click",{obj:obj},SaveOffsetOrder);

function SaveOffsetOrder(e){
 console.log(e.data.obj);//this will return your object.
}

Upvotes: 2

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You need to specify onclick as onclick='SaveOffsetOrder( + JSON.stringify(obj) + )' notice that single quote before SaveOffsetOrder and JSON.stringify(obj) which will create onclick function as SaveOffsetOrder({"name":"test"}) which is correct.

var obj = {name: 'test'};
var html = `<input type="button"   value="Order" id="btn' + index + '" 
                  onclick='SaveOffsetOrder(` + JSON.stringify(obj) + `)' />`;
document.getElementById('content').innerHTML = html;

function SaveOffsetOrder(obj){
  console.log(obj);
}
<div id='content'></div>

Upvotes: 2

Related Questions