title: JQuery/Ajax Post returned data and IF function
body: <p>This is whats in my main.js file:</p>
  
  <pre><code>$("#login-form").submit(
          function() {
  
              $("#message").removeClass().addClass('messagebox').html(
                      '&lt;img src="public/images/loading.gif" /&gt;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;
          }
  );
  </code></pre>
  
  <p>this is the function it refers to (currently set to always echo yes so as to force a positive result)</p>
  
  <pre><code>public function run() {
      echo 'yes';
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>The other confusing part is that this code worked fine before I went to bed last night - just now it doesn't.</p>
  
  <p>Is there a problem in my syntax anywhere?</p>
  
  <hr>
  
  <h2>Edit 1</h2>
  
  <p>Modified it by:
  added <strong>, 'json'</strong> to the end of the $.post area, and added <strong>json_encode</strong> to the echo</p>
  
  <p>main.js to:</p>
  
  <pre><code>//login form ajax
  $("#login-form").submit(
          function() {
  
              $("#msgbox").removeClass().addClass('messagebox').html(
                      '&lt;img src="public/images/loading.gif" /&gt;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
  </code></pre>
  
  <p>and the function to:</p>
  
  <pre><code>public function run() {
          echo json_encode('yes');
  
  }
  </code></pre>
  
  <hr>
  
  <h2>Edit 2</h2>
  
  <p>Changed to $.ajax, made the function return a JSON encoded array</p>
  
  <p>main.js:</p>
  
  <pre><code>$("#login-form").submit(
          function() {
  
              $("#msgbox").removeClass().addClass('messagebox').html(
                      '&lt;img src="public/images/loading.gif" /&gt;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;
          });
  </code></pre>
  
  <p>function:</p>
  
  <pre><code>public function run() {
      $result = array('result' =&gt; 'yes');
      echo json_encode($result);  
  }
  </code></pre>