I am working on asp mvc application.
I am generating charts depending upon data from data base.
When i click on go button i have call getReportData() function that fetches result from db and set chart images.
When i call first time my function works fine but for secound time only grid data is displayed, i mean function that generate image is not call for second time, I have tried to debug it but only first time i am getting debugging point not second time.
function getReportData() {
// debugger;
//Enable wait Icon & disable others
$('#span_bar_bg').css('display','none');
$('#span_bar_wait').css('display','block');
$('#span_bar_result').css('display','none');
$('#span_pie_bg').css('display','none');
$('#span_pie_wait').css('display','block');
$('#span_pie_result').css('display','none');
var report='ProductNameBatch';
var subreport='Non-FaceBook';
if( report.toLowerCase()=='ctss' )
{
alert('Report is temporarily Un-available');
return;
}
if (parent.top.$("input#from_date").val() == "" || parent.top.$("input#to_date").val() == "") {
alert("Invalid Date Range !!!");
return;
}
$("#span_grid_bg").css('display','none');
$("#span_grid_view").css('display', 'block');
// "sScrollX": "100%",
// "sScrollXInner": "101%",
// "bScrollCollapse": true,
$('#grid_view').dataTable({
"bAutoWidth": true,
"bServerSide": false,
"sAjaxSource": "fetchGridReport?&from_date=" + parent.top.$("input#from_date").val() + "&to_date=" + parent.top.$("input#to_date").val() + "&report="+report+"&subreport="+subreport,
"bProcessing": true,
"bRetrieve": false,
"bDestroy": true,
"iDisplayLength": 17,
"aoColumns": columnList
});
$('#grid_view').dataTable().fnAdjustColumnSizing();
//Request for reports
debugger;
$('#span_bar_result img[alt="Report by Country-Language"]').attr('src','/fetchChartReport?chartType=Bar&from_date=' + parent.top.$("input#from_date").val() + '&to_date=' +parent.top.$("input#to_date").val() + '&report='+report+'&subreport='+subreport+'&reporttitle=Report by Country-Language&displayformat=2&filterParamList=no');
$('#span_pie_result img[alt="Report by Country-Language"]').attr('src','/fetchChartReport?chartType=Pie&from_date=' + parent.top.$("input#from_date").val() + '&to_date=' + parent.top.$("input#to_date").val() + '&report='+report+'&subreport='+subreport+'&reporttitle=Report by Country-Language&displayformat=2&filterParamList=no');
debugger;
$('#span_bar_result img[alt="Report by Response"]').attr('src','/fetchChartReport?chartType=Bar&from_date=' + parent.top.$("input#from_date").val() + '&to_date=' +parent.top.$("input#to_date").val() + '&report='+report+'&subreport='+subreport+'&reporttitle=Report by Response&displayformat=2&filterParamList=no');
$('#span_pie_result img[alt="Report by Response"]').attr('src','/fetchChartReport?chartType=Pie&from_date=' + parent.top.$("input#from_date").val() + '&to_date=' + parent.top.$("input#to_date").val() + '&report='+report+'&subreport='+subreport+'&reporttitle=Report by Response&displayformat=2&filterParamList=no');
debugger;
$('#span_bar_result img[alt="Report by Resolved vs UnResolved"]').attr('src','/fetchChartReport?chartType=Bar&from_date=' + parent.top.$("input#from_date").val() + '&to_date=' +parent.top.$("input#to_date").val() + '&report='+report+'&subreport='+subreport+'&reporttitle=Report by Resolved vs UnResolved&displayformat=2&filterParamList=no');
$('#span_pie_result img[alt="Report by Resolved vs UnResolved"]').attr('src','/fetchChartReport?chartType=Pie&from_date=' + parent.top.$("input#from_date").val() + '&to_date=' + parent.top.$("input#to_date").val() + '&report='+report+'&subreport='+subreport+'&reporttitle=Report by Resolved vs UnResolved&displayformat=2&filterParamList=no');
debugger;
$('#span_bar_result img[alt="Turk Spend by Country($)"]').attr('src','/fetchChartReport?chartType=Bar&from_date=' + parent.top.$("input#from_date").val() + '&to_date=' +parent.top.$("input#to_date").val() + '&report='+report+'&subreport='+subreport+'&reporttitle=Turk Spend by Country($)&displayformat=2&filterParamList=no');
$('#span_pie_result img[alt="Turk Spend by Country($)"]').attr('src','/fetchChartReport?chartType=Pie&from_date=' + parent.top.$("input#from_date").val() + '&to_date=' + parent.top.$("input#to_date").val() + '&report='+report+'&subreport='+subreport+'&reporttitle=Turk Spend by Country($)&displayformat=2&filterParamList=no');
//register call back functionality invoked when result image response complete
$('img[id^="img_barchart_result"]').bind('load',function(){
onLoadComplete('bar');
});
$('img[id^="img_piechart_result"]').bind('load',function(){
onLoadComplete('pie');
});
}
Here is my Control Function
public FileResult fetchChartReport(SeriesChartType chartType, string from_date, string to_date, string report, string subreport,string reporttitle,string displayformat, string filterParamList)
{
try
{
Chart chart = new Chart();
string repportlistid = "chart-" + report.ToLower() + "-" + subreport.ToLower();
//List<string> reportNameList= GetParameterListById(repportlistid);
//return View();
reportObject = getReportInstance(report);
chart = reportObject.getChartReport(chartType, from_date, to_date, report.ToLower(), subreport.ToLower(), reporttitle,displayformat, filterParamList);
MemoryStream ms = new MemoryStream();
chart.SaveImage(ms);
return File(ms.GetBuffer(), @"image/png");
}
catch (Exception ex)
{
return File(Server.MapPath(Url.Content("~/Content/dashboard/images/dash_no_data.jpg")), "image/jpg");
}
}
Thanks in advance
Paven,
This is due to the DOM changing when you initiate the img click, therefore your bind eventhandler gets blown away. Try using the jquery .on() event handler instead:
http://api.jquery.com/on/
this works in similar ways to the old jquery .live() event in that the event handlers are retained even when the DOM is refreshed until you issue an .off() request, or navigate away from the page.