user6628729 user6628729 - 2 months ago 5
jQuery Question

Select cell value from table

I have multiple records in table .. Scenario when I click on row then chart is display according to ID now I want to specify that which owner have this data so for this I try to display owner name ..

I have data in a table:

ID Owner RegNo
26626 John B82
26634 David BE49
26642 Roh A5
26640 Julie B5


I tried this:

<script type="text/javascript">

$(function () {
$('#tabledata').on('click', 'tr', function () {
var row = $(this);
var Id = row.find('td')[0].firstChild.data;
var cell = row.find('td')[1].firstChild.data;
var obj = {};
var cellvalue = {};
obj.ID = Id;
cellvalue.cell = cell;
GetData(obj);
return false;
});
});
function GetData(obj) {
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetVo",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
if (result !== null && result.length == 0) {
$("#cont").hide();
return;
}
strArray = result.d;
var myarray = eval(strArray);
$("#cont").show();
$('#cont').highcharts({
chart: {
borderColor: 'Grey',
borderWidth: 2,
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}

},

title: {
text: JSON.stringify(cellvalue)
},

position: {
align: 'right',
verticalAlign: 'bottom',
x: 10,
y: -10
},
subtitle: {
text: 'Chart'
//text: 'Total: ' + myarray.length
},


plotOptions: {
pie: {
innerSize: 100,
depth: 45,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}',
},
showInLegend: true
}
},
series: [{
name: 'Delivered amount',
data: myarray
}]
});

//end
},
error: function (error) {
alert(error);
}

});
}

// });


</script>


when I check f12 this shows the error


WebForm1.aspx:109 Uncaught ReferenceError: cellvalue is not defined

Answer

Modify You function calling and function definition:

<script type="text/javascript">

    $(function () {
        $('#tabledata').on('click', 'tr', function () {
            var row = $(this);
            var Id = row.find('td')[0].firstChild.data;
            var cell = row.find('td')[1].firstChild.data;
            var obj = {};
            var cellvalue = {};
            obj.ID = Id;
            cellvalue.cell = cell;
            GetData(obj, cellvalue); //HERE
            return false;
        });
    });
function GetData(obj, cellvalue) { //AND HERE
    $.ajax({
        type: "POST",
        url: "WebForm1.aspx/GetVo",
        data: JSON.stringify(obj),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        cache: false,
        success: function (result) {
                   if (result !== null && result.length == 0) {
                $("#cont").hide();
                return;
            }
            strArray = result.d;
            var myarray = eval(strArray);
            $("#cont").show();
            $('#cont').highcharts({
                chart: {
                    borderColor: 'Grey',
                    borderWidth: 2,
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45
                    }

                },

                title: {
                    text: JSON.stringify(cellvalue)
                },

                position: {
                        align: 'right',
                        verticalAlign: 'bottom',
                        x: 10,
                        y: -10
                  },
                subtitle: {
                    text: 'Chart'
                    //text: 'Total: ' + myarray.length
                },


                plotOptions: {
                    pie: {
                        innerSize: 100,
                        depth: 45,
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.y}',
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    name: 'Delivered amount',
                    data: myarray
                }]
            });

            //end
        },
        error: function (error) {
            alert(error);
        }

    });
        }

    //  });


  </script>
Comments