Jump to content
Larry Ullman's Book Forums

Problems With Ajax


Recommended Posts

Hello,

 

I am having a hard time with ajax. All I am trying to do is retrieve a list from my database via php (I am very proficient with php) but I when I click the links that are suppose to call the function with ajax in them nothing happens. Firebug is not giving me any errors either so I am confused. Here is the code that I am using the html first then the javascript:

 

HTML - where I want the list printed -

<div id="reviewsList">

                        <div id="staterr">

                            

                        </div>

                        <div id="statehr">

                        

                        </div>

                    </div>

Javascript - I have included the utilities.js on the page

var reviewsList = U.$('reviewsList');

var staterr = U.$('staterr');

var statehr= U.$('statehr');
 
function openRR(e) {



        // Get the event object:

        if (typeof e == 'undefined') e = window.event;



        // Add the data attribute value to a variable

        var stateRr = U.$('rr').getAttribute("data-state_rr");

        

        // Hide the reviews div

        reviews.style.visibility = 'hidden';

        

        // Make sure the staterr div is not already open

        if (reviewsList.style.visibility == 'hidden')  {

            

            // Show the state div

            reviewsList.style.visibility = 'visible';

            

            // Create the AJax object, if that hasn't yet been done:

            if (!ajax) {

                ajax = U.getXMLHttpRequestObject();

                ajax.onreadystatechange = handleAjaxResponse;

            }       



            // Perform an Ajax request:

            ajax.open('GET', 'ajax/stateList.php?rrid=' + stateRr, false);

            ajax.send(null);

        

        }

        // Prevent the link's execution:

        if (e.preventDefault) {

            e.preventDefault();

        } else {

            e.returnValue = false;

        }

        return false;

    } // End of the openRR() function.
 
// Function called when the getBidsAjax call is made:

function handleAjaxResponse() {

    

        // Check the readyState:

        if (ajax.readyState == 4) {



            // Check the status code:

            if ( (ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304) ) {



                // Parse the response:

                var stateReviews = JSON.parse(ajax.responseText);



                // If data was returned, update the table:

                if (stateReviews) {

                    

                    var links = '<ul>';

                    

                    // Loop through the data:

                    for (var i = 0, count = stateReviews.length; i < count; i++) {

    

                        links +='<li><a href="http://www.top-ten-travel-list.com/' + stateReviews[i].link +'" >' + stateReviews[i].name + '</a></li>';

    

                    } // End of FOR loop.

                    

                    links +='</ul>';

                    
                    // Print the list
                    if (stateHr) {

                        document.U.$('statehr').innerHTML = links;

                    }else{

                        document.U.$('staterr').innerHTML = links;

                    }

               

                } // End of stateReviews IF.



            } // End of status IF.



        } // End of readyState IF.

   

    } // End of handleGetBidsAjaxResponse() function.    



window.onload = function() {

        'use strict';

        

        U.addEvent(U.$('rr'), 'click', openRR);

        U.addEvent(U.$('hr'), 'click', openHR);

        

    };
 
Link to comment
Share on other sites

I would maybe write a second test script that boils the Ajax request down to its basics, and then build everything up from there. By doing that, you can confirm why your Ajax request is or isn't working.

Once you have just the Ajax request working, then I'd add everything back again.

 

For example, I'd first make sure that the value you are sending to the PHP script via Ajax (i.e., stateRr) is in fact what you expect it to be. Simply alert the value out to the screen right before the open method call to make sure it's what you want. In addition, you have staterr and stateRr variables in our code. That seems a bit confusing to me. You might want to mix things up a bit more.

 

Secondly, I'd run the encodeURIComponent function on all data being send to the PHP script. As such, I'd change the following:

 



ajax.open('GET', 'ajax/stateList.php?rrid=' + stateRr, false);


 

To:

 



ajax.open('GET', 'ajax/stateList.php?rrid=' + encodeURIComponent(stateRr), false);


 

Thirdly, I wouldn't set the third argument of the open method to false, as that will cause your entire page to stop and wait for the Ajax request to receive a response. There are some cases where synchronous Ajax requests are essential, but I can't imagine this being one of them.

 

Next, as I mentioned above, I would make a real, real simply Ajax request in a second script, and see what happens. For example, I might do the following:

 



ajax.open('get', 'ajax/stateList.php?rrid=' + encodeURIComponent(stateRr));


ajax.onreadystatechange = function () {
  
  if (ajax.readyState === 4 && ajax.status === 200) {
    
    console.log(ajax.responseText); // Must have a browser that supports the console. I prefer Chrome.
    
  }
  
};


ajax.send(null);


 

Try doing that and see where it gets you. If you still can't figure out the problem, please come back here with more info, and we'll try to help.

Thanks.

  • Upvote 1
Link to comment
Share on other sites

 Share

×
×
  • Create New...