Problems in Binding To Dynamic Table

Question

I worked on this sample for 3 days strucked at last step!! Please some one help me!!

Any Help is appreciable!!

I am loading a dynamic table, i want to attach a grid on a column. I created a function for binding jqgrid. So when ever i am binding a table i am calling this function with a parameter,

The problem here is if i give the parameter directly it is working , but if i want to load it automatically it is not working.

I will explain below with code:

  function bindData() {

  $.ajax({
    type: "POST",
    url: location.pathname + "/getData",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    datatype: "jsondata",
    async: "true",
    success: function (response) {
        var msg = eval('(' + response.d + ')');
        if ($('#tblResult').length != 0) // remove table if it exists
        { $("#tblResult").remove(); }
        var table = "<table class='tblResult' id=tblResult><thead> <tr><th>Name</th><th>SurName</th><th>Email</><th>Mobile</th><th>Address</th><th>Actions</th><th>image</th><th>Country</th><th>State</th><th>Gender</th><th>Add.Mobile</th></thead><tbody>";

        for (var i = 0; i <= (msg.length - 1); i++) {
            var row = "<tr>";
            row += '<td>' + msg[i].Name + '</td>';
            row += '<td>' + msg[i].SurName + '</td>';
            row += '<td>' + msg[i].Email + '</td>';
            row += '<td>' + msg[i].Mobile + '</td>';
            row += '<td>' + msg[i].Address + '</td>';
            row += '<td><img id="im" src="/User_Registration1/images/edit.png" title="Edit record." onclick="bindRecordToEdit(' + msg[i].EmployeeId + ')" />  <img src="/User_Registration1/images/delete.png" onclick="deleteRecord(' + msg[i].EmployeeId + ')" title="Delete record." /></td>';
            row += '<td><img class="img" src=' + msg[i].FileName + ' alt="--NO IMAGE--"/></td>';
            row += '<td>' + msg[i].Country + '</td>';
            row += '<td>' + msg[i].StateName + '</td>';
            row += '<td>' + msg[i].Gender + '</td>';
            row += '<td style="width:250px;height:120px;"><table id="tblSub' + msg[i].Name + '"></table><script> $(document).ready(function () { BindGrid("AjjiAjji");});</script></td>';
            row += '</tr>';
            table += row;
        }
        table += '</tbody></table>';
        $('#divData').html(table);
        $("#divData").slideDown("slow");

    },
    error: function (response) {
        alert(response.status + ' ' + response.statusText);
    }
});

}

see the last column in which i am attaching a grid view by calling a javascript function.

js function:

       function BindGrid(user) {
       $(document).ready(function () {

        $("#tblSub"+user).jqGrid({
            loadError: function (xhr, status, error) {

                alert('load:' + error);
            },
            url: 'Fetch.aspx?filter=' + user + '',

            data: "{}",
            datatype: 'json',
            colNames: ['Name', 'Mobile'],
            colModel: [
            {
                name: 'User',
                index: 'User',
                width: 100,
                align: "left",
                editable: true,
                size: 80
            },
            {
          .
          .
          .

So if i pass the BindGrid("AjjiAjji") it is working fine, But i want to load the grid automatically like BindGrid('+msg[i].Name+') , It is Showing Error "ReferenceError: AjjiAjji is not defined"

Answer 1

I think you are forgetting to add double quotes and the result whould be BindGrid (AjjAjj). try this:

BindGrid("'+msg[i].Name+'")

this should work fine

Answer 2

I think that problem is that the time you are attaching jqGrid to "$("#tblSub"+user)" is not present in DOM. You should call BindGrid function only after $('#divData').html(table); which is adding table into DOM.

So that jqGrid can properly work.