构建jQuery选项卡的更好方法
构建jQuery选项卡的更好方法
提问于 2010-07-14 01:55:11
我正在使用ASP.NET MVC2 web应用程序中的jQuery UI选项卡。应用程序的一部分要求我在离开选项卡时执行错误检查。我是通过包含选项卡的aspx文件中的此脚本来完成此操作的。
<script type="text/javascript">
$(function () {
$("#tabs").tabs({
cache: true,
select: function (event, ui) {
var $tabs = $('#tabs').tabs();
switch ($tabs.tabs('option', 'selected')) {
case 0:
$.post("User/Personal", $("#PersonalForm").serialize(), function (data, success) {
if (success) {
$("#PersonalForm").html(data);
}
});
break;
case 1:
$.post("User/Account", $("#AccountForm").serialize(), function (data, success) {
if (success) {
$("#AccountForm").html(data);
}
});
break;
default:
break;
}
return true;
},
ajaxOptions: {
error: function (xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab. We will fix this as soon as possible.");
}
}
});
});
</script>还有一些额外的switch语句(为简洁起见删除了)。基本上，这段代码允许通过数据注释在选项卡上进行MVC验证-工作得非常好。无论如何，我想知道是否可以根据我的文档中的任何选项卡“生成”这段代码。(如果不是这样，我基本上必须在switch语句中手动编写case语句，这似乎是一种浪费。)
另外，作为附注，我对每个选项卡使用ASP控件来保存各种数据(这也是各个窗体所在的位置)。这可能会对解决方案产生影响。
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-07-15 00:35:22
当用户离开选项卡时，此代码将遍历您离开的选项卡上的每个表单，并发送一个ajax请求，就像您的代码中一样。不同之处在于，它会根据表单的action属性确定将其发送到何处，而不必在switch语句中指定此属性。这意味着PersonalForm的操作属性必须是User/Personal，依此类推。
select: function(e, ui) {
var tab_index = $('#tabs').tabs('option', 'selected');
var panel_id = $("ul li a:eq(" + tab_index + ")", this).attr("href");
var panel = $(panel_id); //the content of the tab
//For each form in the panel, submit it via AJAX and update its html according to the answer
$(panel).find("form").each(function() {
var that = this;
$.post( $(this).attr("action"), $(this).serialize(), function(data, success) {
if (success) {
$(that).html(data);
}
});
});
}当然，如果页面上的表单不超过一个，则可以跳过each；如果只有某些表单应该以这种方式提交，则可以向这些表单添加一个类来过滤选择
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3239983
复制相关文章
相似问题
腾讯云开发者
