Advertisement

04.29.2008 at 11:34PM PDT, ID: 23364540
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
7.6

jQuery - Page reloading in Firefox on Form Submit

Asked by nkrgupta in JavaScript, PHP Scripting Language

Tags: , , ,

Hi,

I tried asking the same question on jQery mailing list and a couple of other forums, but got no help :-( I guess there's isn't anything majorly flawed in my query. If so, please let me know.

The problem lies on the login process on this page - http://www.naveeng.com/test/ - default username given is 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 with 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 every subsequent time the form is submitted.

The Code for index.php and login.html with the javascript is attached below.

Thanks,
Naveen
Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:

index.php - Main container Page
 
 
<!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
 
 
<!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>
[+][-]04.30.2008 at 12:48AM PDT, ID: 21468775

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]04.30.2008 at 01:07AM PDT, ID: 21468848

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]04.30.2008 at 01:47AM PDT, ID: 21468993

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]04.30.2008 at 01:52AM PDT, ID: 21469012

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]04.30.2008 at 02:42AM PDT, ID: 21469187

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]04.30.2008 at 04:13AM PDT, ID: 21469541

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: JavaScript, PHP Scripting Language
Tags: Java Script, Firefox 2.0, IE 6 & 7, http://www.naveeng.com/test/, using jQuery with plugins jqModal & form
Sign Up Now!
Solution Provided By: zbyszek_BTG
Participating Experts: 1
Solution Grade: A
 
 
[+][-]07.11.2008 at 10:48PM PDT, ID: 21987841

Experts Exchange has a courteous staff of administrators who help members get the most out of the website by means of administrative comments like this one.

Start your 7-day free trial to view this Administrative Comment or ask the Experts your question.

 
[+][-]07.16.2008 at 08:49PM PDT, ID: 22022227

Experts Exchange has a courteous staff of administrators who help members get the most out of the website by means of administrative comments like this one.

Start your 7-day free trial to view this Administrative Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 - Hierarchy / EE_QW_2_20070628