简体   繁体   中英

how to get selected tab on form submit in jquery ui tabs

In my MVC application Im using jquery UI tabs (jquery-ui-1.9.0) and setting a tab selected using the script below

<script type="text/javascript">
$(document).ready(function () {
    $( "#tabs" ).tabs({ selected: @Convert.ToInt32(Model.SearchModel.SearchType) })
});

<div id="tabs">
 <ul>
   <li><a href="#articlesearchtab">Article</a></li>
   <li><a href="#othersearchtab">Other</a></li>
 </ul>

<div id="articlesearchtab">
   //content
</div>

<div id="othersearchtab">
   //content
</div>

User can go into either tab and update content. I need to get the content of selected tab on form submit. How can I get know the tab where user has selected?

In jQuery UI 1.9, the selected option is deprecated:

Deprecated selected option; renamed to active

(#7135) The selected option has been renamed to active for consistency with other plugins in jQuery UI. You should replace all uses of the selected option with the active option.

The selected option will be removed in 1.10.

Here is the new way to get the current tab:

Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true. Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.

Code examples:

Initialize the tabs with the active option specified:

 $( ".selector" ).tabs({ active: 1 }); 

Get or set the active option, after initialization:

 // getter var active = $( ".selector" ).tabs( "option", "active" ); // setter $( ".selector" ).tabs( "option", "active", 1 ); 

Simply, Call Same tabs in javascript using Code behind where you submit the form.

<script type="text/javascript" language="javascript">
    function OpenMoreDetails(id) {
        document.getElementById(id).style.display = 'block';
        return false;
    }
</script>

protected void btnAttachDocument_Click(object sender, EventArgs e)
{

    //your code     
    ScriptManager.RegisterStartupScript(this, GetType(), "attach",  "OpenSearchOption('yourtabid',this);", true);
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM