0
$.ajax({
    type: "POST",
    url: "core/login.php",
    data: userInfo,
    contentType : "application/x-www-form-urlencoded; charset=UTF-8",
    success: function(msg){
        if ($.trim(msg) == "success")
        {
            $('#status').load('home.php #status'); //refresh status: now shows as logged in         
        }

        else
        {
            $('#error').html(msg); //this statement will execute whatever "$error" in login.php is, as html
            $('#error').fadeIn(500).show();
        }

    }


});

Basically, I have a login form for a website. login.php processes userInfo (containing username and password), then returns either "success" or "error". If success, show user as logged in without refreshing the page (just refresh a div). If it fails, WITHOUT refreshing the page, show the error what the problem/failure was.

In Chrome and Safari, everything works fine. But in IE8 and Firefox, when there is a login error, the user is redirected to a new page showing the error (but I want the user to STAY on the same page hence I'm using Ajax). When there is success, instead of refreshing the status div and showing the status now as logged in, the message "success" is shown, again on a new page.

How can I fix this problem so that in all browsers, there is NO refresh during the entire login process? Thank you very much!

user2973438
  • 311
  • 2
  • 6
  • 9
  • I think you want to remove the space there ('home.php#status') – netpoetica Jul 16 '14 at 02:01
  • 1
    @netpoetica No...see the docs on [loading page fragments](http://api.jquery.com/load/#loading-page-fragments) – nbrooks Jul 16 '14 at 02:05
  • nothing in code shown that would cause redirect unless you haven't prevented form from submitting and page is reloading. you are going to have to provide more troubleshooting information from browser console – charlietfl Jul 16 '14 at 02:11
  • @nbrooks Thanks, I thought this was some wrapper function for .hash or something. Good call – netpoetica Jul 16 '14 at 02:44

1 Answers1

0

use e.preventDefault() to prevent the default action to be triggered.

EXAMPLE:

$("form").submit(function(e){
          e.preventDefault();
          $.ajax({
               //ajax code here
           });    
   });

Here is more info about e.preventDefault http://api.jquery.com/event.preventdefault/

EDIT:

Check out this answer on stackoverflow..

event.preventDefault() function not working in IE

Community
  • 1
  • 1
rob
  • 715
  • 2
  • 6
  • 20