David John Posted January 3, 2013 Share Posted January 3, 2013 Happy New Year! Here's my scenario: I need to return database values from a PHP script using AJAX to an HTML page, and for some reason it's not working. The js code: <script> function getXMLHttpRequestObject() { var ajax = null; if(window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } else if (window.ActiveXObject) { ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0'); } return ajax; } function showLocation() { var ajax = getXMLHttpRequestObject(); ajax.onreadystatechange = function() { if (ajax.readyState == 4) { if ( ( ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304 )) { var ajaxDisplay = document.getElementById("uslocations"); ajaxDisplay.value = ajax.responseText; } } } var state_lookup = document.getElementById("state_lookup").value; ajax.open("GET","ajax2.php?state="+state_lookup,true); ajax.send(null); }; </script> The HTML: <div data-role="page" id="something"> <div data-role="header"> <a href="#page" data-icon="arrow-l" data-iconpos="left">Back</a> <h1>Find a City</h1> </div> <div data-role="content"> <form> <select id="state_lookup" onchange="showLocation()"> <option value="">Select a state:</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> </select> </form> <div id="uslocations"> Here is the placeholder for content. </div> <div data-role="footer"> </div> </div> And finally, the PHP: <?php require ('Connections/oopConnect.php'); $state = $_GET['state']; $q = "SELECT schedule_id, state_id, address, city, state, zip FROM dbTable WHERE state = '$state' ORDER BY city ASC"; $r = $mysqli->query($q); $num = $r->num_rows; if($num > 0 ) { while ($row = $r->fetch_object()) { echo ' <div class="headline"> ' . $row->state . '</div><br><br> <ul data-role="listview"><br> <li><a href="http://mysite.com?address= ' . $row->address . ' "> <div class="address">' . $row->address . ' </div> <div class="city1"> ' . $row->city . ' </div> <div class="state"> ' . $row->state . ' </div> <div class="zip"> ' . $row->zip . '</div> <br> </li> </ul></a> '; } } else { echo '<p>Nothing to see here.'; } ?> Is there a syntactical issue with what I am doing? I tested the PHP, and it is properly returning data, but I am not getting the AJAX to work properly. Any help would be appreciated. Link to comment Share on other sites More sharing options...
DaveCoast Posted January 3, 2013 Share Posted January 3, 2013 What happens if you step through the Javascript in debug? Are you using FF Firebug? Any console errors? Do you see your XHR Get in the console? Link to comment Share on other sites More sharing options...
David John Posted January 3, 2013 Author Share Posted January 3, 2013 Hi, Dave. That was a great suggestion! It was outputting in the console, so I made one small change in the js. Instead of this: ajaxDisplay.value = ajax.responseText; I switched it to this: ajaxDisplay.innerHTML = ajax.responseText; And now it works! Thanks again for the idea. I'd also like to thank Larry for not only the "Modern Javascript" book, but the PHP books as well. I've learned a lot from them. Link to comment Share on other sites More sharing options...
DaveCoast Posted January 3, 2013 Share Posted January 3, 2013 Great, glad it's working and glad you mentioned the PHP books - I'm planning on heading to the Advanced OOP PHP book next - just about finished with this one. That does bring up an interesting question - is the value property only available with form fields? Does it just not make any sense to try and set the value property on a DIV element as tried above. I do remember reading about innerHTML risks vs innerText/textContent and some stuff regarding a separate text node (guess I'll have to review that chapter). Does anyone have a good explanation about how they approach setting various values? Link to comment Share on other sites More sharing options...
HartleySan Posted January 4, 2013 Share Posted January 4, 2013 DaveCoast, I think you are right in that the value property is only available for form elements. The innerHTML property can only be used for elements that have a start tag and an end tag. For that reason, the innerHTML property cannot be used with empty elements, which all form input elements are. It's worth noting that the textarea element has an end tag, but still requires the value property to get/set the text within it (there are exceptions to every rule). As for innerHTML vs. innerText, there is a big difference. innerText is used to get/set the text within an HTML element, whereas the innerHTML property is used to get/set the text and the HTML tags with an HTML element. Does that help at all? Link to comment Share on other sites More sharing options...
DaveCoast Posted January 4, 2013 Share Posted January 4, 2013 Yes it does help - much appreciated. Link to comment Share on other sites More sharing options...
David John Posted January 5, 2013 Author Share Posted January 5, 2013 As a follow-up, what's the best way to style the data that AJAX returns from the database? I know that jQuery has a command for refreshing an HTML element, but what is the equivalent in Javascript? Link to comment Share on other sites More sharing options...
HartleySan Posted January 5, 2013 Share Posted January 5, 2013 To answer your questions: 1) There is no "best" way. Your main choices are XML, JSON or a standard string. JSON seems to be the dominant choice these days for APIs, but for personal use (i.e., you're the only one that will ever manipulate the data), I generally prefer a standard string with custom-defined delimiters as necessary. 2) I'm not quite sure what you mean by "refresh an HTML element", but assuming you're talking about changing the content of an HTML element, the innerHTML property in vanilla JS should suffice. What jQuery method in particular are you talking about? 1 Link to comment Share on other sites More sharing options...
David John Posted January 6, 2013 Author Share Posted January 6, 2013 Hi, HartleySan. Sorry for being vague. To better phrase my question, I will refer you to this link: http://stackoverflow.com/questions/10148094/coldfusion-ajax-return-unstyled-content-with-jquerymobile Link to comment Share on other sites More sharing options...
HartleySan Posted January 7, 2013 Share Posted January 7, 2013 David John, thanks for clarifying your question. To answer your question, there are two basic ways to dynamically update the DOM with JS: 1) Use the innerHTML property (as discussed before). 2) Use DOM methods such as createElement, appendChild, etc. Those are the only two ways in vanilla JS. I imagine there are many different ways in jQuery, including the get and load methods referenced in the article you linked to. Because jQuery is coded entirely in JS though, regardless of how many methods jQuery has for updating the DOM, they all ultimately have to be using one of the two methods I mentioned above for regular JS. As a side note, the article linked in the SO answer you linked to was pretty bad. The guy's entire problem seemed related to a complete lack of understanding of HTML and CSS and he didn't even seem to be aware of that fact. 1 Link to comment Share on other sites More sharing options...
David John Posted January 11, 2013 Author Share Posted January 11, 2013 Thank you, HartleySan. Here's another thing I was wondering: In my PHP above, when the user clicks the link, he/she goes to http://mysite.com?address= ' . $row->address . ' Is it possible to pass in a PHP variable to js? (In other words, can $row->address be grabbed and used in a js variable?) var city_details = document.getElementById("php variable will go here").value; ajax.open("GET","ajax2.php?state="+city_details,true); Hopefully, that question is not too ambiguous. Link to comment Share on other sites More sharing options...
HartleySan Posted January 12, 2013 Share Posted January 12, 2013 Yes, you can pass PHP values to JS. Just be sure to use the proper PHP start and end tags with an echo statement. If you don't get what you want/expect, keep checking the HTML/JS generated by your PHP until you get what you want. Link to comment Share on other sites More sharing options...
David John Posted January 18, 2013 Author Share Posted January 18, 2013 Great, thanks. Link to comment Share on other sites More sharing options...
Recommended Posts