www.webdeveloper.com
Results 1 to 13 of 13

Thread: Problems with AJAX

  1. #1
    Join Date
    Feb 2012
    Posts
    8

    Problems with AJAX

    Hi all,

    This is really out of my league and i could do with some help.

    I am trying to check the database to see if a some text exists using a form.

    I came across this coding and it is perfect for what i need. I have incorporated it into my web site and the problem I'm having is when i type in a sentence to be checked, the result after it has checked the database for an existing sentence, the result displayed is the same sentence but with all the spaces removed.

    I'm no good with AJAX so any help in trying to solve this issue would be greatly appreciated.

    HTML CODE
    Code:
    <form method="post" action="javascript:void(0);" name="form1"> 
    
    <table cellspacing="0"> 
    
    <tr> 
    
    <th><label for="newuserid">Sentence :</label></th> 
    
    <td>	
    <textarea rows="5" type="question" name="question" cols="82" id="question" tabindex="1" 
    onKeyUp="OnChangedQuestion();"/></textarea></td> 
    <td>
    <input id="btnCheckAvailability" type="button" disabled="disabled" value="Check Database" 
    onClick="OnCheckAvailability();"></td> 
    
    <td><div id="Available"></div></td> 
    </tr> 
    </table> 
    
    </form>
    JAVASCRIPT
    Code:
    <script type="text/javascript">
    //If our user enters data in the username input, then we need to enable our button 
    function OnChangedQuestion() 
    { 
    if(document.form1.newuserid.value == "") 
    { 
    document.form1.btnCheckAvailability.disabled = true; 
    } 
    else 
    { 
    document.form1.btnCheckAvailability.disabled = false; 
    } 
    }
    
    function OnCheckAvailability() 
    { 
    if(window.XMLHttpRequest) 
    { 
    oRequest = new XMLHttpRequest(); 
    } 
    else if(window.ActiveXObject) 
    { 
    oRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    
    oRequest.open("POST", "checkdatabase.asp", true); 
    oRequest.onreadystatechange = UpdateCheckAvailability;
    
    oRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    oRequest.send("strCmd=availability&strQuestion=" + document.form1.newuserid.value); 
    }
    
    function UpdateCheckAvailability() 
    { 
    if(oRequest.readyState == 4) 
    { 
    if(oRequest.status == 200) 
    { 
    document.getElementById("Available").innerHTML = oRequest.responseText; 
    } 
    else 
    { 
    document.getElementById("Available").innerHTML = "Error"; 
    } 
    } 
    } 
    
    </script>
    ASP CODE
    Code:
    <%
    ' Form Variables 
    dim strCmd 
    dim strQuestion
    
    strCmd = trim(Request.Form("strCmd").Item) 
    Session("strQuestion") = trim(Request.Form("strQuestion").Item)
    
    
    If Session("strQuestion") ="The cat ran up the hill" Then
    Response.Write("Error This Record Exists.") 
    else 
    Response.Write("Checked!!!!") 
    end if 
    
    Response.end
    %>
    When i type in "The cat ran up the hill" the result i get back when i click on check database is "Thecatranupthehill"

    Thanks in advance.

    Rick

  2. #2
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    Try this, if it fails, the issue is in you ASP script and I dont know ASP @_@
    Code:
    <script type="text/javascript">
    function OnChangedQuestion(){ 
    	if(document.form1.newuserid.value == ""){ 
    		document.form1.btnCheckAvailability.disabled = true; 
    	}else{ 
    		document.form1.btnCheckAvailability.disabled = false; 
    	} 
    }
    
    function OnCheckAvailability(){
    	var ajaxRequest;	
    	try{
    		ajaxRequest = new XMLHttpRequest();
    	} catch (e){
    		try{
    			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    		} catch (e) {
    			try{
    				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    			} catch (e){
    				alert("Your browser does not support AJAX!");
    				return false;
    			}
    		}
    	}
    	var qstring = document.getElementById("question").value;
    	ajaxRequest.open("POST", "checkdatabase.asp", true);
    	ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    	ajaxRequest.setRequestHeader("Content-length", params.length);
    	ajaxRequest.setRequestHeader("Connection", "close");
    	
    	ajaxRequest.onreadystatechange = function(){
    		if(ajaxRequest.readyState == 4){
    			document.getElementById("Available").innerHTML = ajaxRequest.responseText;
    		}
    	}
    	ajaxRequest.send(qstring); 
    }
    </script>
    
    <form method="post" action="javascript:void(0);" name="form1"> 
    
    <table cellspacing="0"> 
    
    <tr> 
    
    <th><label for="newuserid">Sentence :</label></th> 
    
    <td>
    <textarea rows="5" type="question" name="question" cols="82" id="question" tabindex="1" 
    onKeyUp="OnChangedQuestion();"/></textarea></td> 
    <td>
    <input id="btnCheckAvailability" type="button" disabled="disabled" value="Check Database" 
    onClick="OnCheckAvailability();"></td> 
    
    <td><div id="Available"></div></td> 
    </tr> 
    </table> 
    
    </form>

  3. #3
    Join Date
    Feb 2012
    Posts
    8
    Thank you for the reply

    I get the following error when i implement your code into mine:

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    Timestamp: Thu, 23 Feb 2012 18:18:03 UTC


    Message: 'params' is undefined
    Line: 44
    Char: 2
    Code: 0

    Rick

  4. #4
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    Oops, sorry, this is a hacked up script from a few of my old ones. Here,
    Replace:
    Code:
    ajaxRequest.setRequestHeader("Content-length", params.length);
    with:
    Code:
    ajaxRequest.setRequestHeader("Content-length", qstring.length);

  5. #5
    Join Date
    Feb 2012
    Posts
    8
    Nearly there no errors this time the only problem is knowing which variable holds the information for the database to check.

    Before the code was
    Code:
    oRequest.send("strCmd=availability&strQuestion=" + document.form1.question.value);
    Where strQuestion held the information that the user enters.

    I notice this has gone now so which string now holds the info.

    Thanks

    Rick

  6. #6
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    Sorry, I didnt proofread the script before posting.
    Replace:
    Code:
    var qstring = document.getElementById("question").value;
    with
    Code:
    var qstring = "strCmd=availability&strQuestion="+document.getElementById("question").value;
    Passed variables are now the same as before.

  7. #7
    Join Date
    Feb 2012
    Posts
    8
    Still the same problem when i type "The cat ran up the hill", the responce i get back after it has been checked in the database is "Thecatranupthehill".

    Regards

    Rick

  8. #8
    Join Date
    Feb 2012
    Posts
    8
    After further investigation i think the problem lies in this:

    Code:
    document.getElementById("question").value;
    What does this code do?

  9. #9
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    Quote Originally Posted by Rickkap View Post
    After further investigation i think the problem lies in this:

    Code:
    document.getElementById("question").value;
    What does this code do?
    That gets the text in the text area. If you want to know if that is the issue, add this to the line after:
    Code:
    alert(qstring);
    that will show you the query it is sending to the ASP page.

  10. #10
    Join Date
    Feb 2012
    Posts
    8
    Ok, i've checked the strQuestion and it's fine. Is it possible to send a variable to another page via the hyperlink?

    In ASP we would do it this way :

    Code:
    http://www.somewhere.com/index.asp?id=test

  11. #11
    Join Date
    Feb 2012
    Posts
    8
    Ok, still pursuing with this and i've now found that the main problem could be this.

    If i enter "the&#37;20cat%20ran%20up%20the%20hill" in the input field. It returns i get back from the database search is "The cat ran up the hill" which is what i want. Is this something to do with Javascript?

    Regards

    Rick

  12. #12
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    No, when I run the script on my localhost (submited to a PHP form) it shows correct.
    But replace:

    Code:
    var qstring = "strCmd=availability&strQuestion="+document.getElementById("question").value;
    with:
    Code:
    var qstring = "strCmd=availability&strQuestion="+document.getElementById("question").value.replace(/\s/g, "&#37;20");

  13. #13
    Join Date
    Feb 2012
    Posts
    8
    Ok, it all displays correctly now thank you, but for some reason my database query doesn't search properly.

    I think i'm going to have to go back to the drawing board with this as i can't understand why it isn't working properly.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles