Can't use ajax POST and jquery animation simultaneously (using Bootstrap) - javascript

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>

The jQuery hide() documentation shows that the signature of hide with 3 arguments is hide( duration, easing, complete) where easing and complete are functions. You are passing three arguments. The first one is just handled with a fallback by jQuery but the second one, easing, is expecting a function and you have passed an object.
Maybe it only seemed to be working before adding the ajax code. Perhaps you were getting errors then too but they weren't stopping additional code from running.

Related

Load mysql query after pageload

I have a few queries that are quite big, i only want queries to run them once the page has finished loading.
This is what i have tried.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#query").load("sql-query.php");
});
</script>
</head>
<div id="query">Loading...</div>
sql-query.php
$data = DB::table('tapplicant')->limit(5000)->get();
var_dump($data);
The idea is to return the query data once the page has loaded.
Version mismatch "Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
/*
$( window ).load(function() {
$("#query").load("sql-query.php");
});
*/
$(window).on('load', function(){
$("#query").load("sql-query.php");
});
</script>
</head>
<div id="query">Loading...</div>
Suggest you to use document ready function (i.e $(function()) instead of window onload document.ready vs window
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#query").load("sql-query.php");
});
</script>
</head>
<div id="query">Loading...</div>
I recommend using jQuery.get() after the document.ready()
$( document ).ready(function() {
$.get( "sql-query.php", function( data ) {
$( "#query" ).html( data );
});
});
This is due to some changes made in this JQuery version ..
Just change
$(window).load(function() {});
to
$(window).on("load", function (e) {}); and keep the rest as it is.
Please refer to this for more details.

jQuery - Hide / Show not displaying div and showing error

I was wondering if someone could help me out with a bit of jquery im trying to write.
Im quite new to jQuery so this is prob something easy.
I have a div with an id of 'about-box'
I want it to slide in and out of the viewport when a menu item is pressed.
I have the following jQuery.
<script type="text/javascript">
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
if($('#about-box:visible').length)
$('#about-box').hide("slide", { direction: "left" }, 1000);
else
$('#about-box').show("slide", { direction: "left" }, 1000);
});
});
</script>
But i am getting the following error message:
Uncaught TypeError: undefined is not a function
Any help getting this to work would be greatly appreciated.
I think the problem is you are not including jQuery-UI in your page, the show/hide implementation you have used requires jQuery UI
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
if ($('#about-box').stop(true, true).is(':visible')) {
$('#about-box').hide("slide", {
direction: "left"
}, 1000);
} else {
$('#about-box').show("slide", {
direction: "left"
}, 1000);
}
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="menu-item-1"><a>menu-item-1 a</a></div>
<div id="about-box">about-box</div>
You can also use jQueryUI toggle
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
$('#about-box').toggle("slide", {
direction: "left"
}, 1000);
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="menu-item-1"><a>menu-item-1 a</a></div>
<div id="about-box">about-box</div>
since document is for sure a good element the undefined is not on the ready
:visible looks good see here http://api.jquery.com/visible-selector/
So the undefined must be here $('#menu-item-1 a').click or in other code in your page or on the execution of the ready.
Try to find where . remove the if else . does the undefined throw?? if yes the $('#menu-item-1 a') doesnt resolve.
wish it help
try changing the selector to
$('#about-box').is(':visible')
$('#about-box:visible') is a wrong selector,I think you can toggle a class on about-box button and decide slide in or out

Javascript conflict in Html & CSS

