This is whats in my main.js file:
$("#login-form").submit(
function() {
$("#message").removeClass().addClass('messagebox').html(
'<img src="public/images/loading.gif" />Validating....').fadeIn(1000);
$.post("login/run", {
username : $('#username').val(),
password : $('#password').val()
}, function(data) {
if (data == 'yes') {
// add message and change the class of the box and start
// fading
$("#message").fadeTo(
200,
0.1,
function() // start fading the messagebox
{
$(this).html('Logging In...').addClass(
'messageboxok').fadeTo(900, 1,
function() {
// redirect to secure page
document.location = 'secure.php';
});
});
} else {
alert(data);
$("#message").fadeTo(
200,
0.1,
function() // start fading the messagebox
{
// add message and change the class of the
// box and start fading
$(this).html('Your username or password is incorrect')
.addClass('messageboxerror')
.fadeTo(900, 1);
});
}
});
return false;
}
);
this is the function it refers to (currently set to always echo yes so as to force a positive result)
public function run() {
echo 'yes';
}
The problem I'm having is when I do the alert(data), the alert shows that the output I'm getting is correct, however the IF function is only doing the ELSE part regardless that the data is yes.
The other confusing part is that this code worked fine before I went to bed last night - just now it doesn't.
Is there a problem in my syntax anywhere?
Edit 1
Modified it by:
added , 'json' to the end of the $.post area, and added json_encode to the echo
main.js to:
//login form ajax
$("#login-form").submit(
function() {
$("#msgbox").removeClass().addClass('messagebox').html(
'<img src="public/images/loading.gif" />Validating....').fadeIn(1000);
$.post("login/run", {
username : $('#username').val(),
password : $('#password').val()
}, function(data) {
if (data == 'yes') {
// add message and change the class of the box and start
// fading
$("#msgbox").fadeTo(
200,
0.1,
function() // start fading the messagebox
{
$(this).html('Logging In...').addClass(
'messageboxok').fadeTo(900, 1,
function() {
// redirect to secure page
document.location = 'secure.php';
});
});
} else {
alert(data);
$("#msgbox").fadeTo(
200,
0.1,
function() // start fading the messagebox
{
// add message and change the class of the
// box and start fading
$(this).html('Your username or password is incorrect')
.addClass('messageboxerror')
.fadeTo(900, 1);
});
}
}, 'json');
return false;
});
//end login form ajax
and the function to:
public function run() {
echo json_encode('yes');
}
Edit 2
Changed to $.ajax, made the function return a JSON encoded array
main.js:
$("#login-form").submit(
function() {
$("#msgbox").removeClass().addClass('messagebox').html(
'<img src="public/images/loading.gif" />Validating....').fadeIn(1000);
$.ajax({
url: 'login/run',
dataType: 'json',
type: 'POST',
data: {
username : $('#username').val(),
password : $('#password').val()
},
success: function(data){
alert(data.result);
if (data.result == 'yes') {
// add message and change the class of the box and start
// fading
$("#msgbox").fadeTo(
200,
0.1,
function() // start fading the messagebox
{
$(this).html('Logging In...').addClass(
'messageboxok').fadeTo(900, 1,
function() {
// redirect to secure page
document.location = 'secure.php';
});
});
} else {
alert(data);
$("#msgbox").fadeTo(
200,
0.1,
function() // start fading the messagebox
{
// add message and change the class of the
// box and start fading
$(this).html('Your username or password is incorrect')
.addClass('messageboxerror')
.fadeTo(900, 1);
});
}
//return false;
}
});
return false;
});
function:
public function run() {
$result = array('result' => 'yes');
echo json_encode($result);
}
See Question&Answers more detail:
os 
