Jump to content
Forums are read-only ×
Larry Ullman's Book Forums

Chapter 11 Ajax Page 456 Not Working?

rafaec

By rafaec,
in Modern Javascript: Develop and Design

 Share

Recommended Posts

rafaec Newbie

rafaec

Posted
Posted

Hi everyone, me again...

 

I have broken my head over this one...no idea why it doesn't work.

 

HTTP:

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="login.php" method="post" id="loginForm" novalidate>
<fieldset>
<legend> Login </legend>
<div><label for="email"> Email adress </label>
<input type="email" name="email" id="email" required /></div>
<div><label for="password"> Password </label>
<input type="password" name="password" id="password" required /> </div>
<div><label for="submit"> Submit </label>
<input type="submit" name="Login →" id="submit"></div>
</fieldset>
</form>
<script src="resources/login.js">
</script>
<script src="ajax.js">
</script>
</body>
</html>

 

LOGIN.JS

// Script 11.x - login.js #2
// Function called when the form is submitted.
// Function validates the form data and returns a Boolean value.
function validateForm() {
   'use strict';

   // Get references to the form elements:
   var email = document.getElementById('email');
   var password = document.getElementById('password');
   // Validate!
if ( (email.value.length > 0) && (password.value.length > 0) ) {
// Perform an Ajax request:
var ajax = getXMLHttpRequestObject();
ajax.onreadystatechange = function() {
console.log (ajax.readyState);
if (ajax.readyState == 4) {
// Check the status code:
if ( (ajax.status >= 200 && ajax.status < 300)
|| (ajax.status == 304) ) {
console.log(ajax.status);
console.log(ajax.responseText);
if (ajax.responseText == 'VALID') {
console.log('works');
alert('You are now logged in!');
} else if (ajax.responseText == 'INVALID') {
console.log('failed');
alert('The submitted values do not match those on file!');
}
else {
alert ('Unknown problem')
}

} else {
document.getElementById('theForm').submit();
}
}
};
ajax.open('POST', 'resources/login.php', true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var data = 'email=' + encodeURIComponent(email.value) + '&password=' + encodeURIComponent(password.value);
ajax.send(data);

    return false;
   } else {
    alert('Please complete the form!');
    return false;
   }

} // End of validateForm() function.
// Function called when the window has been loaded.
// Function needs to add an event listener to the form.
function init() {
   'use strict';

   // Confirm that document.getElementById() can be used:
   if (document && document.getElementById) {
    var loginForm = document.getElementById('loginForm');
    loginForm.onsubmit = validateForm;
   }
} // End of init() function.
// Assign an event listener to the window's load event:
window.onload = init;

 

PHP is the same as the book.

 

 

The weird thing is that when I put the valid email adresses for some reason Ajax.responseText returns 'VALID", however, it still shows the alert 'Unknown problem'. I made a console.log so I am sure it returns 'VALID' and also to for ajax status.

 

Everything seems to be ok, however, I can't make it to display 'You are now logged in".

 

Anyone can see where the error is?

 

Thanks!

Link to comment
Share on other sites
rafaec Newbie

rafaec

Posted
  • Author
Posted

New info:

 

When establishing a break point after

alert('You are now logged in!');

ajax.responseText shows value of "VALID\r\n\r\n ". I really have no idea where is it getting the /r/n values from.

 

PHP is basically

 

if (...$_POST[...) // validate and set email and password to me@example.com and testpass

{

echo 'VALID';

}

else

{

echo 'INVALID';

}

 

no new lines no enters...

 

???

Link to comment
Share on other sites
rafaec Newbie

rafaec

Posted
  • Author
Posted

Hi HartleySan,

 

Thanks for your reply. I changed that before with no success. I actually tried using the login.js from Larry's website directly to rule out any typos...

 

The console does not output "works" or "failed". Browser just alerts "Unknown problem".

 

??

Link to comment
Share on other sites
HartleySan Newbie

HartleySan

Posted
Posted

Do you get a line number with the "Unknown problem"?

It sounds like there is something going on that's not related to the script.

 

Are you running the PHP script from a (virtual) server?

Trying commenting out a big chunk of your code, and then slowly uncomment it, one line at a time, until you find the exact line causing the problem.

After you do that, please report back.

Thanks.

Link to comment
Share on other sites
rafaec Newbie

rafaec

Posted
  • Author
Posted

Hi,

 

The "unknown problem" alert is set by me to know there was a problem with responseText:

 

if (ajax.responseText == 'VALID') {
console.log('works');
alert('You are now logged in!');
} else if (ajax.responseText == 'INVALID') {
console.log('failed');
alert('The submitted values do not match those on file!');
}
else {
alert ('Unknown problem')
}

 

I did comment each chunk of code, verified all the commands, even copy pasted from Larry's. I am now absolutely positive the problem is in this validation. For some reason, PHP returns 'VALID' but the var is set to 'VALID\r\n\r\n '.

But weird enough, the NET tab in Firebug, shows on HTTP recieved the value VALID (no spaces or breaks). So I am sure, that the script is reading the right information.

 

I am using XAMPP. Testing everything on localhost. Could that be the problem?

Link to comment
Share on other sites
HartleySan Newbie

HartleySan

Posted
Posted

I've never experienced such a thing, and I use XAMPP all the time for Ajax, etc.

I really don't know what to tell you, but it seems like your environment (or perhaps your text editor) is padding the string you return from the PHP script for one reason or another.

 

Honestly, I can't say anything beyond that, as I've never experienced such a problem.

Perhaps try using a different text editor as well as switch up any other non-XAMPP software you're using to see if that resolves the problem.

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...