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
    Sep 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    AJAX code confusion

    Hello everyone,
    I bought a book and began learning how to use AJAX and my friend gave me a practice assignment where I have to enter values into one div and perform an AJAX get request to a website she gave me to receive the information in the right div. Maybe I am doing the AJAX get request incorrectly following this book. If anyone could point me in the right direction I would appreciate it. This is not for school, and I have no experience in web scripting languages but willing to learn! Just give my javascript a look and maybe you can help me out. I am not sure yet on how to display the information after it has been received but I know for sure I do not want to load another page when hitting the submit button!

    Also, I have a weird way of lining up my code from programming in C++ for about 4 years now. I have developed it over time and sorry if it is hard to understand. If so, then I can format it a proper way and re-post. Also, I am trying to learn how to use the AJAX GET method, not the POST method. And I want to return the information in JSON.


    Code:
    <html>
    
            <head>
    		
                    <style type="text/css">
                            #header {
                                    text-align: left;
                            }
                            #wrapper {
    								
                                    margin:bottom;
                                    width:100%;
    								
                            }
                            
                            #sub-left {
                                    float:left;
    								width:225px;
    								height:215px;
    								border:1px solid black; 
    								position: relative;
    								text-align: left;
                            }
                            #sub-right {
    								padding-left: 66px;
                                    float:left;
    								width:60%;
    								height:45%;
    								border:1px solid black; 
    								position: relative;
    								text-align: left;
    								
                            }
    						#sub-leftmost {
    								
                                    float:left;
    								width:10%;
    								height:100%;
    								position: relative;
    								text-align: left;
                            }
    						
                    </style>
    
            </head>
    		
            <body>
    
    	<div id="wrapper">
                            
                                    <div id="sub-leftmost">
                                    
    								
                                    </div>
    								</div>
    
    
                    <div id="wrapper">
                            <div id="header"><h1>Quiz</h1></div>
                                    <div id="sub-left">
    								<form name = 'testForm'>
    								<FONT COLOR="CC3300",font size="5">&nbsp;&nbsp;&nbsp;<b>User Info</b></FONT>
    								<br />
    
    								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Full Name: <br /><center><input type="text"  size="25" id = "namebox" /></center>
    								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email Address: <br /><center><input type="text"  size="25" id = "ebox" /></center>
    								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address: <br /><center><input type="text"  size="25" id = "addbox" /></center>
    								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Phone Number: <br /><center><input type="text"  size="25" id = "phnbox" />
    								<a href=”#” onclick=”submitFormWithAjax();”>Finished!</a>
    								</form>
    								
                                    </div>
                                    </div>
    								<div id="wrapper">
                                    <div id="sub-right">
    								
    								
    								<script type=”text/javascript”>
    		// function create GetXmlHttpObject
    		function GetXmlHttpObject(){
    		if (window.XMLHttpRequest){
    		// code for IE7+, Firefox, Chrome, Opera, Safari
    		return new XMLHttpRequest();
    		}
    		if (window.ActiveXObject){
    		// code for IE6, IE5
    		return new ActiveXObject(“Microsoft.XMLHTTP”);
    		}
    		return null;
    		}
    				
    		function submitFormWithAjax(){
    		var myAjaxGetrequest = new GetXmlHttpObject();
    
    		var t2lName=document.testForm.namebox.value;
    		var t2lEmail=document.testForm.ebox.value;
    		var t2lAddress=document.testForm.addbox.value;
    		var t2lPhone=document.testForm.phnbox.value;
    
    		var parameters=”name=”+t2lName+”&email=”+t2lEmail+”&address=”+t2lAddress+”&phone=”+t2lPhone;
    
    		myAjaxGetrequest.open(“GET”, “website to send and receive from”, true);
    		myAjaxGetrequest.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
    		myAjaxGetrequest.send(parameters);
    		myAjaxGetrequest.onreadystatechange=function(){
    		if (myAjaxGetrequest.readyState==4){
    		if(myAjaxGetrequest.status==200 || window.location.href.indexOf("http")==-1){
    		document.getElementById("result").innerHTML=myAjaxGetrequest.responseText
    		document.getElementById(“testForm”).style.display = “none”;
    		}
    		else    {
    		document.getElementById(“testForm”).innerHTML=”An error has occured making the request”;
    		}
    		}
    		}
    		}	
    	    
    		
    		
    		</script>
    								
    								
                    </div>
    	</div>
                            
                    
            </body>
    		
    		</html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    The biggest problem there is that you appear to be using a word processor to write your code, and so you are *NOT* getting ordinary " characters.

    Look at the difference:
    Yours: “POST”
    Correct: "POST"

    Yours: ”name=”
    Correct: "name="

    JavaScript will *NOT* accept those word processing quote marks!

    NEVER use a word processor for writing code! Use an editor designed for coding.

    *******

    And then you are mixing up GET and POST.

    First of all, you need to escape the values of all the parameters, no matter if you are using GET or POST:
    Code:
    var parameters = "name=" + encodeURIComponent(t2lName) 
                   + "&email=" +encodeURIComponent(t2lEmail)
                   + "&address=" + encodeURIComponent(t2lAddress)
                   + "&phone=" +encodeURIComponent(t2lPhone);
    And then do EITHER of these:
    Code:
    myAjaxGetrequest.open("POST", “http://xxx.zzz.com/page.zzz", true);
    myAjaxGetrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    myAjaxGetrequest.send(parameters);
    or
    Code:
    myAjaxGetrequest.open("GET", "http://xxx.zzz.com/page.zzz?" + parameters, true);
    // do not set encoding
    myAjaxGetrequest.send( );
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    regarding confusion

    I changed up my code till it was like yours. I am not sure why it posted like it did, but I use notepad++ in html format for editing. If this is incorrect please let me know. I think that when I posted it, it changed how things look, because my quotation marks are the same as yours. I do not want my submit button to open a new page, I want it to synchronously update the div on the right side to display the information. Thanks for the help that you provided me with though, I am closer now than before. I posted my updated code on pastebin.com at the below link (it looks as you described it should, yet it still doesn't look like it should but it is readable);

    On pastebin: http://pastebin.com/2WNrJJaM

    And, the same code here;

    Code:
    <html>
    
            <head>
    		
                    <style type="text/css">
                            #header {
                                    text-align: left;
                            }
                            #wrapper {
    								
                                    margin:bottom;
                                    width:100%;
    								
                            }
                            
                            #sub-left {
                                    float:left;
    			        width:225px;
    				height:215px;
    				border:1px solid black; 
    				position: relative;
    				text-align: left;
                            }
                            #sub-right {
    				padding-left: 52px;
                                    float:left;
    				width:60%;
    				height:45%;
    				border:1px solid black; 
    				position: relative;
    				text-align: left;
    								
                            }
    			#sub-leftmost {
    								
                                    float:left;
    				width:10%;
    				height:100%;
    				position: relative;
    				text-align: left;
                            }
    						
                    </style>
    				
    				
    		<script type=”text/javascript”>
    		// function create GetXmlHttpObject
    		function GetXmlHttpObject(){
    		if (window.XMLHttpRequest){
    		// code for IE7+, Firefox, Chrome, Opera, Safari
    		return new XMLHttpRequest();
    		}
    		if (window.ActiveXObject){
    		// code for IE6, IE5
    		return new ActiveXObject(“Microsoft.XMLHTTP”);
    		}
    		return null;
    		}
    				
    		function submitFormWithAjax(){
    		var myAjaxGetrequest = new GetXmlHttpObject();
    
    		var t2lName=document.testForm.namebox.value;
    		var t2lEmail=document.testForm.ebox.value;
    		var t2lAddress=document.testForm.addbox.value;
    		var t2lPhone=document.testForm.phnbox.value;
    
    		var parameters = "name=" + encodeURIComponent(t2lName) 
                   + "&email=" +encodeURIComponent(t2lEmail)
                   + "&address=" + encodeURIComponent(t2lAddress)
                   + "&phone=" +encodeURIComponent(t2lPhone);
    			   
    		myAjaxGetrequest.open("GET", "websitetosendandgetfrom.com?" + parameters, true);
    		myAjaxGetrequest.send( );
    		
    		if (myAjaxGetrequest.readyState==4){
    		if(myAjaxGetrequest.status==200 || window.location.href.indexOf("http")==-1){
    		document.getElementById("result").innerHTML=myAjaxGetrequest.responseText
    		document.getElementById(“testForm”).style.display = “none”;
    		}
    		else    {
    		document.getElementById(“testForm”).innerHTML=”An error has occured making the request”;
    		}
    		}
    		}
    		}	
    	    
    		
    		
    	</script>
            </head>
    		
            <body>
    
    	<div id="wrapper">
                            
            <div id="sub-leftmost">
                                    
    								
            </div>
    	</div>
    
    
            <div id="wrapper">
            <div id="header"><h1>Quiz</h1></div>
            <div id="sub-left">
    	<form name = 'testForm'>
    	<FONT COLOR="CC3300",font size="5">&nbsp;&nbsp;&nbsp;<b>User Info</b></FONT>
    	<br />
    
    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Full Name: <br /><center><input type="text"  size="25" id =         "namebox" /></center>
    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email Address: <br /><center><input type="text"  size="25" id = "ebox" /></center>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address: <br /><center><input type="text"  size="25" id = "addbox" /></center>
    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Phone Number: <br /><center><input type="text"  size="25" id = "phnbox" />
    	<a href=”#” onclick=”submitFormWithAjax();”>Finished!</a>
    	</form>
    								
            </div>
            </div>
    	<div id="wrapper">
            <div id="sub-right">
    								
            </div>
    	</div>
                            
                    
            </body>
    		
            </html>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    ? So does it or does it now work now?

    But wait a minute!
    Code:
    if(myAjaxGetrequest.status==200 || window.location.href.indexOf("http")==-1){
    where the heck did you get *THAT* from ???

    That makes no sense. *ANY* location.href will contain "http" unless you are using "file://" for use on your own machine, only.

    On top of that, your code isn't waiting for the AJAX response!

    You wrote that you wanted "to synchronously update the div". Did you mean that? You really want SYNCHRONOUS instead of the normal ASYNCHRONOUS?

    If so, you need to use false as the last argument to the open() and then you do NOT need to check readystate or status.

    Make up your mind.

    Either:
    Code:
    // SYNCHRONOUS request
    myAjaxGetrequest.open("GET", "websitetosendandgetfrom.com?" + parameters, false);
    myAjaxGetrequest.send( );
    document.getElementById("result").innerHTML=myAjaxGetrequest.responseText;
    document.getElementById(“testForm”).style.display = “none”;
    OR
    Code:
    // ASYNCHRONOUS request
    myAjaxGetrequest.open("GET", "websitetosendandgetfrom.com?" + parameters, true);
    myAjaxGetrequest.onreadystatechange = 
        function() {
            if (myAjaxGetrequest.readyState==4 && myAjaxGetrequest.status==200)
            {
                document.getElementById("result").innerHTML=myAjaxGetrequest.responseText;
                document.getElementById(“testForm”).style.display = “none”;
            }
        };
    try {
        myAjaxGetrequest.send( );
    } catch ( e ) {
        document.getElementById(“testForm”).innerHTML = 
            ”An error has occured making the request: ” + e.toString();
    }
    I dunno where you "learned" that AJAX code from, but it's a book then I'd seriously consider using it for lighting fires, instead.

    NOTE: You could use the try/catch for errors with the synchronous code, as well. And/or you could check for a status other than 200, but that's seldom needed.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    regarding confusion

    When I click my submit button, it just takes me to a page that says "File not found". I do not understand why it would do this. I want to click the submit button and it issue the request with the information and display the information in the div on the right. I changed the code to what you had there (synchronous). Maybe I am doing the entire code wrong. Something weird is going on, any ideas on what I should do? Thanks for the help so far.



    Code:
    <html>
    
            <head>
    		
                    <style type="text/css">
                            #header {
                                    text-align: left;
                            }
                            #wrapper {
    								
                                    margin:bottom;
                                    width:100%;
    								
                            }
                            
                            #sub-left {
                                    float:left;
    								width:225px;
    								height:215px;
    								border:1px solid black; 
    								position: relative;
    								text-align: left;
                            }
                            #sub-right {
    								padding-left: 52px;
                                    float:left;
    								width:60%;
    								height:45%;
    								border:1px solid black; 
    								position: relative;
    								text-align: left;
    								
                            }
    						#sub-leftmost {
    								
                                    float:left;
    								width:10%;
    								height:100%;
    								position: relative;
    								text-align: left;
                            }
    						
                    </style>
    				
    				
    		<script type=”text/javascript”>
    		// function create GetXmlHttpObject
    		function GetXmlHttpObject(){
    		if (window.XMLHttpRequest){
    		// code for IE7+, Firefox, Chrome, Opera, Safari
    		return new XMLHttpRequest();
    		}
    		if (window.ActiveXObject){
    		// code for IE6, IE5
    		return new ActiveXObject(“Microsoft.XMLHTTP”);
    		}
    		return null;
    		}
    				
    		function submitFormWithAjax(){
    		var myAjaxGetrequest = new GetXmlHttpObject();
    
    		var t2lName=document.testForm.namebox.value;
    		var t2lEmail=document.testForm.ebox.value;
    		var t2lAddress=document.testForm.addbox.value;
    		var t2lPhone=document.testForm.phnbox.value;
    
    		var parameters = "name=" + encodeURIComponent(t2lName) 
                   + "&email=" +encodeURIComponent(t2lEmail)
                   + "&address=" + encodeURIComponent(t2lAddress)
                   + "&phone=" +encodeURIComponent(t2lPhone);
    			   
    		myAjaxGetrequest.open("GET", "thewebsite.com" + parameters, false);
    		myAjaxGetrequest.send( );
    		document.getElementById("result").innerHTML=myAjaxGetrequest.responseText;
    		document.getElementById(“testForm”).style.display = “none”;
    		
    		
    		//cbuxquiz.heroku.com?
    		
    		
    		}
    		}	
    	    
    		
    		
    		</script>
            </head>
    		
            <body>
    
    	<div id="wrapper">
                            
                                    <div id="sub-leftmost">
                                    
    								
                                    </div>
    								</div>
    
    
                    <div id="wrapper">
                            <div id="header"><h1>Quiz</h1></div>
                                    <div id="sub-left">
    								<form name = 'testForm'>
    								<FONT COLOR="CC3300",font size="5">&nbsp;&nbsp;&nbsp;<b>User Info</b></FONT>
    								<br />
    
    								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Full Name: <br /><center><input type="text"  size="25" id = "namebox" /></center>
    								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email Address: <br /><center><input type="text"  size="25" id = "ebox" /></center>
    								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address: <br /><center><input type="text"  size="25" id = "addbox" /></center>
    								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Phone Number: <br /><center><input type="text"  size="25" id = "phnbox" />
    								<a href=”#” onclick=”submitFormWithAjax();”>Finished!</a>
    								</form>
    								
                                    </div>
                                    </div>
    								<div id="wrapper">
                                    <div id="sub-right">
    								
                    </div>
    	</div>
                            
                    
            </body>
    		
    		</html>

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    You still have not
    fixed all the quote
    marks and you have
    one too many }
    also you are trying
    to access form elements
    by name but they only
    have id's

  • #7
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    quotes

    The quotes look like they should in my notepad++. I am not sure why they are changing when in the code tags of this site. What do you mean by name and id? I am new to this. Should it be name instead of id? Where is the } that should not exist?

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Quote Originally Posted by mrmodest View Post

    The quotes look like they should in my notepad++. I am not sure why they are changing when in the code tags of this site.
    Only a few are wrong....
    <script type=”text/javascript”>
    return new ActiveXObject(“Microsoft.XMLHTTP”);
    document.getElementById(“testForm”).style.display = “none”;
    <a href=”#” onclick=”submitFormWithAjax();”>

    Quote Originally Posted by mrmodest View Post
    What do you mean by name and id? I am new to this. Should it be name instead of id?
    yes ...
    form elements usually need names.
    this uses the form element name ...
    document.testForm.ebox.value
    Quote Originally Posted by mrmodest View Post

    Where is the } that should not exist?
    Code:
    <script type=”text/javascript”>
        // function create GetXmlHttpObject
        function GetXmlHttpObject(){
            if (window.XMLHttpRequest){
                // code for IE7+, Firefox, Chrome, Opera, Safari
                return new XMLHttpRequest();
            }
            if (window.ActiveXObject){
                // code for IE6, IE5
                 return new ActiveXObject(“Microsoft.XMLHTTP”);
            }
            return null;
        }
    				
    function submitFormWithAjax(){
        var myAjaxGetrequest = new GetXmlHttpObject();
        var t2lName=document.testForm.namebox.value;
        var t2lEmail=document.testForm.ebox.value;
        var t2lAddress=document.testForm.addbox.value;
        var t2lPhone=document.testForm.phnbox.value;
        var parameters = "name=" + encodeURIComponent(t2lName) + "&email=" +encodeURIComponent(t2lEmail) + "&address=" + encodeURIComponent(t2lAddress)+ "&phone=" +encodeURIComponent(t2lPhone);
        myAjaxGetrequest.open("GET", "thewebsite.com" + parameters, false);
        myAjaxGetrequest.send( );
        document.getElementById("result").innerHTML=myAjaxGetrequest.responseText;
        document.getElementById(“testForm”).style.display = “none”;
        //cbuxquiz.heroku.com?
    }
    }
    </script>
    also here you are using id to access the
    element but the form tag has a name ...
    document.getElementById(“testForm”).style.display = “none”;
    Last edited by DaveyErwin; 07-12-2012 at 06:43 PM.

  • #9
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    The OP indicated that he "use(s) notepad++ in html format for editing". Shouldn't he be editing in code format?
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".


  •  

    Posting Permissions

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