Run Javascript after loading page

Question

I understand that there are many posts on this, but I tried each of them and none of them work!

I have an aspx and aspx.cs page launched using visual studio 2010.

on my aspx page I have a table

<table id="viewPendingTable" runat="server"></table> 

On the aspx.cs page, the table is loaded with data. It works great, no problem. After loading the page, the table contains dynamically added data that I need.

I use jquery dataTables to style my table with standard

 $(document).ready(function () { $('#viewPendingTable').dataTable({ "bJQueryUI": true, }); }); 

When I create a test table with dummy information directly in html, the data table is displayed correctly as needed. But when I apply jquery script to a dynamic table. Nothing has happened. Dynamic data is displayed as needed, but the data table (search functions, style, etc.) is missing.

Now I suspect this is because the scripts are run before the table is filled with data.

This is where I started my mission to get jquery / javascript to run AFTER aspx.cs started and the table was full.

But I failed ... So, as a test, I thought I ran a warning ("YAAY"); from C # using registered startup scripts. but without use that won't work.

So can someone PLEASE tell me why this is not working.

I tried several different ways to run scripts!

My aspx:

 <table id="viewPendingTable" runat="server"></table> <script type="text/javascript" language="javascript" id="ShowTable"> <!-- loadTable(); function loadTable() { $(document).ready(function () { $('#viewPendingTable').dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers" }); }); alert('ALEX'); document.getElementById("table_id").width = "100%"; } //--> </script> 

And my aspx.cs:

 protected void Page_Load(object sender, EventArgs e) { loadMyTable(); ClientScriptManager a = null; a.RegisterStartupScript(GetType(), "anotherkey", "alert('ASDFASDFASDF');", true); a.RegisterStartupScript(GetType(), "anfgsdgsderkey", "alert('MOTHER');", false); a.RegisterStartupScript(this.GetType(), "AKey", "loadTable();", true); ClientScript.RegisterStartupScript(GetType(), "MyScript", "<script language=javascript>" + "alert('Hello ASP.NET'); }</script>"); ScriptManager.RegisterStartupScript(this.Page, GetType(), "script", "alert('Success!');", true); Page.ClientScript.RegisterClientScriptBlock(GetType(), "script", "alert('AAA');", true); Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "script", "alert('a');" + "$(document).ready(function (){" + "$('#viewPendingTable').dataTable({" + "\"bJQueryUI\": true" + "\"sPaginationType\": \"full_numbers\"" + "});" + "}); alert('b'); document.getElementById('viewPendingTable').width = 100%", true); } 

I tried more methods to run javascript after the page loaded, but they were lost in the anger of the unsuccessful so badly.

Someone PLEASE HELP!

Why aren't my simple javascript warnings triggered?

Even if I make them work ... will the data table be properly formatted by running jquery after the Download page

Thank you for your time.

Alex

ps There are no comments on asp: gridView or asp: DataTable, since this happened EPICALLY, and I posted a question about this a few days ago, and no one answered. If you want a look CLICK HERE

Answer 1

Change this line of code and try

 "$('# " + viewPendingTable.ClientID + "').dataTable({" + 

in the document.read script document you wrote

This is because you can get the acutal ID of the table control when the page is displayed in the browser

Edit Use

RegisterStartupScript because it emits your JavaScript at the end of the page just before the </form> (until the end of the <form> ).

Answer 2

The most likely problem you are facing is that id="viewPendingTable" does not exist on your page.

By adding the runat="server" attribute to the table, the identifier will be changed so that ASP.NET can bind it to the postback.

You need to use the ClientID property of the table in your jQuery:

 viewPendingTable.ClientID 

Answer 3

First of all, the client code ALWAYS runs after the server-side code is executed. Although client-side code can be run before html is displayed in your browser. So this has nothing to do with it.

If you check the generated html, you will see that asp.net will generate an identifier for the element to which you apply the runat attribute. To solve this problem, add the class to the table and change the js selector to $ (". Classname").

Extra tip: use a debugger like firebug, which allows you to debug your js code, which makes it easier to solve such problems :)