Javascript Realtime Data Refresh - Wordpress - javascript

I'm trying to have a price update in near realtime on my Wordpress site using Javascript. The script works fine when run on XAMPP, but as soon as I put it into Wordpress it doesn't load anything and just outputs... blank. A Javascript button pop up works fine so I know Javascript is working, just not my code.
The script I'm using is as follows:
//create the div
<div id="price"></div>
//include jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
//the function
<script type="text/javascript">
$(document).ready(function() {
refresh();
$('#price').load('realtime/price-realtime.php');
});
function refresh() {
setTimeout( function() {
$('#price').fadeOut('slow').load('realtime/price-realtime.php').fadeIn('slow');
refresh();
}, 1000);
}
</script>
When visiting realtime/price-realtime.php, the price updates every 1000 milliseconds as is should, fading in and out. For the sake of this example, let's just say the entire contents of price-realtime.php is simply:
2.00
Essentially, I'd like to be able to include the price (a PHP output) on a webpage that doesn't need refreshing. If there's another way or better way of doing it I'd be more than happy to change my method. Hope this makes sense.
Thanks for your help..

Related

How to update content using JavaScript without showing that it is refreshing "blink"?

I m trying to update content in my page without refreshing the whole page just by refreshing the div using javascript.
However it does the job, the output is giving the "blink" at set interval to update content.
How can i avoid to hide the "blink" while updating the content.
Here's the code so far :
index.php
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
</head>
<body >
<div id="curve_chart"></div>
<br><br>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$('#curve_chart').load('load.php');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#curve_chart').load('load.php');
refresh();
}, 2000);
}
</script>
</body></html>
the load.php contains the content which comes from db.
Now , how do i update the content fetched in load.php in index.php without giving the blink effect for every 2 sec of set interval.
Thanks in advance for every single soul who took a min in going through this. I respect your time.
Try to use .ajax for the call and see if the blinking goes away. .load sometimes recreates the element rather than update it and that causes the blinking when fetching a large amount of data
Edit:
$.ajax({url: "demo_test.php", success: function(result){
$("#curve_chart").html(result);
}});
I figured it out. Thank you all for your time and taking a look at it.
All i had to do is to shift the data fetching code as well as just the data interpreting code to the load.php which is getting refreshed every set interval time. leave the rest divs or sections behind in index page.
Thanks once again.

How can I update a div every 15 seconds?

Hi I would need to update a div every 15 seconds. I tried to do it using jQuery.
I then inserted the jQuery file at the top of the page and wrote this script:
<script>
$(document).ready(function() {
$("#stats").load("stats.php");
var refreshId = setInterval(function() {
$("#stats").load('stats.php?randval='+ Math.random());
}, 15000);
$.ajaxSetup({ cache: false });
});
</script>
<div id="stats"></div>
I noticed that this script worked correctly on a blank page, but by entering 'prototype.js' the script stopped working.
If you have a need for Prototype.js in the same page, then consider rewriting your periodical update function to use that RATHER than jQuery. Working around the conflict is just adding two libraries to the page that both do the very same thing.
<script>
$(document).observe('dom:loaded', function() {
new Ajax.PeriodicalUpdater('stats', 'stats.php', { frequency: 15 });
});
</script>
<div id="stats"></div>
Done, and I have to say, more elegantly than the stock jQuery Ajax stuff. This automatically backs off the frequency of requests if the result does not change, saving you bandwidth. Once the result is different than the last time, it returns to the schedule again.
You can try referencing jquery with its full name (jQuery) instead of $
Or run the noConflict command https://api.jquery.com/jquery.noconflict/
Or create a namespace in which jQuery will be assigned to $ safely
(function($){
// use $ here
})(jQuery)

Javascript: How do I run a function after a page reloads

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

Autorefresh content

