Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    How do I populate more than one div

    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...

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    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

  • Users who have thanked oesxyl for this post:

    John Benson (11-21-2008)

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by John Benson View Post
    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
    Last edited by oesxyl; 11-21-2008 at 05:03 PM.

  • Users who have thanked oesxyl for this post:

    John Benson (11-21-2008)

  • #5
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks so much oesxyl you have gave me lots of food for thought and you've been a big help!

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by John Benson View Post
    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

  • #7
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    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

  • Users who have thanked oesxyl for this post:

    John Benson (11-25-2008)

  • #9
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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
    Last edited by John Benson; 11-29-2008 at 06:55 PM. Reason: oops forgot a line


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •