Ajax 在按钮提交上更改链接的类名
Posted
技术标签:
【中文标题】Ajax 在按钮提交上更改链接的类名【英文标题】:Ajax Change class name of a link upon button submit 【发布时间】:2014-01-07 17:22:08 【问题描述】:我有四个菜单选项卡。其中一个选项卡是提交表单(默认),第二个选项卡包含条目列表,每个条目都有一个名为更改状态的按钮。当我单击“更改状态”时,我使用 ajax 调用 windows.reload 来更新页面而不刷新,但选项卡将返回到默认选项卡,即第一个选项卡。现在我的问题是如何将 menutab 类更新为当前选定的菜单以成为活动菜单。下面是我的ajax代码:
<input type="button" value="change status"> // a button to click to change status
<a class="active">tab1</a> // need to change classname when the button clicked
<a class="nonactive">tab2</a> // need to change classname when the button clicked
<script>
$(document).ready(function()
$(".closeBTN").click(function()
var data = $(this).attr('id');
//alert (data);
$.ajax(
type: "POST",
url: "../deals_status_update.php",
data: 'id': data
).done(function(msg)
$("#notification").html(msg);
window.setTimeout(function()
location.reload()
$('#itrade .active').removeClass().addClass('nonactive');
$('#iopendeals .nonactive').removeClass().addClass('active');
,100)
);
);
);
</script>
【问题讨论】:
location.reload()
和实际刷新不一样吗?如果是这样,那么您只想捕获从 ajax 调用返回的任何内容,并操作您的 DOM 结构以显示您想要的页面。 -- 编辑:location.reload()
确实像 F5 一样刷新了整个页面:developer.mozilla.org/en-US/docs/Web/API/Location.reload
【参考方案1】:
location.reload() 会重新加载网站,所以之后你就不能使用 jQuery 方法了。
也许window.location.hash
可以帮助你。
添加哈希并在网站重新加载后解析此哈希以触发您的类?
【讨论】:
【参考方案2】:尝试使用 location.hash,因为解释 location.reload() 实际上会刷新页面,但我仍然不明白为什么需要刷新页面来更新数据!
<input type="button" value="change status"> // a button to click to change status
<a class="active">tab1</a> // need to change classname when the button clicked
<a class="nonactive">tab2</a> // need to change classname when the button clicked
<script>
$(document).ready(function()
$(".closeBTN").click(function()
var data = $(this).attr('id');
$.ajax(
type: "POST",
url: "../deals_status_update.php",
data: 'id': data
).done(function(msg)
$("#notification").html(msg);
window.setTimeout(function()
location.hash = 'iopendeals';
location.reload();
,100)
);
);
if(location.hash != '')
$('.active').removeClass().addClass('nonactive');
$(location.hash + ' .nonactive').removeClass().addClass('active');
);
</script>
【讨论】:
【参考方案3】:您正在重新加载页面,因此稍后发生的任何 javascript 都将失去其状态。 DOM 修改仅适用于当前页面会话。一旦导航离开或重新加载,它们就会失去进度。
您是否考虑过不重新加载?你为什么要重新加载?
或者,
您是否可以在客户端进行这些更改,而不是重新加载,而是使用不同的 GET 参数重定向到同一页面?
<li class="menuitem<?=$_GET['page'] == 'homepage' ? ' active' : ''?>">
Homepage
</li>
【讨论】:
如果我不使用重新加载页面,它需要手动刷新页面以更新数据。 您已经在使用 POST 和 AJAX,为什么不同时使用 GET 并动态获取数据? 嗨陈,我为 GET 函数尝试了这段代码没有任何反应: 下次把你的代码放到jsfiddle里。你也在使用 jQuery,为什么要自己创建 XHR 请求?在您的done()
回调中,只需添加类似以下内容:jsfiddle以上是关于Ajax 在按钮提交上更改链接的类名的主要内容,如果未能解决你的问题,请参考以下文章