I am using Dreamweaver CS5. I have a SQL database set up with weather descriptions that have been set up to change at a set interval, however they do not refresh on their own unless the page is physically refreshed. I have users that are logged in for hours at a time so that doesn't exactly work.
I know I can fairly easily set a refresh for the entire page, but I'd prefer not to do that.
I would like to just used some kind of javascript or jquery to auto refresh that section of code.
This is the section of code I want to refresh:
<?php echo ucfirst($row_Recordset1['description']); ?>
I saw this as a solution, but I am not sure how to implement this to work for me, or if there is a better solution all together.
<script type="text/javascript">
function refreshDiv() {
gg1.refresh(getRandomInt(0, 100));
}
$(document).ready(function () { setInterval(refreshDiv, 5000); });
</script>
You need to reload the div's content over AJAX. Since you are using jQuery, you can easily do something like:
$(document).ready(function () {
setInterval(function(){
$('#divid').load( '/url' );
}, 5000);
});
You can read more about .load here
You need to use
set timeout()
JavaScript function. And inside that function you need to refresh your div content using jquery Ajax. Script is pretty simple and will give you desired result. For reference check w3schools and jquery Ajax

jquery .load() function only working the first time

So I have a website I am working on just as a personal website that uses jQuery and jQuery UI
Previously I have been using hidden html code and just using jquery to show it.
But its making my html file messy so I wanted to use jquery's .load() to do the same thing but from an external file.
Right now, its set to a .click function.
For my hidden html it shows it every time when I click a particular element.When you click on a different element it. It hides the first one. I am doing it by having a div with 2 classes. The problem is when I tried to load html into a hidden div, and then show it and hide it, it only worked the first time.
Enough talk, here is my code. #1 works , #2 only works on the first click. And leaves imagearea blank every time after.
$(".jquery").click(function(){
clearImageArea();
hideThumbnails(5);
showThumbnails();
$("#1").click(function(){
$(".imagearea").html(js);
$(".jscode").show(1000);
$(".title").text("Extending jQuery");
});
$("#2").click(function(){
$(".jquery2").empty();
$(".jquery2").load("jqueryEx.html");
var jquery2 = $(".jquery2");
$(".imagearea").html(jquery2);
$(".jquery2").show(1000);
$(".title").text("Extending Jquery Example");
});
});
now my hidden stuff in my html file
First my html and js code is loaded into here from jqueryEx.html and is being hidden elsewhere in my javascript via $(".hidden").hide(); and loaded then into into imagearea via .html() and shown via .show()
<div class="jquery2 hidden">
</div>
My other div looks like this which is put into imagearea by clicking on #1
<div class="jscode hidden">
<div class="block">
//lots of js code escaped out into html
</div> <!-- end of block-->
</div>
elsewhere in my JS code at the beginning I have var js=$(".jscode"); to load it into the js variable you saw earlier.
if you want to see an out of date example of what I am working on
go to www.3realsoft.com (only cs and js work on skills)
if you want to see any additional parts of my code, just ask. Most of it is there on my website though.
I got to this item in my search results, when I was trying to have a button both load and refresh the content, and the load was working but the refresh was not working.
Here's a shorter version of the solution, setting Cache to false was the key. Solution found over at this other link, but I'm posting this concept here because if Google dropped me in this item, others looking for the same will also probably find themselves here. Props to John Millikin, make sure to go over to his answer and upvote him: Stop jQuery .load response from being cached
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
$('.detail-expand').click(function () {
var detailRowElement = $(this).closest('.session-row-tr').next();
var detailElement = detailRowElement.find('.detail-row-div');
var sessionId = detailElement.data("sessionId");
detailElement.empty();
detailElement.load('/Admin/WebLogPartial/' + sessionId, function () {
$.bootstrapSortable(true, 'reversed');
});
detailRowElement.show();
});
});
</script>
Anything that depends on the HTML being loaded must be done in the callback function, because the first A in AJAX stands for asynchronous.
$("#2").click(function(){
$(".jquery2").empty();
$(".jquery2").load("jqueryEx.html", function() {
var jquery2 = $(".jquery2");
$(".imagearea").html(jquery2);
$(".jquery2").show(1000);
$(".title").text("Extending Jquery Example");
});
});
I'm not really sure what you're trying to do with .html(jquery2), since the argument to .html() is supposed to be a string, not a jQuery object. Maybe you meant:
var jquery2 = $(".jquery2").html();

Categories