2

in my asp.net project I have a panel and on it a jquery tabs div. Initially the panel is hidden and it is shown if I click a button.

This is the very simple code:

<div id="tabs">
        <ul id="none">
            <li><a href="#tabs-1">Asset details</a></li>
            <li><a href="#tabs-2">Structure details</a></li>
            <li><a href="#tabs-4">Audit Info</a></li>
        </ul>

        <div id="tabs-1">Some Content for tab 1</div>
        <div id="tabs-2">Some Content for tab 2</div>
        <div id="tabs-3">Some Content for tab 3</div>
    </div>

And jquery code:

function myfunction() {

$("#tabs").tabs();

}

The problem is that when I show the panel the tabs div is visible but not formatted.

All run correctly if I set a delay on myfunction:

function myfunction() {

//$("#tabs").tabs();

setTimeout(function () {
    $("#tabs").tabs();
}, 500);

}

Is there a way to solve this problem in a more secure way?

Here the missing code:

The button that show my panel on click:

<my:RoundedButton ID="BillingDataButton" runat="server" 
SkinID="Small"
Text="Billing data" 
OnClick="BillingDataButton_Click"

/>

Code behind:

protected void BillingDataButton_Click(object sender, EventArgs e)
    {

        BillingDataPanel.Show();

    }

I've tryed this (thanks Michael):

$(document).ready(function() {
$("#tabs").tabs();

});

But when I click my button and panel is shown the result is:

enter image description here

Update - A possible solution

Added this code in my asp.net page:

<script type="text/javascript">

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function (s, e) {

    myfunction();

});

This ensures that the jquery code for displaying the tab is executed at the end of the request. No setTimeout is requested in this case.

Please inform me if exixt a better solution.

4

1 回答 1

0

这实际上是预期的行为，但有一个更清洁的解决方案：

$(document).ready(function() {
    $("#tabs").tabs();
});

你看，jQuery 不能在 DOM 完全可用之前进行所有修改。这就是为什么延迟对你有用，但这是偶然的。如果它在速度慢得多的浏览器上运行，它肯定会失败。

然而，利用该document.ready事件是社区中更稳定、更受欢迎和接受的解决方案。事实上，就初始化而言，你真的不应该在 jQuery 中在这个方法之外做任何事情。

于 2013-05-20T13:18:54.017 回答