$(function() {
setInterval(function() {
$.get("refresh.php", function(result) {
$('#response').empty()
.hide()
.html(result)
$("#response").append(result)
.fadeIn("slow");
});
}, 5000);
});
actually my script hits refresh.php every 5seconds in refresh.php i fetch data from mysql db and create a template like:
<table>
<tr><td>Name<td><td>$fetch['name']</td></tr>
</table>
I checked on firebug my refresh.php send response only once after 5seconds but on all browsers it shows the result two times like:
<table>
<tr><td>Name<td><td>$fetch['name']</td></tr>
</table>
<table>
<tr><td>Name<td><td>$fetch['name']</td></tr>
</table>
It shows the result twice because you're putting it there twice: First using html, then using append:
$(function() {
setInterval(function() {
$.get("refresh.php", function(result) {
$('#response').empty()
.hide()
.html(result) // <==== Here
$("#response").append(result) // <==== And here
.fadeIn("slow");
});
}, 5000);
});
html replaces the content of the element with the markup (or element[s]) you supply (there's no need for empty prior to using it). append appends the markup (or element[s]) you supply to the element.
You want one or the other. I'd go with html:
$(function() {
setInterval(function() {
$.get("refresh.php", function(result) {
$('#response')
.hide()
.html(result)
.fadeIn("slow");
});
}, 5000);
});
Use the following
$.get("refresh.php", function(result) {
$("#response").html(result);
});
Related
i have this script that does ajax using jquery but i want to update with specific content, when I did it return undefined..
<script type="text/javascript">
$(document).ready(function(e) {
$.ajax({
url:'n.php',
cache:false,
type:"GET",
success: function(data){
$('.list-ball').html($(data).find(".count").html());
console.log($(data).find(".count").html());
}
});
});
</script>
Start with console.log(data);
This way you can see the returned data.
From there you can populate an element like so:
$("#myElement").html(data);
You can use $(selector).load() function that will replace content:
$(document).ready(function() {
// [url] [any valid css selector]
$('.list-ball').load('n.php .count > *'); // Find `.count` content and place it instead of `.list-ball` content
});
If .list-ball element is not presented in DOM, than no ajax will be executed.
I've a question regarding reloading a div with jQuery-.load. Code:
<h1>Official Live-Stream</h1>
<object width="560" height="315" data="http://www.dailymotion.com/embed/video/x10sbxw"></object>
</br>
</br>
<script>
(function($)
{
$(document).ready(function()
{
$.ajaxSetup(
{
cache: false,
beforeSend: function() {
$('#content').hide();
$('#loading').show();
},
complete: function() {
$('#loading').hide();
$('#content').show();
},
success: function() {
$('#loading').hide();
$('#content').show();
}
});
var $container = $("#liveracingblog");
$container.load("../live/addon/addon_ticker.php");
var refreshId = setInterval(function()
{
$container.load('../live/addon/addon_ticker.php');
}, 30000);
});
})(jQuery);
</script>
<div id="liveracingblog"></div>
The problem I have, is that every 30 seconds not only the liveracingblog-div reloads, but the whole page, which makes the video embedded in line #2 stop.
You can observe the problem here: http://www.racingblog.de/racingbloglive/ (the code is part of a Wordpress page template, but I don't think that matters)
How can this be fixed?
I looked at the page and the #content div appears to include the embedded video, which you are hiding and showing in the js. You want to only hide and show the #liveracingblog div
The following change should work:
$.ajaxSetup(
{
cache: false,
beforeSend: function() {
$('#liveracingblog').hide();
$('#loading').show();
},
complete: function() {
$('#loading').hide();
$('#liveracingblog').show();
},
success: function() {
$('#loading').hide();
$('#liveracingblog').show();
}
});
Also I notice that a huge amount of records are being pulled out of the database every 30 seconds, and because you are using the load() method, any user scrolling down will be returned to the top of this div. I would suggest using forgetting about hiding the divs at all. Instead, replace load() with a $get to return any new records (since the last request), then prepend these new records to the #liveracingblog div.
Either way, good luck with that, and let me know if you want more clarification on this. Adrian
A bit of a tricky one here
Is there a way i can join the two scripts below into one so when the form is posted it actually loads both the different named url's into the 2 different named divs
<script type="text/javascript">
$(document).ready(function(){
$("#profile").validate({
debug: false,
submitHandler: function(form) {$.post('brides_Includes/edit-profile-top.php', $("#profile").serialize(), function(data) {
$('#results').html(data);
//This executes the JavaScript passed back by the ajax.
$("#results").find("script").each(function(i) {
eval($(this).text());
});
$("form#profile")[0].reset();
});
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#profile").validate({
debug: false,
submitHandler: function(form) {$.post('brides_Includes/welcome-menu.php', $("#profile").serialize(), function(data) {
$('#mymenu').html(data);
//This executes the JavaScript passed back by the ajax.
$("#mymenu").find("script").each(function(i) {
eval($(this).text());
});
$("form#profile")[0].reset();
});
}
});
});
</script>
I am not sure if this is even possible but would be great if it was :)
Many thanks
Just put the contents of the second submitHandler into the first one:
submitHandler: function(form) {
var jqxhr1 = $.post('brides_Includes/edit-profile-top.php', $("#prof...
function(data) {
$('#results').html(data);
//This executes the JavaScript passed back by the ajax.
$("#results").find("script").each(function(i) {
eval($(this).text());
});
});
}
var jqxhr2 = $.post('brides_Includes/welcome-menu.php', $("#pro...
function(data) {
$('#mymenu').html(data);
//This executes the JavaScript passed back by the ajax.
$("#mymenu").find("script").each(function(i) {
eval($(this).text());
});
$.when(jqxhr1, jqhxr2).done(function() { $("#profile")[0].reset(); });
}
<script>
function ajax_loadpage(loadUrl,output_container)
{
$.post
(
loadUrl,
{language: "php", version: 5},function(responseText){$(output_container).html(responseText);},"html"
);
}
ajax_loadpage("url1.php","#div1");
ajax_loadpage("url2.php","#div2");
</script>
the first parameter should be supplied with the URL you want to load, the second will be the name of the id of the element you want to load it into.
I make div which refresh when file is updated. But it continuously refresh (fade out and fade in every second).I't source test2.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js>
</script>
<script>
$(document).ready(function() {
$('#loaddiv').load('check.chat.php');
});
var auto_refresh = setInterval( function() {
$.ajax(
{
type: 'POST',
data:"id=100",
url: "check.chat.php",
success: function(result)
{
if($("#loaddiv").html() != result)
{
$("#loaddiv").fadeOut("fast")
$("#loaddiv").html(result);
$("#loaddiv").fadeIn("slow");
}
}
});
}, 1000);
</script>
<div id="loaddiv"></div>
And file on site: **
Who knows what's the problem?
This part:
$("#loaddiv").fadeOut("fast")
$("#loaddiv").html(result);
$("#loaddiv").fadeIn("slow");
Should be:
$("#loaddiv").fadeOut("fast", function(){
$("#loaddiv").html(result);
$("#loaddiv").fadeIn("slow");
});
In your case, both fades are called at the same time, making an animation queue, causing it to go from one phase to another in about the same time the interval triggers again.
UPDATE
To see logs, do this: console.log("html: ", $("#loaddiv").html(), "result: ", result);
So I have a table pulling information from a database and I was wondering how I could make it refresh its information without reloading the whole page.
You'll need a getTable.php page that displays your table, and nothing else: no headers, footers, etc.
PHP (getTable.php) - this can be any server side code (asp, html, etc..)
<?php
echo '<table><tr><td>TEST</td></tr></table>';
?>
Then, in your JS, you can easily refresh the table by using the load() method:
HTML
<div id="tableHolder"></div>
JS
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getTable.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
Use ajax, following example is in jQuery:
$(function() {
var prevAjaxReturned = true;
var xhr = null;
setInterval(function() {
if( prevAjaxReturned ) {
prevAjaxReturned = false;
} else if( xhr ) {
xhr.abort( );
}
xhr = $.ajax({
type: "GET",
data: "v1="+v1+"&v2="+v2,
url: "location/of/server/script.php",
success: function(html) {
// html is a string of all output of the server script.
$("#element").html(html);
prevAjaxReturned = true;
}
});
}, 5000);
});
The success function assumes that your server script outputs the html that you want to replace in the element with id 'element'.
You should have a page that return the information and pull data using Ajax / jQuery.
<div class="result"></div>
setInterval(function() {
$.get('table.php', function(data) {
$('#result').html(data);
});
}, 5000);
Here is another option for you to use. This solution is using an IIFE which is preferred over setInterval. You can read more about IIFE at the link above.
JAVASCRIPT:
var $results = $('#results'),
loadInterval = 5000;
(function loader() {
$.get('script.php', function(html){
$results.hide(200, function() {
$results.empty();
$results.html(html);
$results.show(200, function() {
setTimeout(loader, loadInterval);
});
});
});
})();
HTML:
<div id="results"></div>
setTimeout(function(){
jqueryFunction(Args);
},100);
will work...
100 = 100 milliseconds
The following works with JQuery Datatables 1.10
`var tableName;
//Set AJAX Refresh interval.
$(function() {
setReloadInterval(10); //Refresh every 10 seconds.
}
//Because function takes seconds we * 1000 to convert seconds to milliseconds.
function setReloadInterval(reloadTime) {
if(reloadTime > 0)
internalId = setInterval("reloadTable()", (reloadTime * 1000);
}
//Auto Refresh JQuery DataTable
function reloadTable() {
tableName.ajax.reload();
}
//Table defined...
$(document).ready(function () {
tableName = $('#tableName').DataTable({
"sAjaxSource": "/someUrl",
});`