Refresh particular div by jquery

First we will make a customize function called getRefresh() -

function getRefresh(){

$(“#auto”).load(“data.php”, ”, callback);

}

Here we have used load( url, [data][callback] ) ajax api. This api load HTML output  from a remote file (data.php) and inject it into the div (auto). Below we have created a callback function named callback() -

function callback(){

setTimeout(“getRefresh();”, 1000);

}

setTimeout() function is used  to call getRefresh() after a specified number of milliseconds (1000). Now we can add some jquery effect to realize that the div is refreshing automatically

function getRefresh(){

$(“#auto”).fadeIn(“slow”);

$(“#auto”).load(“data.php”, ”, callback);

}

function callback(){

$(“#auto”).fadeOut(“slow”);

setTimeout(“getRefresh();”, 1000);

}

After all below is out complete code both for jquery and server scripting language -

// for jquery html

<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script&gt;
<script type=”text/javascript”>
function getRefresh() {
$(“#auto”).fadeIn(“slow”);
$(“#auto”).load(“data.php”, ”, callback);
}

function callback() {
$(“#auto”).fadeOut(“slow”);
setTimeout(“getRefresh();”, 1000);
}
$(document).ready(getRefresh);
</script>
</head>
<body>
<h1>Auto refresh div by jquery</h1>
<div id=”auto”>
Random text goes here
</div>
</body>
</html>

// for php server scripting language

// data.php

<?php
mysql_connect(“localhost”, “root”, “”);
mysql_select_db(“dbname”);
$result = mysql_query(“select * from tblname”);
while ($row = mysql_fetch_object($result)) {
echo $row->username.’<br/>’;
}
mysql_free_result($result);
?>

About these ads

Tags: , , , , , , , , , , , , , , , , ,

5 Responses to “Refresh particular div by jquery”

  1. ashique Says:

    G8 post by @shahriat, really helpful!

  2. Unlowlmow Says:

    I’m new to this blog. Apologize for asking this though, but to OP…
    Do you know if this can be true;
    http://www.bluestickers.info/ringtones.php ?
    it came off http://ringtonecarrier.com
    Thanks :)

  3. ashique Says:

    please tell me again the name of the javascript function that can make rectangle to roundrectangle ?

  4. shahriat Says:

    It’s better if you use image to make any div round corner because javascript depend on browser and if anybody disable the javascript from their browser then your expected round corner will not be effected. Here is a tutorial from alistapart site and going through with this article you will get your answer :) http://www.alistapart.com/articles/customcorners/

  5. ashique Says:

    somel monay koro amar ekta input box asay html a otay ID dia search koray data antay hoy onno aro duita textbox manay html a input box a then ki koray ana possible ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: