mccoy81 Posted June 30, 2013 Share Posted June 30, 2013 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 More sharing options...
HartleySan Posted June 30, 2013 Share Posted June 30, 2013 Where are 'rr' and 'hr' in your HTML? Link to comment Share on other sites More sharing options...
mccoy81 Posted June 30, 2013 Author Share Posted June 30, 2013 Where are 'rr' and 'hr' in your HTML? Those are the ids of the links. Sorry forgot to post them Link to comment Share on other sites More sharing options...
HartleySan Posted June 30, 2013 Share Posted June 30, 2013 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts