jQuery ui.index is always undefined
I have a problem when i try to remember the last clicked tab in jQuery. I want to use ui.index in the javascript code, but i开发者_如何学编程 found it always get undefined.
Here is my code:
$('#tabs').bind('tabsselect', function(event, ui) {
var newIndex = ui.index;
$("#<%=hiddenSelectedTab.ClientID%>").val(newIndex);
});
Does anyone know how to solve it? Thanks
Edit:
Here is my html code:
<div id="tabs">
<ul>
<li><a href="#link1">
link1</a></li>
<li><a href="#link2">
link2</a></li>
<li><a href="#link3">
link3</a></li>
</ul>
<div id="link1"></div>
<div id="link2"></div>
<div id="link3"></div>
</div>
I use a hiddenField to remember the tab i choosed.
<input type="hidden" id="hiddenSelectedTab" runat="server" value="0" />
My javascript code modified:
$(document).ready(function() {
$("#tabs").tabs().tabs('select', parseInt($("#<%=hiddenSelectedTab.ClientID%>").val()));
var $tabs = $("#tabs").tabs();
var selected = $tabs.tabs("option", "selected");
$("#<%=hiddenSelectedTab.ClientID%>").val(selected);
});
This line always return 0.
var selected = $tabs.tabs("option", "selected");
I'm really confused. :(
if you want to remember last selected tab after browser close you should use cookie. if you want to remember selected tab without browser closing this COMPLETE code working for me:(if you want to use hidden input)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.8.7.custom.css"/>
</head>
<div id="tabs">
<ul>
<li><a href="#link1">
link1</a></li>
<li><a href="#link2">
link2</a></li>
<li><a href="#link3">
link3</a></li>
</ul>
<div id="link1"></div>
<div id="link2"></div>
<div id="link3"></div>
</div>
<input type="hidden" id="hiddenSelectedTab" value="2" />
<script language="javascript">
$(document).ready(function() {
alert($("#hiddenSelectedTab").val());
$("#tabs").tabs().tabs({
selected:parseInt($("#hiddenSelectedTab").val()),
select: function(event, ui) {
alert(ui.index);
$("#hiddenSelectedTab").val(ui.index);
alert($("#hiddenSelectedTab").val());
}
});
});
</script>
after browser "alert 2" after select 1th tabs "alert 0" two times
use cookie . check this link
function is like:
$(function() {
$( "#tabs" ).tabs({
cookie: {
// store cookie for a day, without, it would be a session cookie
expires: 1
}
});
})
$("#tabs").tabs().tabs('select',$("#hiddenSelectedTab").val());
var $tabs = $("#tabs").tabs();
var selected = $tabs.tabs("option", "selected");
$("#<%=hiddenSelectedTab.ClientID%>").val("selected");
I got a problem with
parseInt($("#<%=hiddenSelectedTab.ClientID%>").val())
and replace with
$("#hiddenSelectedTab").val()
and it works!
加载中,请稍侯......
精彩评论