IFrame : Page is post back or refreshing on iframe src

Question

I am new to asp.net. I am calling Iframe src throw table row javscripct click event. (ie onclick="return loadPhaseWiseChart("DGSET00025");")

My code:-

<tr height="25" id="row3" onclick="return loadPhaseWiseChart("DGSET00025");" bgColor="#e1f2fe">
<td>
<tr>

JQuery Code:-

function loadPhaseWiseChart(Asset_Discription) {
            document.getElementById('IframeChart1').src = "PhaseOneChart.aspx?assetdiscription=" + Asset_Discription;
        }

When I click on row, my page is getting post back or refreshing. I want to avoid the page refreshing or post back on row click event. How I can do this. Any help will be appreciated.

Answer 1

Your onClick should look like this:

<tr height="25" id="row3" onclick="loadPhaseWiseChart('DGSET00025');" bgColor="#e1f2fe">

Note the dropping of the return, and the use of different quote types for the inner string and the outer attribute (in JavaScript these types are interchangeable, but they must at least match. Actually with jQuery you shouldn't be adding an onClick like this at all, instead use data attributes like this:

<tr height="25" id="row3" data-chart="DGSET00025" bgColor="#e1f2fe">

and bind your function to the click event like this:

$('#row3').on('click', loadPhaseWiseChart);

This will change your 'loadPhaseWiseChart' to this:

function loadPhaseWiseChart() {
  document.getElementById('IframeChart1').src = "PhaseOneChart.aspx?assetdiscription=" + $(this).data('chart');
}

Finally just to be sure you don't get trapped by this, the ID of an HTML element is altered by ASP.net with you add a 'runat="server"', so if your iframe has the ID of 'IframeChart1' and that 'runat' attribute then ASP will turn it into something like 'iframe_01_h1'. You can get this value with some ASP code like this:

document.getElementById('<%= IframeChart1.ClientID %>')