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);
});
Related
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
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'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
Im creating a small web app and I have used AJAX in a few functions such a creating and deleting certain objects.
To notify the user I have used PHP to echo a HTML notification on to the screen depending on weather the object was successfully created or not.
if ($query) {
//response to ajax call if successful
echo '<div class="alert alert-success"><a class="close" data-dismiss="alert">×</a><h4 class="alert-heading">Success!</h4>Object Added!</div>';
}
The problem is, over time the notifications build up on the screen as there is no refresh to remove them.
I have a jQuery function that can remove the alerts every 5 seconds shown below
function clearAlerts(){
setTimeout(function() {
$('.alert').fadeOut('fast');
}, 5000);
}
But I dont know how to call this function every time a notification is added to the page, is
there anyway to use jQuery to perhaps detect when a notification has been echoed on to the page, or to run this jQuery function each time they are added.
Thanks
Put this tag directly inside each HTML snippet you are generating, you can style it in any way you like:
<span class="close-notification">Close</span>
Then use this piece of JS to remove it when clicked.
$(document).on('click', '.close-notification', function(){
$(this).parent().fadeOut(); // could use .remove(), .slideUp() etc
});
What you want is possible, by jQuery. First, add a class to the notification div, for example:
<div class="notification">Notification</div>
Then this jQuery:
$(".notification").live("ready", function(){
$(".notification").setDelay(5000).fadeOut("slow");
});
when I click on "Click Here" then a page must open inside
<script....>
$('yahoo').html('<a href=desc.php>');
</script>
<div id='yahoo'></div>
<div id='clickhere'>Click here</div>
Thanks
Dave
I think you're looking for AJAX to fetch the page for you. Something like this might work:
<script type="text/javascript">
$(function() {
$('#clickhere').click(function() {
$('#yahoo').load('desc.php');
});
});
</script>
<div id='yahoo'></div>
<div id='clickhere'>Click here</div>
First you need to wrap the script inside $(function() { ... }) to execute your code on page load. This is equivalent to $(document).ready(function() { ... }).
Next you have to bind a click event to the #clickhere element so you can actually do something when the user clicks on it.
When the user clicks on the #clickhere div, load() will fetch the contents of the given url inside the element you call it from. So, this snippet means that when the #clickhere div is clicked, desc.php is loaded inside #yahoo div.
ID selector is #ID, not just ID
Use jQuery AJAX load method to load desc.php page
You should execute your jQuery code after DOMContentLoaded event
Wrap your code in $(document).ready(function() { });, which will insure that the code executes after the DOM is available to your code. Otherwise, $('yahoo') will likely return no matched elements.
Why not try target_self ? I also fixed some code
<script....>
$('yahoo').html('<a href=desc.php target='>self'>Click here</a>');
</script>
<div id='yahoo'></div>
<div id='clickhere'>Click here</div>