小编Boi*_*idy的帖子
在Jquery UI 1.9选项卡中替换'url'方法
我正在开发一个Web应用程序,并且正在使用JQuery UI选项卡取得很大进展,特别是动态更新绑定到每个选项卡的ajax请求的目标URL的"url"方法.我在这里创建了一个简化示例:
2个选项卡(功能1和功能2)中的每一个都根据传递给测试的参数显示某些测试的结果.测试始终保持不变,但我通过操纵绑定到选项卡的URL来更改函数中使用的变量.更新在延迟加载Tab上调用的url的'url'方法允许我这样做,但它现在已被弃用,并且很快就不会受到支持.所以我一直在使用JQuery UI 1.9中的'beforeLoad'事件来寻找一种方法.
建议是可以操作ui.ajaxSettings来设置数据参数,但是有一个错误(http://bugs.jqueryui.com/ticket/8673),看起来这不会被修复.建议的解决方法是操纵ui.ajaxSettings.url.
我的工作示例如下,但我不确定这是否是最清洁/最合适的方式来实现我所追求的目标,并且任何建议都会受到欢迎.我很难找到如何做到这一点的例子,所以希望它会帮助处于类似情况的其他人.
<title> Jquery Tabs AJAX Test</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.css">
</head>
<body >
<script type=text/javascript>
$(document).ready(function() {
$( '#tabs' ).tabs({ });
$('button.set_variable').click(function() {
var variable = $(this).val();
$( '#tabs' ).tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.url += "&variable=" + variable ;
}
});
var selected_tab = $('#tabs').tabs('option', 'selected');
$( '#tabs' ).tabs("load", selected_tab);
});
})
</script>
<button class="set_variable" value="1">Variable = 1</button>
<button class="set_variable" value="2">Variable = 2</button> …推荐指数
解决办法
查看次数
在.when()中使用deffered对象时,如何使用.when().then()来触发函数？
我有一个页面,其中我有一个可变数量的AJAX调用,这些调用是在一个公共事件上触发的.AJAX调用本身是更新SQL数据库中的相关字段.完成所有调用后,我想刷新页面,以便它现在反映刚刚进行的更改.
我在这里使用了以下问题/答案到目前为止... jQuery当每个完成时,触发函数
到目前为止,这是我的代码:
var team_update = function(e) {
var $items = $('.sortable-items');
var XHRs = [];
$items.each(function(){
var team_id = $( this ).attr("id");
var data = {
tid: team_id,
users: $('#' + team_id).sortable('toArray')
};
XHRs.push(
$.ajax({
type: "POST",
url: "update.php",
data: data,
complete: function(data){
}
})
);
});
$.when(XHRs).then(function(){
console.log('Refreshing Screen');
$('#content-wrapper').load( 'index.php' );
});
}
我期待发生的事情是$('#content-wrapper').load( 'index.php' );,一旦我的所有ajax()请求完成,就会触发.然而,似乎正在发生的事情是,一旦所有请求都已发送,回调就会触发,不一定在它们完成之后,因此有时我的页面更新仍然有"旧"数据.
下图显示了我在顶部的初始页面加载,可以忽略.显示该问题的接下来的4个条目.有3个POST请求是我的3个ajax调用来更新数据库,最后的GET是页面刷新.在发送了所有3个ajax调用之后,页面刷新GET将触发,但它不会等待最后一个ajax调用在它触发之前完成.因此,它会在前一个ajac调用完成更新数据库之前完成旧数据.
我在这做错了什么？
推荐指数
解决办法
查看次数
event.preventDefault()导致:悬停伪类以坚持
我正在尝试实现一个文档导航,类似于Bootstrap站点上的文档导航.我已经完成了它的工作,但它有一个方面是困扰我.
就像在Bootstrap上一样,我使用的是affix.js和scrollSpy.js的组合,这是有效的.请参阅以下 JSFiddle.
$('#doc_nav').on( "click", "a", function( e ){
// e.preventDefault();
var target = this.hash;
var $target = $(target);
var offset = $target.offset().top;
console.log(offset);
offset = offset - 100;
console.log(offset);
$('html, body').scrollTop( offset );
});
e.preventDefault()被注释掉后,导航菜单的行为就像预期的那样.向下滚动窗口会导致显示的div在菜单上突出显示.单击菜单列表中的项目,直接将您带到页面上的相应div,然后当您从页面上的该部分滚动时,菜单会相应更新.
在我的"真实"页面上,我有一个高度为100px的固定标题.所以目前,当我点击菜单链接时,页面会跳转到所需的部分,并将其放在页面顶部,标题会略微遮盖它.除非我使用e.preventDefault(),否则上面代码的scrollTop部分似乎不起作用.如果您在小提琴中取消注释该行并再次运行它,请单击菜单上的"标题3"链接,您将看到它现在将页面中的标题3内容从顶部偏移100px.完善.
但是,现在向上滚动页面向上.您将看到"标题3"列表项仍处于其:悬停状态,即使鼠标不在其附近也是如此.就像e.preventDefault()阻止浏览器检测到鼠标不再悬停在该项上一样.
鼠标右键单击浏览器窗口外的任何位置,可以解决问题.
任何人都可以解释我在这里做错了什么吗？如何防止锚定点击的默认行为,以便我可以控制页面滚动放置,而不会在过程中停止正确的CSS绘制？
问题出现是因为我使用e.preventDefault()阻止浏览器默认行为,因为我想控制滚动到锚定元素.
我在Firefox和IE10中测试了这个.
推荐指数
解决办法
查看次数