I've made a small script to load a page into a div of another page, which gets refreshed every 5 seconds.
The page is loaded as expected, but the interval doesn't seem to work.
I already searched for a solution, but all threads are saying that my code should work like that. So I decided to post the full code here.
JQuery (and AJAX):
<script>
function load(){
$('#chatload').load('/intern/chat/chatlogframe.php/?name=muster',function () {
$(this).unwrap();
});
}
load(); // run it on pageload
setInterval(function(){
load() // this should run every 5 seconds
}, 5000);
</script>
The chatlogframe.php file contains a SQL Select query. The data should be reloaded every time the scipt gets executed.
UPDATE:
I checked the Chrome Console where it says Uncaught TypeError: $(...).unwrap is not a function
I don't think that the function is wrong, but maybe it helps.
UPDATE 2:
Heres the html div:
<div id='chatload'></div>
It works. May be there's some issue with your code in $('#chatload').load('/intern/chat/chatlogframe.php/?name=muster',function () {
$(this).unwrap();
});
.unwrap() could be possible issue but to isolate that you would need to post your sample HTML container.
function load() {
console.log("Do something");
$('#chatload').load('https://jsonplaceholder.typicode.com/posts/1', function() {
$(this).unwrap();
});
}
load(); // run it on pageload
setInterval(function() {
load() // this should run every 5 seconds
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatload"></div>
Related
I am trying to hide a div after certain time once its loaded and its working when I do this in the console but it doesnt work when I put this code in the actual webpage.
(function ($) {
if ($('#insightera_widget_content').length) {
$('#insightera_widget_content').delay(10000).fadeOut('slow');
}
}(jQuery));
The div insightera_widget_content cannot be seen when I view the source code as well, but I can see it on the Inspector. It loads from some external widget.
I have tried using the below to the page too and it doesn't work at all.
<script>
$(document).ready(function() {
if ($('#insightera_widget_content').length) {
$('#insightera_widget_content').delay(10000).fadeOut('slow');}
});
</script>
Any suggestions?
Setup a setInterval() to check for the existence of the element, and once it finds it, run your jquery and clear the interval.
var interval = setInterval(function() {
if ($('#insightera_widget_content').length) {
$('#insightera_widget_content').delay(10000).fadeOut('slow');
clearInterval(interval);
}
}, 1000)
/* you don't need this part - just simulating the widget adding the code to the page */
setTimeout(function() {
$('body').append('<div id="insightera_widget_content">insightera_widget_content</div>');
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My aim is to reload a page at a certain interval and run a function.
I have read about storing the function in my localStorage and calling it when the page reloads via body onload. I wish to run this code on my console on a page so I don't think the <body> works. Correct me if I am wrong.
A good example would be, continued reloading of a Ebay page and it gets the prices of all toys, then it reloads and gets the price again and it continues to reload till I close the browser. But every time I reload I can't run my function.
All help is appreciated, for my understanding.
Small example:
var
ready = function() {
setTimeout(function() {
//alert('Yay!');
location.reload();
}, 3000); // 3000 ms => 3 seconds
};
<body onload="ready()">
<h1>Page!</h1>
</body>
You can do this with the setinterval function.
It will repeat something afer a certain amount of time.
For the reload, its not really needed as you can call a ajax request and just change the parts that is needed.
example :
setInterval(function () { alert("Hello"); }, 3000);
It will alert out Hello every 3 secounds
If I understand you correctly, you want to run some script at the third-party website (e.g. Ebay), reload page and do it all again.
You can use some browser extensions. For example, that one.
This extension detect page URL and runs any script you have written for it.So, your script automatically runs by extension, do some work, reloads page and then repeats all.
// script runs automatically by extension:
$( function() {
// do some work:
/* some work */
// and then reloads page:
location.reload();
} );
100% working. :)
<html>
<head>
<meta http-equiv="Refresh" content="10">
<script type="text/javascript">
var whenready = function() {
alert('It Works Man..!!');
};
</script>
</head>
<body onLoad="whenready()">
<h1>Page!</h1>
</body>
</html>
$(window).bind("load", function() {
// code here
});
Currently I have a script that refreshes my 'chat' page every 10 seconds, as it retrieves the chat from a database. However at the moment once the page is loaded I have to wait 10 seconds (or the seconds i specify in the current js) for the chat to show.
I am not sure how to go about making the chat load initially on window.onload just once, and then every 10seconds. I've tried quite a few ways but they just lead to the onload constantly executing.
current js
<script>
window.onload = function() {
window.setTimeout('document.chatMsgListForm.submit()', 10000)
}
</script>
I gave this a shot too
<script>
var done;
window.onload = function(){
while(!done) {
document.forms['formChat'].submit()
done=true;
}
}
window.onload = function() {
window.setTimeout('document.formChat.submit()', 10000)
}
</script>
But no luck unfortunately.
Thank you
You should to look at using AJAX polling or long polling with WebSockets or something else.
Look this answer and this article, for example.
I'm trying to use JQuery to reload a PartialView in an ASP.Net MVC application.
My code:
<div class="partial">
#Html.Action("GetRemainingSeats", "Layout")
</div>
<script src="#Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>
<script type="text/javascript">
setTimeout(
$(function () {
setInterval(function () { $('#partial').load('#Html.Action("GetRemainingSeats", "Layout")'); }, 5000)
}), 6000);
</script>
The partial view is loaded correctly, but immediately after that, it will again execute the action, without waiting for the setTimeout function timer to elapse. After that it will stop doing anything.
Edit:
Inside the PartialView there is a table with shows in a cinema together with how many seats are left for each show. So I want that to update very couple of seconds so the employees can see how many seats are left for a show.
I'm using the timeout and setinterval function because on pageload the action is called. After that I want it to wait a couple of seconds before starting the interval
You script is attempting to load html into an element which does not exist (you only have an element with class="partial", not id="partial". You also need to use #Url.Action(), not #Html.Action() (which is a helper that call a child action - it does not generate a url which is expected by the .load() method. You need to make the following changes
html
<div id="partial"> // change this to specify the id attribute
#Html.Action("GetRemainingSeats", "Layout")
</div>
script
$(function () {
setInterval(function () {
$('#partial').load('#Url.Action("GetRemainingSeats", "Layout")'); }, 5000) // use #Url.Action()
}), 6000);
I really don't understand why you use both timeout and setinterval methods as both work same for first time, if you want to refresh div after 4 sec, stick with setInterval method otherwise if you want to refresh only once, use setTimeout method
var wait = setTimeout(
$(function () {
var s = setInterval(function () {
clearInterval(s); // you need to remove the interval if you want to run it once
$('#partial').load('/Layout/GetRemainingSeats');
}, 4000)
}), 6000);
also, you need to change
<script src="#Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>
to
<script src='#Url.Content("~/Scripts/jquery-1.10.2.min.js")'></script>
I need some help with my new template :). Before the webpage loads I want to show a preloader gif. I done it, however it shows just a little, because the page loads very fast. So I would like to delay the page (with 2 seconds, as an exemple), without affecting the preloader, so it (the preloader) would appear for 2 seconds, so until the page loads.
Here is my code (note that it will not work on jsfiddle, because I can't upload the .gif file): jsfiddle.net/hLmxpsnw/
For whatever reason u want it its done using setTimeout here is the code
jQuery(document).ready(function ($) {
$(window).load(function () {
setTimeout(function(){
$('#preloader').fadeOut('slow', function () {
});
},2000); // set the time here
});
});
jsfiddle http://jsfiddle.net/harshdand/593Lqqnm/2/
You Can Just use delay(); jquery function to add dealy to Preloader
$(document).ready(function () {
$(window).load(function(){
$('#preloader').delay(3000).fadeOut();
});
});
it's a sample
<script>
setTimeout(function () {
$('.loader-container').fadeToggle ();
},3500);
</script>