How do I populate more than one div

John Benson · 11-20-2008, 09:27 PM

I am using text box with javascript, php and mysql to update a div and I can update the first div but the rest of the div's are left as they were
I know I need to loop thru the DOM but I dont know to set it up

here is what I have

Code:

<html>
<body>

<script language="javascript" type="text/javascript">
function ajaxFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	try{
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Function to receive data sent from the server and update div's
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('citystate');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	var zipcode = document.getElementById('zipcode').value;
	var queryString = "?zipcode=" + zipcode ;
	ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
	ajaxRequest.send(null); 
}

</script>
<form name='myForm'>
Zip Code: <input type='text' id='zipcode' /> <br />
<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
<div id='citystate'>Your result will display here</div>
</body>
<div id='citystate'>Your result will display here</div>
</body>
</html>

the above code works but It only updates the first div and leaves the rest as they were

I'm sure that this is where I need to loop threw the DOM

Code:

        ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('citystate');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}

Because I can use a unique ID like citystate1, citystate2 ... which works but Idealy Id like to know how to do it the right way that means looping and I don't know what I'm missing when I try...

oesxyl · 11-21-2008, 05:27 AM

Code:

Zip Code: <input type='text' id='zipcode' /> <br />
<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
<div id='citystate'>Your result will display here</div>
</body>
<div id='citystate'>Your result will display here</div>
</body>
</html>

is invalid html, id must be uniq.

Code:

        ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('citystate');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}

from js point of view in onreadystatechange you use only first id.

regards

John Benson · 11-21-2008, 03:19 PM

Ok I'm new to OOP and it makes sense that an ID should be unique but if I were to change ID to class could I use the above code to update the elements that have a class of citystate? or Is there another structure that I should use like span? and How would I need to change the above code?

oesxyl · 11-21-2008, 03:59 PM

Quote:

Originally Posted by John Benson

Ok I'm new to OOP and it makes sense that an ID should be unique but if I were to change ID to class could I use the above code to update the elements that have a class of citystate? or Is there another structure that I should use like span? and How would I need to change the above code?

if you use only div which you want to fill with data you don't need to add a class attribute for this pourpuse. You can use getElementsByTagName.
a sketch, not sure about syntax:

Code:

// get the form using a id, as in your code
var myform = document.getElementById(formid);
// get a array of all divs inside myform
var divarray = myform.getElementsByTagName('div');
// fill the divs
for(i=0; i< divarray.length;i++){
  divarray[i].innerHTML = yourdata;
}

probably a better method if you use responseText is to build the divs in php and insert/append the response inside the form.

Code:

// get the form using a id, as in your code
var myform = document.getElementById(formid);
// insert all divs inside myform
myform.innerHTML = ajax.responseText + additional_fixed_code;

here additional_fixed_code is code for submit button, other controls, and so on.

take care to have valid (x)html else will be a pain to find why didn't work( remove last < /body> from your page).

Edit: first time you insert this could work:

Code:

var additional_fixed_code = myform.innerHTML; myform.innerHTML = ajax.responseText + additional_fixed_code;

second time you must get rid of divs

best regards

John Benson · 11-21-2008, 04:19 PM

Thanks so much oesxyl you have gave me lots of food for thought and you've been a big help!

oesxyl · 11-21-2008, 04:25 PM

Quote:

Originally Posted by John Benson

Thanks so much oesxyl you have gave me lots of food for thought and you've been a big help!

you are welcome.

post problem if/when you have I will try to help.

best regards

John Benson · 11-23-2008, 04:01 PM

OH MY My I just found a

library called Jquery First glance looks Vary useful Ill give ya an update on how I solved it as soon as I figure it out but it looks like I can update all objects with a just a couple lines of code!! we will see...

currently I'm using a unique identifier for each div to update as in.

Code:

    ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('citystate');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
			var ajaxDisplay = document.getElementById('citystate1');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
			var ajaxDisplay = document.getElementById('citystate2');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
			var ajaxDisplay = document.getElementById('citystate3');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
			var ajaxDisplay = document.getElementById('citystate4');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
			var ajaxDisplay = document.getElementById('citystate5');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
			var ajaxDisplay = document.getElementById('citystate6');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}

looks horrible but it works!! I'm also thinking of changing from updating divs to placing spans where I want the city and state to appear.

I'm also looking at building sections server side and loading them on request.

oesxyl · 11-23-2008, 04:14 PM

you can write it shorter with some changes:
- rename the id citystate as citystate0

Code:

    ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
                        var i, ajaxDisplay;
                        for(i = 0; i < 6; i++){
			   ajaxDisplay = document.getElementById('citystate' + i);
			   ajaxDisplay.innerHTML = ajaxRequest.responseText;
                        }
		}
	}

I don't know if this works like you want. All divs have same content?

I never use jquery but if you are interested in using a framework look for it or others.

best regards

John Benson · 11-29-2008, 05:52 PM

OK it took me long enough to figure it out ... to do it in the Jquery example I was looking at they used an array loaded by looping thru Dom elements looking for all elements that have XX attributes and then looped thru those updating as they went so what I saw was the array that was passed and the final loop

It works nice but its a little to complicated for me right now Ill keep it sweet and simple and use the for next loop. for now

Oh and yes all the divs will have the same content so your suggestion is dead on