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.
Related
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.
I need to handle div resizing on my web page. The problem is that I have not idea why resize function cause stackoverflow exception. Can you explain me what am I doing wrong?
Here is a jsfiddle example: https://jsfiddle.net/u9q4k4ce/
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
function start() {
$(document).ready(function () {
$("#divId").off('resize').on('resize', function () {
});
$(window).bind('resize', function () {
$("#divId").resize();
});
});
}
</script>
</head>
<body onload="start()">
<div id="divId" style="position:absolute;left:0px;right:0px;top:0px;bottom:0px;"></div>
</body>
</html>
In jsfiddle I provided any window resize cause stack overflow. I'm using newest chrome, win 7.
Any help will be appreciated.
Please go through https://api.jquery.com/resize/. you should pass a callback/handler to your resize().
$( window ).resize(function() {
$( "#log" ).append( "<div>Handler for .resize() called.</div>" );
});
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.
Any ideas why this doesnt work in my php document?
When i tested this on jsfiddle, everything worked fine.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
</script>
</head>
<body>
<div class="shipping-container">
Show UPS info
Show Fedex info
<div class="ups info" style="display:none">the info for ups</div>
<div class="fedex info" style="display:none">Who let the dogs out</div>
</div>
</body>
You missed the document ready handler, try this:
<script type="text/javascript">
$(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
</script>
Alternatively, leave your script tag as it is, but put it at the end of the document, before the </body> tag.
You should make sure that your JQuery code is only loaded AFTER your DOM has fully loaded by doing:
$(document).ready(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
You are running the script before the link element exists.
In jsfiddle the code is by default placed in an event that runs after the document is loaded. Use the ready event to do this in your code:
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
});
</script>
I think you should do this in your header:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("div.info").hide();
$("div." + this.className).show();
});
</script>
This will ensure that all of the DOM objects (especially the a elements) are loaded before you try to attach any event handler.
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