problems with jquery load() - javascript

I need a certain div refreshed on the page every 3 seconds. This div contains other divs inside it.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
setInterval(function()
{
$('#gamewrapper2').load('find.php #gamewrapper2');
}, 3000);
;
This code works but only if the page visited is domain/find.php and it doesn't work for domain/find.php?id=1000001
Maybe i don't understand something but shouldn't this function load take the block #gamewrapper2 from find.php and paste it into the block #gamewrapper2 of the current page?

Do you just need to keep the query string on find.php? Something like:
setInterval(function(){
$('#gamewrapper2').load(window.location.pathname + window.location.search + ' #gamewrapper2');
}, 3000);

You can try the following to pass variables into the php document:
setInterval(function()
{
$('#gamewrapper2').load('find.php #gamewrapper2', {id: 1000001});
}, 3000);
}
Additionally, you can provide a function callback when it has completed loading to perform some task...
setInterval(function()
{
$('#gamewrapper2').load('find.php #gamewrapper2', {id: 1000001}, function(){
alert("find.php has been loaded.");
});
}, 3000);
}
.load() method
You should probably use $_POST['id'] to get the value from find.php.

Related

How to reload a div content automatically

I need that only the content of the div "chat_scroll" are automatically reloaded. I've tried a lot of codes, but the div remains stationary.
At last, I've tried with this:
JS before
<script>
function updateDiv()
{
$( "#chat_scroll" ).load(window.location.href + " #chat_scroll" );
}
</script>
JQUERY at the bottom of the file:
<script>
function myFunction() {
myVar = setInterval(updateDiv(), 3000);
}
</script>
setInterval accepts a function as an argument:
setInterval(updateDiv, 3000);
Note that there's no () after updateDiv. That would be calling the function, and passing its return value to setInterval, which is not what you're trying to do.
When do you call myFunction()? Try this instead of using myFunction:
$(document).ready(function(){
setInterval(function(){
updateDiv();
}, 3000);
});

How to refresh a script after some time using Javascript

There is a variable I want to update every minute.
So am curious whether there is a way in Javascript where I can refresh the whole script after some time instead of the variable itself.
<script>
function vName(){
videos = $('#videos').text();
}
vName();
Use setInterval. Here hello will print each and every 3sec
setInterval(function(){ console.log("Hello"); }, 3000);
You could achive this using an event to listen to the element's change:
(function () {
"use strict";
let videos = '';
$("#videos").on("change", evt => {
videos = $(evt.target).val();
console.log(videos);
});
})();
body {
margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="videos" type="text">
Solution
Set interval is a function which is being used to perform any functionality after a specific desired time span . The function is always called again and again after that time period . The below code is an example for setInterval.
Code:-
setInterval(function(){ alert("Video is here "); }, 9000);
Explanation
you can call any method in place of "alert("Video is here")" and the desired time period is being given in place of "9000" that means the specific function is being called after every 9 seconds
You can put your code in setInterval() function, like this
setInterval(()=>{
//your script here
function vName(){
videos = $('#videos').text();
}
vName();
}, 60000);

Javascript Not Updating Function on Interval

I've got a script that looks to see how many records are "unread" for notifications. When I use the following code the page will load then number when the page loads:
$(document).ready(function(){
$("#notes_number").load("getnumber.php");
});
But I'm trying to make it update every 5 secs so I searched around and found this but it's not working. I'm trying to figure out how to get it operational. Here is the Javascript code:
//TRYING TO GET TO UPDATE EVERY 5 SECONDS
window.setInterval(function(){
function(){
$("#notes_number").load("getnumber.php");
}
}, 5000);
//THIS IS WHAT HAPPENS WHEN A PARTICULAR BUTTON IS PRESSED
function toggleDiv(divId) {
$("#"+divId).show();
//GET THE NOTIFICATIONS
$(document).ready(function(){
$("#myContent").load("getnotes.php?page=<? echo $page; ?>");
});
//RESET THE NUMBER OF NOTIFICATIONS UNREAD
$(document).ready(function(){
$("#notes_number").load("getnumber.php");
});
}
I was putting the code to do inside 2 functions. The code should be:
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
}, 5000);
You've got an extra function declaration in here - it won't ever execute:
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
}, 5000);
IMO, you shouldn't use setInterval like that. The response order isn't guaranteed, you should use setTimeout inside the callback to guarantee you get a response before sending the next request off:
function getNotes() {
$("#notes_number").load("getnumber.php", function() {
setTimeout(getNotes, 5000);
});
}
getNotes();
Replace following chunk of code
window.setInterval(function(){
function(){
$("#notes_number").load("getnumber.php");
}
}, 5000);
with
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
}, 5000);

