nkrgupta
04-15-2008, 06:47 PM
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
<!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>
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
<!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>