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)
Related
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..
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
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.
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();
I am having an issue with jQuery Mobile, javascript and get geolocaton.
I am currently using following to get the code to load, when I enter the page:
$(document).on('pageinit', function(){
If the user has set visibility to visible, a div with the ID visible is shown, this I use to call the geolocation the first time:
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler, errorHandler);
}
After this I call the geolocation every 20th second:
setInterval(function() {
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler);
}
}, 20000);
My issue is, if I leave the page for one of the subpages, and return to this page, these codes won't run again. I have tried the following to load the javascript, instead of pageinit:
$(document).on('pagebeforeshow', '#index', function(){
and
$(document).on('pageinit', '#index', function()
I tried loading it in the body of the index as well.
Any help would be greatly appreciated =)
Regards, Fred
Firstly, you may want to consider replacing navigator.geolocation.getCurrentPosition() with navigator.geolocation.watchPosition(). This will call your success or error handler functions each time the device receives a position update, rather than you needing to ping it every 20 seconds to see if it has changed.
With regard to page changing, so long as you’re using a multi-page template, then the handler function should get called while navigating to and from any sub-pages.
Here’s a JS fiddle illustrating this
Hope this helps!