[SOLVED] Multiple divs changed within one response?

[sKunKbad]

I have some standard AJAX code, straight out of the ajaxfreaks tutorial "Simple Introduction to AJAX and XMLHttpRequest", but the problem for me is, my script that runs MySQL queries returns content that shouldn't be in the same div. I need the results of two seperate MySQL queries to populate two seperate divs that are not connected. I found an example that parses XML for the seperation of what would populate the divs, but I tried to tweak it to work with what I am doing, and had no luck. The article that example is in is "Ajax and XML: Five common Ajax patterns". It would be great if there was a tutorial on how to do this, but there isn't that I can find anywhere online. So, I'm hoping for some help here. Here is my javascript that populates only one div:

	// Set path to PHP script
	var phpscript = 'tipselector.php5';
	function createRequestObject() {
		var req;
		if(window.XMLHttpRequest){
			// Firefox, Safari, Opera...
			req = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			// Internet Explorer 5+
			req = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			// There is an error creating the object,
			// just as an old browser is being used.
			alert('There was a problem creating the XMLHttpRequest object');
		}
		return req;
	}
	// Make the XMLHttpRequest object
	var http = createRequestObject();
	function sendRequestGet(act) {
		// Open PHP script for requests
		http.open('get', phpscript+'?tip='+act);
		http.onreadystatechange = handleResponseGet;
		http.send(null);
	}
	function handleResponseGet() {
		if(http.readyState == 4 && http.status == 200){
			// Text returned from PHP script
			var response = http.responseText;
			if(response) {
				// Update main-container div content
				document.getElementById("main-container").innerHTML = response;
			}
		}
	}

 

and here are the MySQL queries in the tipselector.php5 script:

<?php
$tipPage = $_GET['tip'];
$picQuery = mysql_query("SELECT * FROM tipsntricks WHERE tipNum = '$tipPage'");
$picRow = mysql_fetch_array($picQuery);
extract($picRow);
echo "$tipPic";
?>
<?php
$tipPage = $_GET['tip'];
$thisTip = mysql_query("SELECT * FROM tipsntricks WHERE tipNum = '$tipPage'");
$tipRow = mysql_fetch_array($thisTip);
extract($tipRow);
echo "<h2>$tipTitle</h2>";
echo "$tipCode";
?>

Once again, the results of these two queries need to populate two completely seperate divs. Any help is appreciated.

[sKunKbad]

I was able to solve my problem with javascript's built in function "split". I simply divided my response with "|js-split-here|", and replaced what was inside the divs with the following code modification to my handleResponseGet function:

	function handleResponseGet() {
		if(http.readyState == 4 && http.status == 200){
			// Text returned from PHP script
			var response = http.responseText;
			var myresponse_array=response.split("|js-split-here|");
			//if(response) {
				// Update main-container div content
				document.getElementById("left-side").innerHTML = myresponse_array[0];
				document.getElementById("tippic").innerHTML = myresponse_array[1];
			//}
		}
	}

Here is the MySQL queries divided by "|js-split-here|":

<?php
$tipPage = $_GET['tip'];
$thisTip = mysql_query("SELECT * FROM tipsntricks WHERE tipNum = '$tipPage'");
$tipRow = mysql_fetch_array($thisTip);
extract($tipRow);
echo "<h2>$tipTitle</h2>\n";
echo "\t\t\t\t\t\t\t\t$tipCode\n";
?>
|js-split-here|
<?php
$tipPage = $_GET['tip'];
$picQuery = mysql_query("SELECT * FROM tipsntricks WHERE tipNum = '$tipPage'");
$picRow = mysql_fetch_array($picQuery);
extract($picRow);
echo "$tipPic\n";
?>

Everything works perfectly.