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 11 of 11
  1. #1
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts

    Running multiple AJAX operations on one page

    Hi all. I'm trying to get a hang of AJAX (I know, I know, 3 years late ). I have been reading the tutorial at Tizag, and I get the basic points. However, my question is, what if I want to run several different operations with AJAX on one page. For instance, if I want to check for username availibility, and also validate another field using AJAX, do I need to add this code:

    Code:
    <script language="javascript" type="text/javascript">
    <!-- 
    //Browser Support Code
    function ajaxFunction(){
    	var ajaxRequest;  // The variable that makes Ajax possible!
    	
    	try{
    		// Opera 8.0+, Firefox, Safari
    		ajaxRequest = new XMLHttpRequest();
    	} catch (e){
    		// Internet Explorer Browsers
    		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;
    			}
    		}
    	}
    for each instance of AJAX?



    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    You add this function once and for each ajax call you just call it.
    var httpObj = ajaxFunction();
    httpPbj.open("Post",you url, true);
    httpObj.send(your params) (or it can be null);

    and then you say httpObj.onReadyState = myFn;

    This code I have just pasted here should be repeated not the above function.

  • Users who have thanked ckeyrouz for this post:

    whizard (07-09-2009)

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,346
    Thanks
    11
    Thanked 589 Times in 570 Posts
    it's a private varibale, so it's ok to re-use ajaxFunction again and again.

    here's a shorter/faster version:

    Code:
    function ajaxFunction(){
      return  window.XMLHttpRequest  ?
       new window.XMLHttpRequest : 
       new ActiveXObject("Microsoft.XMLHTTP");
    }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    whizard (07-09-2009)

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    THanks guys for taking the time to reply!

    In other words, rnd_me, you're saying that I can replace the code I posted above with your code, and ckeyrouz, you're saying that I write a second function with the code you posted, which will call the first function, and then I call the second function whenever I need to check a username.

    If I'm wrong, set me straight, but I'm gonna mess around with that and try to get it right. Once again, thanks so much for your help!
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Hi again. I have implmented what you gave me, and I think everything is going OK except for one thing: the script never writes the httpObj.responseText.

    The site is availible here: http://vehiclemanager.freehostia.com/addUser.php

    Through Firebug, I can see that the script has received a response from the php script (ROOT/ajax/php/checkUsername.php) but the script doesn't seem to want to actually write it to the span I have designated. Below is the code I am using:

    Code:
    <div class="formBundle">
    <label for="username">
    Your desired username: 
    </label>
    <input type="text" onBlur="javascript:checkUsername('username','ajaxResponse');" name="username" id="username" />
    <span id="ajaxResponse"></span>
    </div>
    Code:
    function ajaxFunction()
    {
    	return  window.XMLHttpRequest  ?
    	new window.XMLHttpRequest : 
    	new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    
    function checkUsername(source,target)
    {
    	var httpObj = ajaxFunction();
    	
    	var query = "ajax/php/checkUsername.php?username=" + document.getElementById(source).value;
    	
    	//document.getElementById(target).textContent = query;
    	
    	httpObj.open("POST",query, true);
    	httpObj.send(null);
    	
    	httpObj.onReadyStateChange = function(target)
    	{
    		if(httpObj.readyState == 4)
    		{
    			document.getElementById(target).textContent = httpObj.responseText;
    		}
    	}
    }
    I would appreciate it if you glanced at this and could let me know what's up. Thanks!

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #6
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Try this :
    document.getElementById(target).innerHTML = httpObj.responseText;

    instead of
    document.getElementById(target).textContent = httpObj.responseText;


    I have changed the textContent to innerHTML

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,346
    Thanks
    11
    Thanked 589 Times in 570 Posts
    Quote Originally Posted by whizard View Post

    I would appreciate it if you glanced at this and could let me know what's up. Thanks!

    Dan
    Code:
    httpObj.onReadyStateChange = function(target)
    you were close, just kill the red text, or target will not be what you expect...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #8
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    I took out the "target" parameter, and I changed "textContent" to "innerHTML", but still no go. This is frustrating me, because I think I am close, but I'm just doing something wrong!

    X|

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #9
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Just to test, I changed

    document.getElementById(target).innerHTML = httpObj.responseText;

    to

    document.getElementById('ajaxResponse').innerHTML = httpObj.responseText;

    (hard-coded the id of the span in, instead of using a variable)

    and it still won't write the responseText. This is weird.

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,346
    Thanks
    11
    Thanked 589 Times in 570 Posts
    Quote Originally Posted by whizard View Post
    Just to test, I changed
    ....
    and it still won't write the responseText. This is weird.
    Dan

    onreadystatechange, not onReadyStateChange ...

    i can't believe i missed this the first time.

    tested in FF3, works after change...

    cheers!
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #11
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Thank you, thank you, thank you! You have restored my faith in myself a little

    But really, thanks so much to both of you! People like you are what make this forum so great!

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION


  •  

    Posting Permissions

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