I have created a jQuery plugin which can be used in an Ajax enabled websites to refresh the div content. The plugin can be found here.
Where to Use:
If you have AJAX enabled website and you want to refresh some div contents based on some event on the web page in that case this plugin can be used.
How to use:
In an html page add the script tag for jQuery and refresher plugin script.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.refresh.js"></script>
For demo purpose will take a simple example where I have say three DIV's whose contents need to be refresehd with the current date and time when "Refresh Div" link is clicked.
So in body we will write
<body>
<a id="refreshDiv" href="#">Refresh Div</a>
<div id="first" >First Div: Content to replace</div>
<div id="second">Second Div: Content to replace</div>
<div id="third" style="display:none">Third Div: Content to replace</div>
</body>
We will add a click event handler on the link using jQuery.
Line $("div").refresh(); will select all the div's in the page and will call the refresh method on it.
$(document).ready(function() {
$("#refreshDiv").click(function() {
$("div").refresh();
});
});
Now we will define three Javascript functions which will actually refresh the content of the DIV.
first_refresh = function(){
var time = new Date();
$("#first").html("First Div: "+time); //your code will go here
}
second_refresh = function(){
var time = new Date();
$("#second").html("Second Div: "+time); //your code will go here
}
third_refresh = function(){
var time = new Date();
$("#third").html("Third Div: "+time); //your code will go here
}
Then initialize the div's which can be refrehsed on an event. Below is the code snippet where I have defined three method which refreshes the content of three div's
And then register these functions with the respective div.
<script type="text/javascript">The output should look like something below
first_refresh = function(){
var time = new Date();
$("#first").html("First Div: "+time); //your code will go here
}
second_refresh = function(){
var time = new Date();
$("#second").html("Second Div: "+time); //your code will go here
}
third_refresh = function(){
var time = new Date();
$("#third").html("Third Div: "+time); //your code will go here
}
$(document).ready(function() {
$("#first").refresh('callback_method',first_refresh);
$("#second").refresh('callback_method',second_refresh);
$("#third").refresh('callback_method',third_refresh);
$("#refreshDiv").click(function() {
$("div").refresh();
});
});
</script>
Before refresh click:
After refresh click:
Great work, but i found a mistake (no offence, just helping =))
ReplyDeleteFound a typo:
callback_method : function( refersh_function ) {
Should be:
refresh_function
And inside the $.fn.refresh you haven't renamed the else function (jQuery.tooltip) so we know where to look when we don't call the plugin correctly.
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
Thanks for pointing it out.
ReplyDeleteI can use this plugin to refresh a div at a given time every day?
ReplyDeleteSorry my English, may I use this plugin to refresh a div at a given time every day ?
ReplyDeleteThis plugin can be used to refresh a div on an event. So that event can be anything button click, on text edit or on mouse over etc. In your case you need a timer task lets say you want your event to be fired at 10:00AM, in timer task check the time if its 10:00AM then fire the refresh method of the plugin. You may want to check "window.setTimeout('yourmethod()',timeInMilliseconds);"
ReplyDeleteto achieve this. I hope this solves your problem
This comment has been removed by a blog administrator.
ReplyDelete