I have a conflict with my JS as one of the scripts isn't functioning properly, I'm trying to use more than one javascript in my document, I will be using three and I'm getting a conflict already and I only have two in the document so far... :(
First in the head:
<script type="text/javascript" src="javascript/jquery_1.3.2.js"></script>
<script type="text/javascript" src="javascript/jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#jcarouselMetro').jcarousel({
scroll: 1,
wrap: 'both'
});
jQuery('#jcarouselInvites').jcarousel({
scroll: 1,
wrap: 'both'
});
});
</script>
Second in the body:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="javascript/jquery-css-transform.js" type="text/javascript"></script>
<script src="javascript/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script>
$('.item').hover(
function(){
var $this = $(this);
expand($this);
},
function(){
var $this = $(this);
collapse($this);
}
);
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 40;
$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'243px'}, 1000)
.find('.item_content').fadeIn(400,function(){
$(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'52px'}, 1000)
.find('.item_content')
.stop(true,true)
.fadeOut()
.find('p')
.stop(true,true)
.fadeOut();
}
</script>
From what I can see it's the "function" that may be causing the issue. Please help... And how can you avoid these issues, I'm sure loads of people use multiple js all the time, do you just hope and pray it doesnt mess up?
Edited:
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#jcarouselMetro').jcarousel({
scroll: 1,
wrap: 'both'
});
jQuery('#jcarouselInvites').jcarousel({
scroll: 1,
wrap: 'both'
});
});
</script>
Cleaning up your source code may help the debugging process..
Instead of using javascript contained within script tags within the body/head of your document, you can just create a separate javascript file. Place all of your external script tags within the head of the document. Your custom javascript file which contains all the above code should be called last.
Your click/hover functions should be contained/bound within your document.ready function.
Also, you are calling duplicate scripts, jcarousel.js and jcarousel.min.js are the same script. One is just the minified version. You are likely producing conflicts because of this, and the same would be true for your jquery calls. Try using just one version of jQuery, ie the latest version from scriptsrc.net
Your resulting html document would therefore look something like this
<head>
<!-- jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery-css-transform.js"></script>
<script type="text/javascript" src="javascript/jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<!-- your custom js -->
<script type="text/javascript" src="javascript/yourCustom.js"></script>
</head>
your custom js file would then look like this..
function expand($elem) {
var angle = 0;
var t = setInterval(function() {
if (angle == 1440) {
clearInterval(t);
return;
}
angle += 40;
$('.link', $elem).stop().animate({
rotate : '+=-40deg'
}, 0);
}, 10);
$elem.stop().animate({
width : '243px'
}, 1000).find('.item_content').fadeIn(400, function() {
$(this).find('p').stop(true, true).fadeIn(600);
});
}//end expand
function collapse($elem) {
var angle = 1440;
var t = setInterval(function() {
if (angle == 0) {
clearInterval(t);
return;
}
angle -= 40;
$('.link', $elem).stop().animate({
rotate : '+=40deg'
}, 0);
}, 10);
$elem.stop().animate({
width : '52px'
}, 1000).find('.item_content').stop(true, true).fadeOut().find('p').stop(true, true).fadeOut();
}//end collapse
$(document).ready(function() {
//Carousel setup
$('#jcarouselMetro').jcarousel({
scroll : 1,
wrap : 'both'
});
$('#jcarouselInvites').jcarousel({
scroll : 1,
wrap : 'both'
});
//end carousel
//item hover function
$('.item').hover(function() {
var $this = $(this);
expand($this);
}, function() {
var $this = $(this);
collapse($this);
});
//end hover
});//end document ready
Further to all of this, you may need to define a clearInterval function. Unless it is part of one of the many libraries you have included, as it is called in your expand and collapse functions.
Hope this helps...
I can see two issues with conflicting JavaScript code being included twice. Firstly
you're loading two versions of the same carousel library here:
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.js"></script>
The first is a minified version of of the same code. You only need one, so remove the second line above as it won't be required and it's just a larger version of the same file. This may not be causing the issue, but it's not right.
Secondly you have two versions of jQuery in your code and that will also cause significant issues because you're loading them at very different times in your page and they will have very different functionality. You can fix this using noConflict:
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var jq142 = jQuery.noConflict();
jq142(document).ready(function () {
jQuery('#jcarouselMetro').jcarousel({
scroll: 1,
wrap: 'both'
});
jQuery('#jcarouselInvites').jcarousel({
scroll: 1,
wrap: 'both'
});
});
</script>
The first line var jq142 = jQuery.noConflict(); will ensure that you have the correct version of jQuery loaded for the carousel library. Read the noConflict documentation for more information.
You can use this to only load one version of the library. 1.3.2 on IE6,7,8 and 1.9.1 on all other browsers.
<!--[if lt IE 9]>
<script src="jquery-1.3.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-1.9.1.js"></script>
<!--[endif]-->

why my jquery codes doesn't run?

I want to toggle element that id's pg when click link.
header:
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
</script>
Elements:
<p id="pg">deneme deneme 123 deneme</p>
toggle
close click function by adding });:
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
});
You're missing the final }); for the statement
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
)}; //<-- Missing close bracket
</script>
Also, if you're using Firefox, check out Firebug. Its an invaluable debugger tool and will show you where errors are happening.
Chrome has a Developer Tools enabled, not sure about IE.

Calling a jQuery function on MouseOver and MouseOut

I have the following code:
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript">
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script>
Which doesn't work. As you could probably tell, it's supposed to expand the .webPanel div to 350px on mouseover, but nothing happens.
How can I get this thing to work? I don't understand why it isn't working!
Thank you
You need a separate script inclusion for jquery:
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
//you script
</script>
And how about hover function
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
$(function() {
$('.webPanel').hover(
function(){
$('.webPanel').animate({'width': '350px'}, 100);
},
function (){
$('.webPanel').animate({'width': '500px'}, 100);
}
});
});
</script>
I wrote your script in jsfiddle and it works great.
Please, see the code here.
I think that your problem is due to the code you wrote between the script tags.
Regards.
your function need to be in separate script tag:
<script type="text/javascript"> // this missing
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script> // this missing

Categories

Resources