Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    utb
    utb is offline
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Loading files through AJAX/JS problem

    Hi,

    I am making a mashup, but I am having problems loading each file into the main page. I am using AJAX to call news.php, weather.php and images.php which all contain feed information. However the index page only loads the images.php whilst the ajax spinners are displayed in the news and weather div.

    Code:
    <script type="text/javascript">
            var limit = 5;
            
            loadImageRed = new Image();
            loadImageRed.src = "http://webforumz.com/images/ajax-loader-red.gif"; //Pre load ajax loader image
            
            loadImageClear = new Image();
            loadImageClear.src = "http://webforumz.com/images/ajax-loader-clear.gif"; //Pre load ajax loader image
            
            function loadFeeds() //Load the feeds when page loads
            {
                submitRq("Weather","weather.php");
                submitRq("Images","images.php");
            }
            
            function loadNews() //Loads the news
            {
                rqNews(); //Calls request news function
            }
            
            function rqNews() //Request news
            {
                xhr = new XMLHttpRequest();
                submission = "limit="+ limit;
                xhr.open("GET", "news.php?" + submission);
                xhr.onreadystatechange = processNews;
                xhr.send(null);
            }
            
            function submitRq(feed, url) //Gets the Weather and Images
            {
                xhr = new XMLHttpRequest();
                xhr.open("GET", url);
                var feed = "process"+feed;
                xhr.onreadystatechange = eval(feed);
                xhr.send(null);
            }
            
            function processNews()
            {
                document.getElementById("news").innerHTML = '<div align="center"><img src="http://webforumz.com/images/ajax-loader-red.gif" /></div>';
                if (xhr.readyState == 4)
                {
                    document.getElementById("news").innerHTML = xhr.responseText;
                }
            }
            
            function processWeather()
            {
                document.getElementById("weather").innerHTML = '<div align="center"><img src="http://webforumz.com/images/ajax-loader-clear.gif" /></div>';
                if (xhr.readyState == 4)
                {
                    document.getElementById("weather").innerHTML = xhr.responseText;
                }
            }
            
            function processImages()
            {
                document.getElementById("image").innerHTML = '<div align="center"><img src="http://webforumz.com/images/ajax-loader-clear.gif" /></div>';
                if (xhr.readyState == 4)
                {
                    document.getElementById("image").innerHTML = xhr.responseText;
                }
            }
            
            function addNews() //Add or remove news items
            {
                xhr = new XMLHttpRequest();
                submission = "limit="+ document.getElementById("id").value;
                xhr.open("GET", "news.php?" + submission);
                xhr.onreadystatechange = processNews;
                xhr.send(null);
            }        
        </script>
        
    </head>
    <body onload="loadFeeds()">
        <div id="wrapper">
            <div id="container">
                <div id="header"><img src="http://webforumz.com/images/banner.png" width="500" height="60" /></div>
                    <div id="content">
                        <div id="left_column">
                            <div class="title">News:<br /><br />
                                <script language="javascript">
                                    loadNews();
                                </script>
                                <div id="news">
                                </div>
                                <form action="#">
                                    Number Of News Items To Show: <input type="text" size="2" maxlength="2" id="id" value="5" onkeyup="addNews()"/>
                                </form>
                            </div>
                        </div>
                        <div id="right_column">
                            <div id="weather">
                            </div>
                            <br /><br />
                            <div id="image">
                            </div>          
                        </div>    
                        <div id="footer">
                            Copyright 2009
                        </div>
                    </div>        
                </div>
            </div>
        </div>
    </body>
    </html>
    Hope you can help, Thanks in advance!

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    You are using the same global variable for all your requests.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    No, it's worse than that.

    He is using a *LOCAL* variable for each request. And of course the local variable disappears when the function is finished.

    *********

    Second thoughts: Hmmm...if that were true, then how did he get a state change callback at all. Yeah, must be a single global.
    Last edited by Old Pedant; 03-20-2009 at 01:13 AM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    How about this code, instead:
    Code:
    <script type="text/javascript">
            var limit = 5;
    
            // global to hold the XMLHttpRequest objects:
            var xmlObjs = new Array( );
            
            function loadFeeds() //Load the feeds when page loads
            {
                submitRq("weather", processWeather,"weather.php", "clear");
                submitRq("image", processImages,"images.php", "clear");
                submitRq("news", processNews,"news.php?limit=" + limit, "red");
            }
            
            function submitRq(which, processer, url, img)
            {
                document.getElementById(which).innerHTML = 
                  '<div align="center"><img src="http://webforumz.com/images/ajax-loader-'+img+'.gif" /></div>';
    
                xmlObjs[which] = new XMLHttpRequest();
    
                var xhr = xmlObjs[which];
                xhr.open("GET", url);
                xhr.onreadystatechange = processor
                xhr.send(null);
            }
            
            function processNews() { process("news"); }
            function processImages() { process("image"); }
            function processWeather() { process("weather"); }
    
            function process(which)
            {
                var xhr = xmlObjs[which];
                if (xhr.readyState == 4)
                {
                    document.getElementById(which).innerHTML = xhr.responseText;
                }
            }
    </script>
    ...
    <body onLoad="loadFeeds( )">

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    This part seems silly to me:
    Code:
                document.getElementById(which).innerHTML = 
                  '<div align="center"><img src="http://webforumz.com/images/ajax-loader-'+img+'.gif" /></div>';
    Why no just START OFF, with an image in each of those divs??? Why load it dynamically?

    Oh...and I did pull out the preload of the images, as it was useless. The code was almost surely plunking the images into the <DIV>s before the preload was even finished.


  •  

    Posting Permissions

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