JQuery вкладки на начальной скрытой панели asp.net

Question

в моем проекте asp.net У меня есть панель и на ней вкладка jquery tabs. Изначально панель скрыта, и она отображается, если я нажму кнопку.

Это очень простой код:

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

И JQuery код:

function myfunction() { 

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

}

Проблема заключается в том, что, когда я показываю панель язычки ДИВ видна, но не отформатирована.

Все правильно работать, если я установить задержку MyFunction:

function myfunction() { 

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

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

}

Есть ли способ решить эту проблему в более безопасным способом?

Здесь недостающий код:

Кнопка, которая показывает свою панель по щелчку: за

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

/>

Код:

protected void BillingDataButton_Click(object sender, EventArgs e) 
    { 

     BillingDataPanel.Show(); 

    } 

Я судимое это (спасибо Майкл):

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

});

Но когда я нажимаю мою кнопку и панель отображается результат является:

Обновление - одно из возможных решений

добавили этот код в моей странице asp.net:

<script type="text/javascript"> 

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

    myfunction(); 

}); 

Это гарантирует, что код jquery для отображения вкладки будет выполнен в конце запроса. В этом случае запрос setTimeout не запрашивается.

Пожалуйста, сообщите мне, если exixt лучшее решение.

Answer 1

Это ожидаемое поведение на самом деле, но есть чистое решение:

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

Вы видите, Jquery не может сделать все изменения до того, как DOM полностью доступен. Вот почему задержка работает для вас, но это случайность. Если бы это было запущено в гораздо более медленном браузере, это бы потерпело неудачу.

Однако мероприятие document.ready является гораздо более стабильным, предпочтительным и приемлемым решением среди сообщества. На самом деле, вы действительно не должны делать что-нибудь в jQuery вне этого метода до инициализация.