[jQuery] jqModal + Form plugin - Page is reloading in Firefox on form submit, IE works perfect

[Naveen]

NB: Apologies if you're receiving this question second time, my
earlier post doesn't show up even after 3 hours

Hi,

I've tried a million workarounds for this, but it just doesn't seem to
work in Firefox! I fire up a jqModal login box which is calling a
separate html page, which connects to a php login script, and if
success, the php returns a success message in the Modal and reloads
the parent page, i.e. page containing the Modal html, thus loading the
new Session. If unsuccessful, it just gives an error message in the
modal, with the option to re-login.

In IE, it works pretty fine, but in FireFox v2, I've tried, it always
reloads the page when clicking on login button, instead of
unobtrusively sending the username/pwd via ajax.

I've tried using, $.ajax(), $.post(), the form plugin - both
ajaxForm() and ajaxSubmit() functions, with return false, but
strangely it works in Firefox, ONLY for one time, when I clear the
cookies, authenticated sessions, cache etc. After the first time, if I
try to logout and relogin, it reloads the page.

The code is as follows:

   <script type="text/javascript">

               $("#frm1").submit(function() {
//                      $("#res").hide();
                        $("#loading").bind("ajaxSend", function(){
                          $(this).show();
                        }).bind("ajaxComplete", function(){
                          $(this).hide();});

                       $(this).ajaxSubmit({
                               target: '#res',
                               success: function() {
                                       $('#res').fadeIn('slow');
//                                      $("#res").show();
                               }
                       });
                               return false;


//                      $('#frm1').ajaxForm({
//                              target: '#res',
//                              success: function() {
//                                      $('#res').fadeIn('slow');
//                              }
//                      });
               });
   </script>


 <form id=frm1 name=frm1 action="login.php" method="POST">
               <div id=r1>
                       <span style="width:50%; float:left; text-
align:right;">E-mail
Address: </span>
                       <span style="width:50%; float:right"><input
type=text id=uname
name=uname></span>

                       <br>
                       <span style="width:50%; float:left; text-
align:right;">Password:</
span>
                       <span style="width:50%; float:right"><input
type=password id=pwd
name=pwd></span>
                       <br>
                       <span style="width:100%;"><input type="image"
id="fetch"
name="fetch" class="submit-btn" src="images/btn.gif" /></span>
                       <!-- <span style="width:100%;"><input
type="submit" value="LOGIN"></
span> -->
               </div>
       </form>
   <div id="loading" style="display:none">
               <img src="images/8-0.gif"><br>Signing In
   </div>

   <div id=res>

   </div>


Any pointers would be great.

Thanks,
Naveen