javascript - Can't use ajax POST and jquery animation simultaneously (using Bootstrap)
问题描述
I am using a Bootstrap Template that has a sidebar, and when the user clicks on .nav-menu
(or Company Name in the template), the sidebar hides/unhides.
$(document).ready(function () {
$( '.nav-menu' ).click(function() {
event.preventDefault();
if($( '.nav-menu-item' ).is(":visible")){
$('.nav-menu-item' ).hide('slide', {direction:'left'}, 1000);
$('#menu-item-container').addClass('sidebar-hidden');
} else{
$('.nav-menu-item' ).show('slide', {direction:'left'}, 1000);
$('#menu-item-container').removeClass('sidebar-hidden');
}
});
});
The code above works fine.
The problem comes when I try to include an ajax post like below:
$(document).ready(function () {
$( '.nav-menu' ).click(function() {
event.preventDefault();
if($( '.nav-menu-item' ).is(":visible")){
$('.nav-menu-item' ).hide('slide', {direction:'left'}, 1000);
$('#menu-item-container').addClass('sidebar-hidden');
$.ajax({
url:'/userSettings',
type:'POST',
data:{'sidebar':'0'}
});
} else{
$('.nav-menu-item' ).show('slide', {direction:'left'}, 1000);
$('#menu-item-container').removeClass('sidebar-hidden');
$.ajax({
url:'/userSettings',
type:'POST',
data:{'sidebar':'1'}
});
}
});
});
I added this in my public/js folder and added the following to the footer:
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
Now the ajax POST works fine (except that I have to double click on .nav-menu
) but the show/hide animation doesn't work correctly!
This $('.nav-menu-item' ).hide('slide', {direction:'left'}, 1000);
part of the code doesn't work at all!
This is the error in the Chrome console (there is 7270 of these):
jquery-3.3.1.js:6710 Uncaught TypeError: jQuery.easing[this.easing] is not a function
at init.run (jquery-3.3.1.js:6710)
at tick (jquery-3.3.1.js:7094)
at Function.jQuery.fx.tick (jquery-3.3.1.js:7436)
at schedule (jquery-3.3.1.js:6813)
Not sure if this is relevant, but this is the entire footer:
//bootstrap required
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
//bootstrap required
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script src="js/dashboard.js"></script>
<script src="js/jquery.js"></script>
</body>
</html>
解决方案
jQuery hide() 文档显示带有 3 个参数的hide 的签名是 hide(duration, easing, complete),其中 easing 和 complete 是函数。您正在传递三个参数。第一个只是由 jQuery 使用后备处理,但第二个,缓动,期待一个函数并且你已经传递了一个对象。
也许它似乎只是在添加 ajax 代码之前才起作用。也许您当时也遇到了错误,但它们并没有阻止其他代码运行。
推荐阅读
- event-handling - svelte:如何在我自己的组件中使用事件修饰符
- android - 发布 KMM 库时未解决的对类型别名、内联函数和扩展函数的引用
- flutter - 如何用不同的捆绑ID从不同的产品风格调用同一家商店?[Flutter in_app_purchase]
- android - Android TV 应用程序设计:视频细节和视频水平列表
- twig - 如何翻译变量?
- javascript - 为什么没有参数的测试在 Typescript 中失败?
- python - 查找标签列表和数据框索引之间的交集(Python Pandas)
- ansible - Jinja2 检查 lsit 是否为空
- javascript - JS RemoveEventListener 按类名来自动态添加的元素
- spring-boot - 声明列 TIME WITH TIME ZONE 时出现语法错误