www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 21 of 21

Thread: Auto refresh <DIV> using ajax

  1. #16
    Join Date
    Nov 2011
    Posts
    3
    OK, i figured out myself. Not very beautiful code but works
    Code:
    <script src="http://ajax.googleapis.com/ajax/
    libs/jquery/1.3.0/jquery.min.js"></script>
    <script>
    var auto_refresh = setInterval(
    function()
    {
    $('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
    }, 20000);
    $(document).ready(function(){
    $('#loaddiv').load('reload.php')
    })
    </script>
    
    <?php
    $ua = $_SERVER["HTTP_USER_AGENT"];
    $msie_6 = strpos($ua, 'MSIE 6.0') ? true : false;
    $msie_7 = strpos($ua, 'MSIE 7.0') ? true : false;
    $msie_8 = strpos($ua, 'MSIE 8.0') ? true : false;
    if ($msie_7) {
    include 'reload.php';
    }
    elseif ($msie_6) { 
    include 'reload.php';
    }
    elseif ($msie_8) {
    include 'reload.php';
    }
    else {
      echo '<div id="loaddiv"></div>';
      }
    ?>

  2. #17
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,277
    A variant without jQuery and without Ajax (total weigth 1.457 Ko) !
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>Random Values</title>
    <style type="text/css">
    body {margin:0;padding:0;font-family:Georgia;text-align:center;}
    #pge {display:block;width:500px;margin:3px auto;}
    .big{font-size:96px;font-weight:bold;}
    </style>
    </head>
    <body>
    	<div id="pge">
    	<div id="rsp" class="big"></div>
    </div>
    <script type="text/javascript">
    (function (){var cmp=0;
    	function snd(){var s;
    	// Remove preceding script
    	  s=document.getElementsByTagName("script");
    	  for (i=0;i<s.length;i++)
    			if (s[i] && s[i].getAttribute("src")!=null && s[i].getAttribute("src").indexOf('scriptWork.php')!=-1)
    	    	s[i].parentNode.removeChild(s[i]);
    		s=document.createElement('script');
    		s.type = 'text/javascript';
    		s.src = 'scriptWork.php?cmp='+cmp;
    		document.getElementsByTagName("head")[0].appendChild(s);
    		cmp++;
    		setTimeout(snd,1000);
    	}
    snd();	
    })();
    </script>
    </body>
    </html>
    We only load dynamically a javascript (scriptWork.php) buid with php
    PHP Code:
    <?php
    header
    ("Cache-Control: no-cache, must-revalidate");
    header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
    header("Content-Type:text/javascript;charset=utf-8");
     
        if (!empty(
    $_GET)) {
            
    $cmp=$_GET["cmp"];
        
    //    choose the text, images... content with cmp  
        

            exit(
    "document.getElementById('rsp').innerHTML=".$cmp.";");
    ?>
    A call to a callback function, in this last script, would be better no to mix the roles...

  3. #18
    Join Date
    Dec 2011
    Posts
    2

    fade in/blink/play sound

    Hi

    im using the the code from 007Julien and it works perfect for me. Im using the code on a livescore page, and i therefor wonder if its possible to make new entry fade in/blink/make a sound? I plan to us it when the new entry is a new goal.

    Anyone who can help??

    Quote Originally Posted by noufal View Post
    The code shown below doesn't work in IE7.please someone help me to find the answer.is there any mistakes in the code????????

  4. #19
    Join Date
    Feb 2012
    Posts
    1

    Post auto refresh parent page after execting ajax script

    please send script for auto refresh parent page after execting ajax script ??

  5. #20
    Join Date
    Mar 2013
    Posts
    3
    I have used your codes ro retrieve the data from a txt file. but I still have a problem. The follow is the homepage html codes:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>Ajax</title>
            <link rel="stylesheet" type="text/css" href="index_styling.css" />
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    		<script type="text/javascript">
    
    		    function Ajax() {
    		        var $http, $self = arguments.callee;
    
    		        if (window.XMLHttpRequest) {
    		            $http = new XMLHttpRequest();
    		        } else if (window.ActiveXObject) {
    		            try {
    		                $http = new ActiveXObject('Msxml2.XMLHTTP');
    		            } catch (e) {
    		                $http = new ActiveXObject('Microsoft.XMLHTTP');
    		            }
    		        }
    
    		        if ($http) {
    		            $http.onreadystatechange = function () {
    		                if (/4|^complete$/.test($http.readyState)) {
    
    		                    var JSONObject = JSON.parse($http.responseText);
    
    		                    document.getElementById('T1').innerHTML = "T1: " + JSONObject.T1;
    		                    document.getElementById('T2').innerHTML = "T2: " + JSONObject.T2;
    		                    document.getElementById('T3').innerHTML = "T3: " + JSONObject.T3;
    		                    document.getElementById('T4').innerHTML = "T4: " + JSONObject.T4;
    		                    document.getElementById('T5').innerHTML = "T5: " + JSONObject.T5;
    		                    document.getElementById('T6').innerHTML = "T6: " + JSONObject.T6;
    		                    document.getElementById('T7').innerHTML = "T7: " + JSONObject.T7;
    		                    document.getElementById('T8').innerHTML = "T8: " + JSONObject.T8;
    		                    document.getElementById('T9').innerHTML = "T9: " + JSONObject.T9;
    		                    document.getElementById('T10').innerHTML = "T10: " + JSONObject.T10;
    		                    document.getElementById('T11').innerHTML = "T11: " + JSONObject.T11;
    		                    document.getElementById('T12').innerHTML = "T12: " + JSONObject.T12;
    		                    document.getElementById('T13').innerHTML = "T13: " + JSONObject.T13;
    		                    document.getElementById('T14').innerHTML = "T14: " + JSONObject.T14;
    		                    document.getElementById('T15').innerHTML = "T15: " + JSONObject.T15;
    		                    document.getElementById('T16').innerHTML = "T16: " + JSONObject.T16;
    
    		                    setTimeout(function () { $self(); }, 5000);
    		                }
    		            };
    		            $http.open('GET', 'data.txt', true);
    		            $http.send(null);
    		        }
    
    		    }
    
    		</script>
    
    	</head>
    	<body>
    
    		<script type="text/javascript">
    		    setTimeout(function () { Ajax(); }, 5000);
    		</script>
    <div style="background:url(TYP400101_PNG.dat) no-repeat;width:1512px;height:794px">
    		<div id="T1"></div>
            <div id="T2"></div>
            <div id="T3"></div>
            <div id="T4"></div>
            <div id="T5"></div>
            <div id="T6"></div>
            <div id="T7"></div>
            <div id="T8"></div>
            <div id="T9"></div>
            <div id="T10"></div>
            <div id="T11"></div>
            <div id="T12"></div>
            <div id="T13"></div>
            <div id="T14"></div>
            <div id="T15"></div>
            <div id="T16"></div>
    </div>
    	</body>
    </html>
    the data.txt is as follow:
    Code:
    { "T1": "P1_", "T2": "P2_", "T3": "P3_", "T4": "P4_", "T5": "P5_", "T6": "P6_", "T7": "P7_", "T8": "P8_",
      "T9": "P9_", "T10": "P10_", "T11": "P11_", "T12": "P12_", "T13": "P13_", "T14": "P14_", "T15": "P15_", "T16": "P16_" }
    I use Win7.
    The above codes can only run in firefox and google chrome, the 16 temperature value will be refreshed every 5 second(see picture, it is running in firefox). but the codes can't in IE9 and it stops in IE9. I have also tried the codes in IE8(Computer is Vistasystem), but it stops, doesn't refresh.

    I checked the codes and tried many times, I find that:

    if I chang the
    Code:
    $http.open('GET', 'data.txt', true);
    like this:
    Code:
    $http.open('GET', 'data.txt' + '?' + new Date().getTime(), true);
    After adding the
    Code:
    + new Date().getTime()
    , the webpage can run in firefox, google chrome and IE9 three webbrowser now, but I don't understand why I need the
    Code:
    + '?' + new Date().getTime()
    for IE9, why?

  6. #21
    Join Date
    Mar 2013
    Posts
    3
    Quote Originally Posted by thraddash View Post
    Works in IE7, IE8, FF, Chrome, etc etc...

    index.htm
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>Ajax</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    		<script type="text/javascript">
    
    			function Ajax()
    			{
    				var
    					$http,
    					$self = arguments.callee;
    
    				if (window.XMLHttpRequest) {
    					$http = new XMLHttpRequest();
    				} else if (window.ActiveXObject) {
    					try {
    						$http = new ActiveXObject('Msxml2.XMLHTTP');
    					} catch(e) {
    						$http = new ActiveXObject('Microsoft.XMLHTTP');
    					}
    				}
    
    				if ($http) {
    					$http.onreadystatechange = function()
    					{
    						if (/4|^complete$/.test($http.readyState)) {
    							document.getElementById('ReloadThis').innerHTML = $http.responseText;
    							setTimeout(function(){$self();}, 10000);
    						}
    					};
    					$http.open('GET', 'random.php' + '?' + new Date().getTime(), true);
    					$http.send(null);
    				}
    
    			}
    
    		</script>
    
    	</head>
    	<body>
    
    		<script type="text/javascript">
    			setTimeout(function() {Ajax();}, 10000);
    		</script>
    		<div id="ReloadThis">Default text</div>
    
    	</body>
    </html>
    random.php
    PHP Code:
    <?php

        
    echo rand();
    Just change the url to a page relative to your domain.
    Hello thraddash, I want to ask you a question, please see my post in #20, thank you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles