Jquery DataTable inside UpdatePanel

Jan 3, 2012 at 2:02 PM

How to use Jquery DataTable inside UpdatePanel in OfficeWebUI???

Jan 3, 2012 at 2:12 PM

 

<!-- CUSTOMIZED SCRIPT SECTION !-->
    <script type="text/javascript" language="javascript" charset="utf-8">
        var $j = jQuery.noConflict();
        $j(document).ready(function() 
	{
            var oTable = $j('.tableGridData').dataTable
		    ({
		    });
        });

    </script>

 

This is my JQUERY which is on my MASTER PAGE.

And C# code on content page where i am calling this jquery is INSIDE the ASP:UPDATEPANEL

 

Now for the very first time everything seems totally fine. But once i trigger any event inside the UpdatePanel. The above JQUERY events are not firing. I have tried doing function PageLoad() instead of $(document).ready(), but it is not working AT ALL :( :(

Can anybody give me some solution.

Apr 2, 2012 at 1:14 PM

Hi sawargaonkaramit, did you find any solution yet as i'm having the same problem?

Aug 26, 2013 at 9:35 AM
Hi!

Is this issue sorted? I am also facing same problem. I think, people who started this project have stopped support as the last update was on March 15 2011.If anyone figured out this issue it will be of great help else I have to scrap the design and start new one. I have maximum 2 days.


Thanks & Regards
Anurag Srivastava
Aug 26, 2013 at 9:53 AM
Hi guys,
Yes I have found the solution which works pretty perfect for the above scenario.

You need to do following:
  1. Remove the DataTable code from Master Page (sorry :( :( but this is what it is)
  2. Put all the DataTable related code inside a function or a .js file (DON't call $j(document).ready(function() directly on page load)
  3. Put the following snippet on your .aspx.cs content page
protected void Page_PreRender(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this, this.GetType(), "_function_dummyname", "<script type='text/javascript'>myFunctionToLoadDataTable();</script>", false);
}
Reason:
If you are loading DataTable directly on document.ready function it gets loaded accurately at FIRST TIME when Page_Load event is getting called. But if you are using Update Panel then there is no chance for DataTable Jquery to get loaded again. That is why you need to call it on PreRender event as it appears after page load event.

I have spent loads of my precious hours to understand it and believe me it is not worth it :( but I hope it helps.

If you find any difficulty feel free to ask :) :)
Aug 26, 2013 at 10:11 AM
Thanks sawargaonkaramit.

Will try it and update you.