Javascript automatic datagrid reload - javascript

In my DotNet Core web application I have the following snippet of javascript:
<script type="text/javascript">
setTimeout(function () {
$("#gridContainer").dxDataGrid("refresh");
}, 5000);
</script>
What I want to happen, is every 30 seconds I want my projects datagrid to refresh. I don't want the whole page to reload, only the datagrid. The line that does this is:
$("#gridContainer").dxDataGrid("refresh");
However, when I place it in the setTimeout this only gets called once. When I want it to be called every 30 seconds.
Could someone please enlighten me as to what I'm doing wrong, and what the best way to achive this would be?
The refresh needs to happen automatically and not on a button press.

For repeating, you should use setInterval():
setInterval(function () {
$("#gridContainer").dxDataGrid("refresh");
}, 5000);
setTimeout(function, milliseconds) -> Executes a function, after waiting a specified number of milliseconds.
setInterval(function, milliseconds) -> Same as setTimeout(), but repeats the execution of the function continuously.

Related

How to Display value dynamically in a div tag using JS

I doing a little project which shows the internet speed by pinging the website and shows the network speed. but the problem is I have to reload every time to get the speed. How to make the div tag which contains the value of the speed to change dynamically.
I tried to load the value of the tag to itself but it doesn't work for me.
The HTML:
<h2> <span id="speed"></span> kbps</h2>
The JS:
kbitsPerSecond has the value of the speed.
$(document).ready( function () {
$('#speed').load('kbitsPerSecond');
refresh();
});
function refresh() {
setTimeout ( function() {
$('#speed').fadeOut('slow').load('kbitsPerSecond').fadeIn('slow);
refresh();
},200);
}
The tag has to be reloaded dynamically
First, you have two syntax problems.
The JQuery .load() method takes a URL as the first argument, you are passing the string 'kbitsPerSecond', which is not a URL:
$('#speed').load('kbitsPerSecond');
Your call to .fadeIn() is missing a closing quote and, if you want the fade in to happen after the .load has completed, you should not chain it after .load, but instead include it in the .load() callback:
$('#speed').fadeOut('slow').load('https://example.com').fadeIn('slow);
Now, setTimeout() is a one-time timer. Instead of making refresh() recursive, use setInterval() which is a continuous timer -- it counts to its supplied interval and then fires its callback function, then it counts again and fires again and so on. However, this will continue even after the page has finished loading, so you'll probably want to cancel the timer at some point.
Also, you don't need two separate .load() calls and a separate function as shown below:
let timer = null; // Will hold a reference to the timer
$(function () {
timer = setInterval (function() {
$('#speed').fadeOut('slow').load('https://example.com', function(){
$('#speed').fadeIn('slow');
});
},200);
});
// Uncomment and add the following to some callback that fires when you no longer want the timer to run
//clearInterval(timer);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2> <span id="speed">TEST</span> kbps</h2>

Javascript - form submit and refresh only once

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.

SetInterval and SetTimeout not working when trying to load a Partial View

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>

How to refresh mysql posts every 1 second

I use ajax to save user posts/comments into a mysql table without page refresh.
First: I have this <div id="posts-container"></div>
Second: I've tried using Jquery load() to loop in table and echo the posts, with the following code:
var auto_refresh = setInterval(function() {
$('.posts-container').load("refresh_p.php").fadeIn();
}, 0 );
But it doesn't work, page refreshes but content doesn't load, anybody knows why?
Third: If i copy the code that contains refresh_p.php and paste into the data gets loaded successfully. A little weird? Yes. Hope get any help :)
EDIT:
I fixed it, the problem was in refresh_p.php it was expecting the parameter 'profile_id'
i modified the function to this:
1: profile.php
search_user = document.getElementById('user_from').value;
var auto_refresh = setInterval(function() {
$('.posts-container').load("refresh_p.php?search_user="+search_user).fadeIn();
}, 5000 );
2: refresh_p.php
$profile_id = $_GET['search_user'];
All good, but now the whole page refreshes every 5 seconds. I just want the div 'post-container' to refresh.
I've used this function before to refresh a chat box and it worked, only refreshes the div i wanted to. but here it refreshes the entire page.
Don't use setInterval. Do recursive calls on jQuery load complete, this way you make sure that calls are sent one AFTER another, not at the same time.
Try this:
var auto_refresh = function () {
$('.posts-container').load("refresh_p.php", function(){
setTimeout(auto_refresh, 800);
}).fadeIn();
}
auto_refresh();
Also, .fadeIn() only works the first time, after that you have to hide the div before showing it again.
Demo: http://jsfiddle.net/P4P9a/1/ (might be slow because it is loading an entire page).
LE: As I think you are not returning an HTML page you should use $.get instead of $.load .
$('.posts-container').get("refresh_p.php", function(data){
$(this).html(data);
setTimeout(auto_refresh, 800);
}).fadeIn();
var auto_refresh = setInterval(function(){
$('.posts-container').load("refresh_p.php").fadeIn(50);
},1000);
Changed the interval from 0 (which would just create a crazy load...) to 1000ms (1 second). Should work if your path is correct.
Make sure your interval is long enough for your requests to finish. Also think about less real-time options, such as sending an array of messages every 15 seconds, showing them one after another on the client side. Optimize your server side for quick response using caching and also think about using json data and client side templating instead of html responses.

banner refresh code

I have banner code, which is not like images and hyperlinks. All I need is the javascript code that will refresh this code every 30 seconds without refreshing the rest of the page.
This banner code will be appear in chatroom. I would really appreciate any help.
The banner code:
<script language='JavaScript'
type='text/javascript'
src='xxxxxx/banner.php?uname=yyyy&type=2&rows=1' >
</script>
First thing you should do is wrap your code in a function. Trying to re-invoke an entire scripting file import is much more difficult than just invoking a function.
Once everything is wrapped in a function, you can use setTimeout to invoke the method. I would do something like this:
function drawBanner() {
// Do stuff to draw the banner.
// Make sure you handle the case that the
// banner is already present in the DOM!
}
function onDrawBannerTimer() {
// Set this function to fire again after 30 seconds.
// Note that this will fire it roughly every 30 seconds real-time.
// You can move this statement to after the drawBanner() call
// in order to make it 30 seconds between the end of one
// invocation and the start of the next.
setTimeout(onDrawBannerTimer, 30 * 1000);
drawBanner();
}
// Trigger the first invocation when the script is loaded.
onDrawBannerTimer();
you'll want to give that script tag an ID (such as id='dynScript') and then have another script block that does pretty much the following: [Note: I'm using jQuery]
<script>
$(document).ready(function(){
setTimeout ( $('#dynScript').attr('src','xxxxxx/banner.php?uname=yyyy&type=2&rows=1'), 3000);
});
</script>

Categories