<div> value not updating in html page - javascript

I am using jquery to auto update a part of the HTML page. Following is the code
$(document).ready( function() {
$('#auto').load("static/l.txt");
refresh();
});
function refresh() {
setTimeout(function() {
$('#auto').load("static/l.txt");
refresh();
}, 1000);
}
The id of the HTML div tag to be updated is auto
The file static/l.txt is continuously being updated by another python program.
But when I load the html page , the div only gets updated once and does not update the value until and unless I open the developers console on the browser.
I am hosting the web page using Flask in python

How about trying this?
var counter =0 ;
$(document).ready( function() {
$('#auto').val("starting");
refresh();
});
function refresh() {
setInterval( function() {
counter ++;
$('#auto').val(counter);
}, 1000);
}

Use a callback to know, when the content is actually loaded and move the function definition in the ready block, also.
$(document).ready(function() {
function loadData() {
$('#auto').load('static/l.txt', function(completed) {
setTimeout(loadData, 1000);
});
}
loadData();
});

Related

Jquery function - on element

I have this jquery code, working 100%.
This is executing on every page load, when i import my js file in the html.
My question, how can i make use of this code, only when the element is present, or call it directly from the element itself? I have similiar functions, but, on html's that dont have specific elements, javascript execution halts. Sometimes because the html elements dont exist on that specific html file.
/**
* Message Box Display
*/
$(document).ready(function() {
$("#Message-Box" ).slideDown("slow", function() {
$("#Message-Box").addClass('Show');
setTimeout(function(){
$('#Message-Box').addClass('Hide');
}, 5000);
});
});
try something like this
$(document).ready(function() {
var msgbx = $("#Message-Box");
if (msgbx.length) {
msgbx.slideDown("slow", function() {
msgbx.addClass('Show');
setTimeout(function() {
msgbx.addClass('Hide');
}, 5000);
});
}
});
The function halting my script was this one:
/**
* Background-Audio
*/
$(document).ready(function() {
var audioTrack = document.getElementById("Background-Audio");
if(audioTrack)
{
audioTrack.volume = 0.05;
audioTrack.play();
}
});

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);

Trouble calling JavaScript function on page load

I have a javascript function that i have named refreshProjects(), what it does is filter a dropdownlist depending on what was selected in a previous dropdownlist. But i need to also filter my list direcktly after the page has finishd loading.
I have tried using the code window.onload = refreshProjects(id) with no sucsses, but onload workes when i use window.onload = alert('This page has finished loading!'), so i know that part off the script works. So how do i call a javascript function on load, i thought that it would be simple but evrything i tried have failed.
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
window.onload = refreshProjects(id); <-- Problem
$("#ddCustomers").change(function () {
refreshProjects($(this).val());
});
function refreshProjects(id) {
var projects = $("#ddProjects");
$.get('#Url.Action("FilterProjects","TimeEntry")', { customerId: id },
function (result) {
// clear the dropdown
projects.empty();
//Add a deafult "null" value
$("#ddProjects").get(0).options[0] = new Option("[ - No project - ]", "-1");
// rebuild the dropdown
$.each(result, function (i, e) {
projects.append($('<option/>').text(e.Text).val(e.Value));
});
});
}</script>
}
This is for MVC 4.5.
Try changing window.onload = refreshProjects(id); to:
window.onload = function() { refreshProjects($("#ddCustomers").val()); };
Onload expects a callback function. You were directly executing refreshProjects() and setting the return value as the onload.
But since you seem to be using jQUery, you could do the following:
$(function() {
refreshProjects($("#ddCustomers").val());
});
This will execute refreshProjects when the document is ready (which actually is before window load).
You can also try to use the following:
$(document).ready(function () {
refreshProjects(id);
});
This should work aswell if you are using jQuery.

problems with jquery load()

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.

setinterval keeps running after ajax load

I load content in to a DIV (#mydiv) from a page (mypage.php) . The page that i get content from has javascript inside.
In THE mypage.php
function refresh_feeds() {
//bla bla
}
$(function(){
feed_timer = setInterval(refresh_feeds, 50000);
});
When i clean the content of #mydiv and load content from another page (mypage2.php), setInterval that started in mypage.php keeps running.
my question is how can i stop it when the content from mypage.php is unloaded
or
how can i handle unload event of mypage.php ?
var feed_timer;
function refresh_feeds() {
//bla bla
}
$(function(){
clearInterval(feed_timer);
feed_timer = setInterval(refresh_feeds, 50000);
});
function refresh_feeds() {
console.log(1);
}
$(function() {
window.feed_timer = window.setInterval(refresh_feeds, 100);
});
$(window).bind("beforeunload",function() {
window.clearInterval(window.feed_timer);
window.feed_timer = null;
return 1;
});
Please check in console for this
you have to clear your Interval
clearInterval(feed_timer);
be sure to save the feed_timer in a global scope

Categories