Run Javascript After Page Load

Question

I understand there are MANY posts on this, but I have tried every single one and none of them work!

I have an aspx and aspx.cs page being run 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. This works fine, No Problem. Once the page is loaded, the table contains the dynamically added data I require.

I am using jquery dataTables to style my table using the standard

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

When I create a test table with dummy information directly into the html, the data table displays correctly as required. But when I apply The jquery script to the dynamic table. Nothing happens. The dynamic data is displayed as required, but the data table (search functions, style etc) are not present.

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

This is where I began my mission to force the jquery/javascript to run AFTER the aspx.cs has run and the table has been populated.

But I failed... So just as a test I thought I'd run an alert('YAAY'); from the c# side using registered start up scripts. but to no Avail that wouldnt work.

So can somebody PLEASE tell me why this isn't working.

I've tried Multiple Different ways of startup scripts!

My aspx is:

<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 is:

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 have tried more methods for trying to run javascript after page load but they were lost in the anger of failing so badly.

Somebody PLEASE HELP!

Why aren't my simple javascript alerts running?

Even if I got them to work... would the data table be correctly styled by executing the jquery after page Load???

Thankyou Kindly for your time

Alex

p.s. No comments on asp:gridView or asp:DataTable as That Failed EPICALLY and i posted a question on it days ago and nobody has replied. If you care to take a look CLICK HERE

Answer 1

Change this line of code and try

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

in you document.read script that you have written

Its because you can get acutal ID of the table control when the page get render on the browser

Edit Make use of

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

Answer 2

The most likely issue you're facing is that id="viewPendingTable" doesn't exist on your page.

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

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

viewPendingTable.ClientID