loading a div 1 minute after the page loads

I have a div with id notifications in the home page. I don't want the div to be load when the page loads for the first time, I want it to load after 1 min. Is there any way in javascript or jquery to do what I want?
I'm not sure how you want to actually add your div into the DOM, but you can use setTimeout to delay for a minute. From the docs:
Calls a function or executes a code snippet after specified delay.
So something like this:
function appendDiv() {
... append code here...
}
timeoutID = window.setTimeout(appendDiv, 60000);
Sure :) in my example i use jQuery:
<div style="display:none" id="notifications"></div>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$.get('/notifications.php', function(result) {
// build your notifications here
// ...
$('#notifications').show();
}, 'json');
}, 60000);
});
</script>
Using jQuery's load function:
setTimeout(function() {
$('#myDiv').load('divcontents.html');
}, 60 * 1000);
divcontents.html can be dynamically generated on the server.
if the notification should not be in the DOM at all for the first minute, use following code:
$(document).ready(function(){
setTimeout( function(){
$("<div>")
.html( "your notification message/markup" )
.attr({ id : 'notification', ... })
.appendTo( "body" /* or any other DOM element */ );
}, 60*1000);
})

How to put a delay in loading of images in the same area to make it look like an animation?

Basically I have like 2 images, and I want to show one for 3 seconds, then replace it with another, in the same img tag.
This is what I have so far:
$(function(){
$("#image_area").hide();
$('#W40').click(function(){
$("#image_area img").remove();
show_image_area('40');
});
});
So the flow is first hide the #image_area, then when #W40 button is clicked, remove any current image in the area and run the show_image_area function, the function is as follows:
function show_image_area(world){
if (!$("#image_area img").length) { //only run if no current image exists
$('#image_area').show();
$('#image_area').prepend("<img id='tw_image' src='world+"/7.png' width=\"1000\" height=\"1030\" />");
setTimeout($("#tw_image").attr("src", "world+"/8.png"), 3000);
}
}
Right now, if I run these code, the 8.png shows almost immediately, and there are no 3 second delay that I wanted.
You have an extra " in the code: should be $("#tw_image").attr("src", world+"/8.png").
Also, I would put $("#tw_image").attr("src", world+"/8.png") in a function of it's own.
function SwapImage(world)
{
$("#tw_image").attr("src", world+"/8.png");
}
Then change your last line to setTimeout(SwapImage(world), 3000);
This isnt fully tested but gives you an idea:
$(function(){
$("#image_area").hide();
$('#W40').click(function(){
$("#image_area img").remove()
show_image_area('40');
});
});
function show_image_area(world){
var newImg = $('<img />').css({width: 1000, height: 1030}).attr({id: 'tw_image', src: world+'/7.png');
if ( !$("#image_area img").length ) { //only run if no current image exists
$('#image_area').prepend(newImg).show('fast');
setTimeout( function() {
$("#tw_image").attr("src", world+"/8.png");
}, 3000);
}
}
Basically yours was immediately firing the setTimeout function instead of passing in a function to be fired later
That's because the first parameter of setTimeout is not a function.
Also there is an extra quote on that line.
Also, the "world" variable might need closure (can't remember).
Try
function show_image_area(world){
if (!$("#image_area img").length) { //only run if no current image exists
$('#image_area').show();
$('#image_area').prepend("<img id='tw_image' src='world+"/7.png' width=\"1000\" height=\"1030\" />");
var myWorld = world;
setTimeout(function () {$("#tw_image").attr("src", myWorld+"/8.png");}, 3000);
}
}
Your setTimeout call is a bit off:
setTimeout($("#tw_image").attr("src", "world+"/8.png"), 3000);
The first argument should be the function to execute:
setTimeout(function() { $("#tw_image").attr("src", "world/8.png") }, 3000);
Also, I'm not sure what "world" is so I merged it into the new src path to fix a stray double quote.

Categories