Chapter 15 Problem With Options.Success = Function(Response)

[StephenM]

Hi all,

 

I've hit a roadblock and I can't debug this issue. Infact, I'm amazed that it's not working. It seems like something trivial but i can't see it.

 

So in chapter 15, there is an AJAX request and everything works fine except the switch statement is not working as I would expect and as a result, the jQuery code is not being executed.

 

The console returns CORRECT so this means the response is returned from the php file successfully but I can't figure out why the switch statement doesn't take this response variable and compare it with the case statements.

 

Can anyone see what is wrong?

			options.success = function(response) {

                console.log(response); // I see CORRECT in the console.

                switch(response)
                {
                    case 'CORRECT':
                    console.log('I can see the response!'); //fails
                    // Hide the form:
                    $('#login').hide();
                    // Show a message:
                    $('#results').removeClass('error');
                    $('#results').text('You are now logged in!');
                    break;

                    case 'INCORRECT':
                    console.log('I can see the response!'); //fails
                    $('#results').text('The submitted credentials do not match those on file!');
                    $('#results').addClass('error');
                    break;

                    case 'INCOMPLETE':
                    console.log('I can see the response!'); //fails
                    $('#results').text('Please provide an email address and a password!');
                    $('#results').addClass('error');
                    break;

                    case 'INVALID_EMAIL':
                    console.log('I can see the response!'); //fails
                    $('#results').text('Please provide a valid email address!');
                    $('#results').addClass('error');
                    break;

                    default :
                        console.log('why can i not see the response?'); // successfully executed
                }

                console.log('got this far'); // successfully exectued 
				
			}; // End of success.
			options.url = 'login_ajax.php';

[HartleySan]

I would check for padding around the string "CORRECT". Also, I'd make sure that the response is indeed a string.

To do that, I'd do the following:

console.log(response.length);
console.log(typeof response);

Please let us know what you find.

Thanks.

[StephenM]

Hi Hartley,

Thanks, padding was the issue. I hadn't expected that since I didn't add any whitespace.

I had already checked for the type but that was not the issue.

Was it whitespace around "CORRECT" or is it apostrophes?

Do you know why? [ I wasn't expecting that at all]

 

Thanks again for your assistance, here is the code with the solution:

			options.success = function(response) {

                console.log(response); // I see CORRECT in the console.

                console.log(response.length); // returns 9

                console.log(typeof response); // returns string

                var trimmed_response = $.trim(response);

                console.log(trimmed_response.length); // returns 7

				// Worked:

                switch(trimmed_response)
                {
                    case "CORRECT":
                    console.log('I can see the response!'); //works
                    // Hide the form:
                    $('#login').hide();
                    // Show a message:
                    $('#results').removeClass('error');
                    $('#results').text('You are now logged in!');
                    break;

                    case 'INCORRECT':
                    console.log('I can see the response!'); //works
                    $('#results').text('The submitted credentials do not match those on file!');
                    $('#results').addClass('error');
                    break;

                    case 'INCOMPLETE':
                    $('#results').text('Please provide an email address and a password!');
                    $('#results').addClass('error');
                    break;

                    case 'INVALID_EMAIL':
                    console.log('I can see the response!'); //works
                    $('#results').text('Please provide a valid email address!');
                    $('#results').addClass('error');
                    break;

                    default :
                        console.log('why can i not see the response?'); // successfully executed
                }

                console.log('got this far');
				
			}; // End of success.
			options.url = 'login_ajax.php';

[HartleySan]

I honestly don't know why, but I've heard of many instances before where jQuery adds padding. I really don't know why though.

Just another reason why I generally avoid JS libraries when possible.