Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    296
    Thanks
    3
    Thanked 4 Times in 4 Posts

    [jQuery] jqModal + Form plugin - Page reloading in Firefox on form submit

    Hi,

    The problem lies here - http://www.naveeng.com/test/ - default username given there, password: naveen

    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 (6 & 7), it works pretty fine, but in FireFox v2, 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:

    index.php - Main container Page

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
    
        <link rel="stylesheet" href="scripts/style.css" type="text/css" />
        <link rel="stylesheet" href="scripts/jqModal.css" type="text/css" />
        <SCRIPT type="text/javaScript" src="scripts/jquery-1.2.3.min.js"></SCRIPT>
        <SCRIPT type="text/javaScript" src="scripts/jqModal.js"></SCRIPT>
    
    <SCRIPT LANGUAGE="JavaScript">
     <!--
        $().ready(function() {
      
      // select + reference "triggering element" -- will pass to $.jqm()
      var triggers = $('a.ex3bTrigger')[0];
      
       $('#ex3b').jqm({
        trigger: triggers,
        ajax: 'login.html',
        target: 'div.jqmAlertContent',
        overlay: 0,
        modal:true
        });
      
      // Close Button Highlighting. IE doesn't support :hover. Surprise?
      if($.browser.msie) {
      $('div.jqmAlert .jqmClose')
      .hover(
        function(){ $(this).addClass('jqmCloseHover'); }, 
        function(){ $(this).removeClass('jqmCloseHover'); });
      }
    });
    
     //-->
     </SCRIPT>
    
        <title>Test</title>
    </head>
    <body>
    <?php
    
    session_start();
    
    ?> 
    
    
    <?php
    if (!isset($_SESSION['name'])) {
     
                echo "<p id='top_info'><a href='#' class='ex3bTrigger'>LOGIN</a> or REGISTER</p>";
    
    }
    else if (isset($_SESSION['name'])){
                echo "<p id='top_info'>Welcome " . $_SESSION['name'] ."!, <a href='logout.php'>LOGOUT</a></p>";
    }
    ?>
    
    <div class="jqmAlert" id="ex3b">
    
        <div id="ex3b" class="jqmAlertWindow">
            <div class="jqmAlertTitle clearfix">
                <h1>LOGIN</h1><a href="#" class="jqmClose"><em>Close</em></a>
            </div>
      
            <div class="jqmAlertContent">
              <p>Please wait... <img src="images/busy.gif" alt="loading" /></p>
            </div>
        </div>
    
    </div>
    
    </body>
    </html>
    login.html - the html page which is being called inside modal box via ajax

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
        <SCRIPT type="text/javaScript" src="scripts/jquery-1.2.3.min.js"></SCRIPT>
        <script type="text/javascript" src="scripts/jquery.form.js"></script>
        <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>
    
    <style type="text/css">
        #login{
            font: bold 1.5em Arial, Sans-Serif; margin: 0; padding: 0;
            color: #000;
            text-align:center;
        }
        .submit-btn {
            width: 54px;
            height: 20px;
            background: #743 url(images/submit.gif) no-repeat;
            outline: none;
        }
        .submit-btn:hover {
            background: #069 url(images/submit.gif) no-repeat 0 -20px;
        }
    
    
    </style>
     </HEAD>
    
     <BODY>
     <div id="login">
        <br>
         <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 value=nkrgupta@gmail.com></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 value=naveen></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>
      </div>
     </BODY>
    </HTML>
    Last edited by nkrgupta; 04-15-2008 at 06:55 PM.

  • #2
    Regular Coder
    Join Date
    May 2005
    Posts
    296
    Thanks
    3
    Thanked 4 Times in 4 Posts
    I'm still waiting

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    put your return false inside the function

  • #4
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    like this:


    // ajax event to post research panel form
    $('#researchForm').submit(function() {
    var email = $('input.email',this).val();
    var postal = $('input.postal',this).val();

    var obj = {
    url: '/?event=action.researchpaneladd',
    post: { email: email, postal: postal, type: 'wrw 2009' }
    }
    $.post(obj.url, obj.post);
    $('#panelMessage').html('Thank you.<br />' + email + ' has been added to the research panel list.<br />');
    return false;
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •