suttercain Posted November 6, 2008 Share Posted November 6, 2008 Hi everyone, I am currently making an AJAX request that queries the MySQL database and loads the content into a DIV. My question is how do I load additional content into a seperate DIV based on the same original request? Here is a sample but I was unable to emulate: http://www.seopher.com/demos/ajax-multi-request/ Here is my code: HTML <a href="java script:showUser('<?php echo $row['executive_order'];?>')"><?php echo $row['executive_order']; ?> <div id="content1>Content Loads Here</div> <div id="content2>Want content to also load here</div> JavaScript // JavaScript Document var xmlHttp function showUser(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="select.php" url=url+"?q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function stateChanged() { if(xmlHttp.readyState == 0) { document.getElementById('content1').innerHTML = "Sending Request..."; } if(xmlHttp.readyState == 1) { document.getElementById('content1').innerHTML = "Loading Response..."; } if(xmlHttp.readyState == 2) { document.getElementById('content1').innerHTML = "Response Loaded..."; } if(xmlHttp.readyState == 3) { document.getElementById('content1').innerHTML = "Response Ready..."; } if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("content1").innerHTML=xmlHttp.responseText } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } PHP <?php if (isset($_GET['q'])) { require('../../../../vdb/includes/connection.php'); $q=$_GET["q"]; $statement = "SELECT * FROM device INNER JOIN device_eo ON ( device.device_id = device_eo.device_id ) INNER JOIN eo ON ( device_eo.executive_order = eo.executive_order ) INNER JOIN eo_engine_family ON ( eo.executive_order = eo_engine_family.executive_order ) INNER JOIN engine_family ON ( eo_engine_family.engine_family_name = engine_family.engine_family_name ) WHERE eo.executive_order = '".$q."' ORDER BY engine_family.engine_year, engine_family.engine_mfr, engine_family.engine_family_name"; $results = mysql_query($statement) or die(mysql_error()); while ($row = mysql_fetch_array($results)) { echo $row['engine_family_name']. "<br />"; } } ?> Any help would be great. Thanks in advance. -SC Quote Link to comment Share on other sites More sharing options...
rhodesa Posted November 6, 2008 Share Posted November 6, 2008 The page you referenced only makes one AJAX call when you click the link. But, What it returns is the following string: pigeon###RAWR###dog###RAWR###kitten###RAWR### I assume they then split on '###' with JavaScript and assign it to the proper DIVs. Does that help? Quote Link to comment Share on other sites More sharing options...
suttercain Posted November 6, 2008 Author Share Posted November 6, 2008 Thanks for the reply. Yeah what he did in his tuorial, http://www.seopher.com/articles/multiple_ajax_responses_with_1_request_mootools_and_php, was to do a ginle query and use an array. What I would like to do is similar... but different. I have one php file that performs a mysql query. I would also like a separate php file to perform a separate query, using the same value from the original link. So the user clicks on a link the first PHP file is queried and Loaded into DIV1. At the same time, based on that same click, the second PHP file is queried and that content is loaded into DIV2. Hope I am making sense. It's hard for me to spit it out, sorry. SC Quote Link to comment Share on other sites More sharing options...
rhodesa Posted November 6, 2008 Share Posted November 6, 2008 i would use jQuery...it will make your life a lot easier...at the top of the page, in the <head> tag, put: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> then, change your JS to: // JavaScript Document function showUser(str) { $('#content1').load("select.php?q="+str); $('#content2').load("select2.php?q="+str); } Quote Link to comment Share on other sites More sharing options...
suttercain Posted November 6, 2008 Author Share Posted November 6, 2008 Fracking awesome! I was nervous in would conflict with the other framework I was using EXTjs, but it worked like a charm. Thanks! Quote Link to comment Share on other sites More sharing options...
suttercain Posted November 6, 2008 Author Share Posted November 6, 2008 One more question.... without the readystate code, how does one specify 'loading' or an AJAX loading image with jquery while the content is being fetched? Quote Link to comment Share on other sites More sharing options...
rhodesa Posted November 6, 2008 Share Posted November 6, 2008 Here is the doc with all the info on the AJAX calls: http://docs.jquery.com/Ajax You can specify a callback function that gets executed when it's done loading. So, just display the loading image before the AJAX call, then hide it with the callback function. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.