Tuesday, October 11, 2011

Auto refresh a HTML tag with jquery

NOTE - due to blogpost issue i have replaced angle brackets (< >) with closing brackets ({}) before using it please change accordingly .


include inside Head Tag as
{script language="javascript" type="text/javascript" src="js/jquery.js"} {/script}

Now inside body tag do the scripting with jquery (before using the output)
{body}
{script type="text/javascript"}
var auto_refresh = setInterval(
function ()
{
$('#MYLINK').load('OUTPUT.php?').fadeIn("fastest");
}, 180000); // refresh every 180000 milliseconds

{/script}


Now lets use the output here ....

{div class="column-small"}
{div class="portlet"}
{div class="portlet-header"}Link Videos.{/div}
{div class="portlet-content"}{div id="MYLINK"}{img src="../images/load.gif" style="height:19px; width:35px; margin:0 0 0 0;" /}
{script type="text/javascript"}$('#MYLINK').load('OUTPUT.php?').fadeIn("fastest"); {/script}
{/div}{/div}
{/div}

{/div}

{/body}


Now lets use the output here ....



just explain i am using output.php as
{?php
// just a random number for example
// i can use a image or anything using echo. .thus i can show a warning etc
echo rnd(199);
?}


with bold {img src="../images/load.gif" style="height:19px; width:35px; margin:0 0 0 0;" /} i am loading an image in background....so the end user see something is working... (just to manage delay with loading image).

No comments:

Post a Comment