页面加载后运行 Javascript

Posted

技术标签:

【中文标题】页面加载后运行 Javascript【英文标题】:Run Javascript After Page Load 【发布时间】:2011-10-08 09:19:36 【问题描述】:

我知道有很多关于此的帖子,但我已经尝试了每一个,但没有一个有效!

我有一个使用 Visual Studio 2010 运行的 aspx 和 aspx.cs 页面。

在我的 aspx 页面上,我有一张桌子

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

在 aspx.cs 页面上,表格已加载数据。这工作正常,没问题。页面加载后,表格中包含我需要的动态添加的数据。

我正在使用 jquery dataTables 使用标准设置我的表格样式

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

当我直接在 html 中创建带有虚拟信息的测试表时,数据表会根据需要正确显示。但是当我将 jquery 脚本应用于动态表时。什么都没发生。动态数据按要求显示,但数据表(搜索功能、样式等)不存在。

现在我怀疑这是因为脚本是在表格填充数据之前运行的。

这是我开始执行任务的地方,即在 aspx.cs 运行并填充表之后强制 jquery/javascript 运行。

但我失败了......所以作为一个测试我想我会运行一个 alert('YAAY');从 c# 端使用注册的启动脚本。但没有用,那是行不通的。

所以有人可以告诉我为什么这不起作用。

我尝试了多种不同的启动脚本方式!

我的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>

而我的 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);


我已经尝试了更多方法来尝试在页面加载后运行 javascript,但他们因失败而感到愤怒。

请有人帮忙!

为什么我的简单 javascript 警报没有运行?

即使我让它们工作...在页面加载后执行 jquery 是否会正确设置数据表的样式???

感谢您的宝贵时间

亚历克斯

附言asp:gridView 或 asp:DataTable 上没有 cmets,因为那 EPICALLY 失败了,我几天前在上面发布了一个问题,没有人回答。如果你想看看 CLICK HERE

【问题讨论】:

什么代码填表?有这样的客户端脚本吗? 这不是在 .NET 中使用 DataTables.net 的方式 填表的代码纯粹是一个sql查询,拉取信息,然后使用HtmlTableRow.innerHTML和HtmlTableCell.innerHTML添加它 如果你得到了你想要的信息,别忘了将答案标记为已接受 【参考方案1】:

改这行代码试试

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

在您编写的 document.read 脚本中

这是因为当页面在浏览器上渲染时,您可以获得表格控件的实际ID

编辑 利用

RegisterStartupScript 因为它会在页面末尾 &lt;/form&gt; 标记之前(&lt;form&gt; 标记结束之前)发出您的 JavaScript。

【讨论】:

感谢您的回复,我永远也想不通!哈哈但是我仍然有脚本没有运行的问题! :(【参考方案2】:

您最可能遇到的问题是您的页面上不存在id="viewPendingTable"

通过在您的表上添加runat="server" 属性,ID 将被更改,以便 ASP.NET 可以在回发时绑定到它。

您需要在 jQuery 中使用表的 ClientID 属性:

viewPendingTable.ClientID

【讨论】:

【参考方案3】:

首先,客户端代码总是在服务器端代码执行后运行。尽管可以在浏览器中呈现 html 之前运行客户端代码。所以这与那个无关。

如果您检查生成的 html,您将看到 asp.net 将生成 id 的 voor 您应用 runat 属性的元素。为了解决这个问题,向表中添加一个类并将你的 js 选择器更改为 $(".classname")。

额外提示:使用像firebug这样的调试器,它可以让你调试你的js代码,这样可以很容易地解决这些问题:)

【讨论】:

以上是关于页面加载后运行 Javascript的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET 页面加载完成后运行 javascript 函数

页面加载后运行 JavaScript(document.ready)[重复]

仅在加载整个页面后运行JavaScript

在页面加载时自动运行javascript代码[重复]

如何在页面加载时调用 JavaScript 函数?

使用 ajax 分页加载页面后重新初始化其他 javascript 函数