ajax logic is not working correctly

[Guest]

Hello,

I am very beginner in JavaScript and don't know how to troubleshoot this.

The last logic where it says if(response == 0), else....doesn't work. whatever the result of my query is it will return as else.

I found this code from the page below:

http://woork.blogspot.com/2007/10/login-using-ajax-and-coldfusion.html

What I need to do here is if response is not equal to 0 then send user to page window.location='pagexyz.cfm'; and else go to a different page.

Thanks in advanced

<script type="text/javascript" language="JavaScript">
   <cfoutput>
 /* ---------------------------- */
 /* XMLHTTPRequest Enable */
 /* ---------------------------- */
 function createObject() {
 var request_type;
 var browser = navigator.appName;
 if(browser == "Microsoft Internet Explorer"){
 request_type = new ActiveXObject("Microsoft.XMLHTTP");
 }else{
 request_type = new XMLHttpRequest();
 }
 return request_type;
 }
 
 var http = createObject();
 
 /* -------------------------- */
 /* LOGIN */
 /* -------------------------- */
 /* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
 var nocache = 0;
 function login() {
 // Optional: Show a waiting message in the layer with ID ajax_response
 document.getElementById('login_response').innerHTML = "Loading..."
 // Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
 var email = encodeURI(document.getElementById('emailLogin').value);
 var psw = encodeURI(document.getElementById('pswLogin').value);
 // Set te random number to add to URL request
 nocache = Math.random();
 // Pass the login variables like URL variable
 http.open('get', 'includes/loginquery.cfm?email='+email+'&psw='+psw+'&nocache = '+nocache);
 http.onreadystatechange = loginReply;
 http.send(null);
 }
 function loginReply() {
 if(http.readyState == 4){
 var response = http.responseText;
 if(response == 0){
 // if login failsa
 document.getElementById('login_response').innerHTML = 'Login failed! Verify user and password';
 // else if login is ok show a message: "Welcome + the user name".
 } else {
 document.getElementById('login_response').innerHTML = response;
 window.location='#eqSiteRoot#member/index.cfm';
 }
 }
 }
  </cfoutput>

[craigkaminsky]

Mike,

JavaSript just isn't as 'cool' as CF ! It won't convert a string to a number auto-magically for you. Your response variable is a string. Use the JavaScript function parseInt() to convert it to a number. You can also use isNaN to verify that you 'created' a number with parseInt (more of an error checking).

Try this change:

response = parseInt(http.responseText);

That should take care of it.

[Guest]

Thank you very much for the code correction. still the logic is not working and on the if part whatever entry i put it thinks it is true and send it to the else logic. For some reason it doesn't see the if(response == 0)

[craigkaminsky]

Mike,

I think there might be an error in your CFML page. I ran the same JS code using a static CFML page, one that simply output "hello world", and it worked correctly. Try making your CFML page static (ignoring the URL variables) and run it again, just to test your JS. If needed, add error handling logic to your CFML page to log the problem, should one exist.

I also added alert(http.readyState) to the first line of the loginReply() function in order to see the changes in the ready state value each time the function is fires.

In addition, and you should do this regardless: install Firebug (debugging plug-in for Firefox). It'll save you loads of headaches and time as you can monitor all Ajax calls as well as many other helpful tools for debugging your web pages. Firebug will also let you know if the page you called threw an error (often dumping the CF details in a results tab for the HTTP call).

Firebug:

https://addons.mozilla.org/firefox/addon/1843

[Guest]

I installed firefox with the add-on you recommended but unfortunetly I am not good with debuging javascript so it didn't help me. Below I attached my current code (I also tried not including any dynamic variables but didn't help).

<!-- Include AJAX Framework -->
<script type="text/javascript" language="JavaScript">
   <cfoutput>
 /* ---------------------------- */
 /* XMLHTTPRequest Enable */
 /* ---------------------------- */
 function createObject() {
 var request_type;
 var browser = navigator.appName;
 if(browser == "Microsoft Internet Explorer"){
 request_type = new ActiveXObject("Microsoft.XMLHTTP");
 }else{
 request_type = new XMLHttpRequest();
 }
 return request_type;
 }
 
 var http = createObject();
 
 /* -------------------------- */
 /* LOGIN */
 /* -------------------------- */
 /* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
 var nocache = 0;
 function login() {
 // Optional: Show a waiting message in the layer with ID ajax_response
 document.getElementById('login_response').innerHTML = "Loading..."
 // Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
 var email = encodeURI(document.getElementById('emailLogin').value);
 var psw = encodeURI(document.getElementById('pswLogin').value);
 // Set te random number to add to URL request
 nocache = Math.random();
 // Pass the login variables like URL variable
 http.open('get', '#eqSiteRoot#includes/loginquery.cfm?email='+email+'&psw='+psw+'&nocache = '+nocache);
 http.onreadystatechange = loginReply;
 http.send(null);
 }
 function loginReply() {
 if(http.readyState == 4){
 var response = http.responseText;
 if(response == 0){
 // if login failsa
 document.getElementById('login_response').innerHTML = 'Login failed! Verify user and password';
 // else if login is ok show a message: "Welcome + the user name".
 } else {
 document.getElementById('login_response').innerHTML = response;
 window.location='#eqSiteRoot#member/index.cfm';
 }
 }
 }
  </cfoutput>
</script>

<!-- Form: the action="javascript:login()"call the javascript function "login" into ajax_framework.js -->
<form action="javascript:login()" method="post">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
  <td align="right"> </td>
  <td width="150" align="right">Forgot your password?</td>
  <td width="55" align="right"> </td>
  <td width="15" align="right"> </td>
</tr>
<tr>
<!---onFocus="if(this.value=='Email')this.value='';" value="Email"--->
<!--- onFocus="if(this.value=='Password')this.value='';" value="Password" --->
  <td align="right"><input type="text" name="emailLogin" id="emailLogin" value=""/></td>
  <td align="right"><input type="password" name="pswLogin" id="pswLogin" value=""/></td>
  <td align="right"><input type="submit" name="Submit" value="Login" /></td>
  <td align="right"> </td>
</tr>
<tr>
  <td colspan="2" align="right"><!-- Show Message for AJAX response -->
<div id="login_response"></div>
</td>
  <td align="right"> </td>
  <td align="right"> </td>
</tr>
</table>
</form>