Is it possible to use Jquery / Ajax to refresh a div but don't load a php file in the Jquery script?
Every jquery script I found requires a file to load but that's not possible because then my variables are not set.
<div id="reloadDIV">
<?php // PHP in here.. ?>
</div>
if you are loading data dynamically from any php file like file.php than do this.
$(document).ready(function(){
var container = $("#reloadDIV");
container.load("file.php");
var refreshId = setInterval(function()
{
container.load('file.php');
}, 9000);
});
<div id="reloadDIV">
<?php // PHP in here.. ?>
</div>
If you're looking to update data in the div that is being pulled from a database, Ajax could be a good approach.See here: jQuery Ajax simple call
Then in your ajax file you just need to return the data and it will update the div. You could then use a timer function to call the ajax request periodically
Related
I've got a certain php code in a div which gets data from mysql.I want this div to refresh every minute without refreshing the entire page.
Currently I'm using this, doesn't work well
<div id="abc">
<?php
?>
</div>
window.setTimeout('location.reload()', 60000);
The ideal way to do this is to use jQuery.ajax to retrieve data from your server, and then use JavaScript/jQuery within your success function to update your page.
You can still use setTimeout or equivalent to periodically issue AJAX requests.
As you want to refresh the div content every minute you need to look at setInterval method and load of jQuery:
window.setInterval(function(){
$('#abc').load('PHPFile.php');
}, 1000);
and your PHP script mentioned in the url part of the load method must be capable to provide the result in HTML format which is going to be placed in the given div (id:abc)
Have the PHP-code on another page (for example; loaddata.php) and have a jQuery timer executing a function which loads the page loaddata.php
Loaddata.php
<?php
echo "Hello World!";
?>
index.php
<div id="data"></div>
<script>
$('#div').load("loaddata.php", function() {
window.setInterval("loadData", 60000);
});
function loadData()
{
$('#div').load("loaddata.php");
}
</script>
Something like this:
function refreshContent() {
$.post(urlHere, { data here...}, success(data) {
//...manipulate DOM here...
}
}
setTimeout(refreshContent, 60000);
Example of jQuery Ajax
file1.php
<?php
echo 'PHP content e.g. from database based on submitted request - '.$_POST['my-value'];
?>
file2.html
<div class="content"></div>
Refresh div
<script>
$(function(){
$(".reload-data").click(function(){
$.post("file1.php", {my-value: "something"}, function(data){
$(".content").html(data);
});
});
});
setTimeout(function(){$(".reload-data").click();}, 60000);
</script>
For these situations I sometimes use jQuery.load()
Example from documentation:
<div id="result"></div>
<script type="text/javascript">
function refreshDiv() {
$('#result').load('ajax/test.html #container', function(){ /* callback code here */ });
}
setInterval(refreshDiv, 10000);
</script>
This does the following:
Checks if the #result element is in the current page
If it is, it makes a request to the ajax/test.html page
Grabs the #container from the response, and dumps it into #result
And it does this every 10 seconds
That's about it. One line of code, although not as efficient as a true ajax request, it does the job.
I've just finished my first website using some jQuery and now im trying to figure out how to add content to my .content div using jquery.
I'm trying to use this code but it's obviously not correct.
Basically i think having seperate files with content in them might be best, then load ".append()" them into the div using jQuery. How do i do this?
I'm using this code now:
<div class="content"></div>
$('#about').click(function() {
$('.module1').show(600);
$('.content').animate({'width':'620'},600);
$('.content').append(
window.location.href("about.php")
);
You can use .post() to load content from your php
$('#about').click(function () {
$('.module1').show(600);
$('.content').animate({
'width': '620'
}, 600);
$.post('about.php', function (data) {
$('.content').append(data);
})
});
i'm using JQuery ajax to load new content into the page, on the server side I load a new div:
<div id="newFuncDiv" onmousedown="javascript:newFunc("VAR");">Click me</div>
In previous cases i used a function as follows:
function newFunc(){$("#newFuncDiv").click(function(){alert("something");});}
But in this case onclick of this div I need to pass a variable, which I extract from the db on server side, how can i achieve this, as even when I add the newFunc(); with the ajax response it doesn't work,
EDIT:
by the way, forgot to say that i'm looping the response from server so the variable i need to pass is gonna be unique for each div.
since you are using jquery, i'd built the click handler jquery style and attach a data object to the html element:
<div id="newFuncDiv" data-foo="bar">Click me</div>
$("#newFuncDiv").on('click',function(){
alert("something" + $(this).data('foo'));
});
You can use this to reference that div.
function newFunc(myVar) {
$(this).click(function(){
alert(myVar);
});
}
You can save your variable into some attribute to each div and assign a same class a to each div like this
<div class="clickme" id="youvar1"></div>
<div class="clickme" id="youvar3"></div>
<div class="clickme" id="youvar3"></div>
then in jquery
$(document).ready(function(){
$(".clickme").click(function(){
var uniquevar = $(this).attr('id');
/*your ajax code here*/
});
});
Hope this help
How do I refresh results on my site with AJAX?
<div id="Results">
// Mysql info to show a list of <li>
</div>
I want to refresh the div every 10 minutes.
Put your AJAX code inside the setInterval javascript function
setInterval("getListItems()", 600000);
I would use jQuery's load() element with a recursive function.
example (I didn't test):
function reload(url,miliseconds) {
setTimeout(function() {
$('#container').text('');
$('#containter').load(url);
return reload(url,miliseconds);
},miliseconds);
}
$(document).ready(function(){
reload('http://www.website.com/dynamic_content.php',600000);
});
I have a report page which dynamically generate the record and saved in the database. From database i need to show the dynamically updated records in the page without reload or load the contents using setInterval time function.
see my question Here
and use setInterval function with it
var refreshId = setInterval(function()
{
$("#yourContainer").load('yourPage.php');
}, 5000);
offcourse Jquery is prereq for this... so download jQuery from here and include it in your page
<script href="yourlink to the file"></script>
this code http://pastie.org/937213 loads ajax.php to #live div every 3 seconds