nkrgupta
08-22-2007, 06:54 PM
Hi,
I am using prototype.js 1.5.1. I've implemented Ajax.Updater in a script which is working fine in both FF 2 and IE 6 except for the following problem in FF only-
When the focus is on the submit button of a form, then pressing enter SUBMITS the form with parameters passed to the url, as if it were no ajax, and output is not displayed. Though Ajax.Updater works fine if the submit button is clicked! This is an Firefox only problem. The link to the script is http://sillypoints.com/sel_prot.cgi . You can verify the problem by bringing the focus on any submit button and then pressing enter.
The code is as follows:
<script type="text/javascript">
Event.observe(window,'load',function(e)
{
Event.observe(document.forms['form_one'],'submit',handleSubmit);
});
function handleSubmit(evt)
{
var frm = Event.element(evt);
var elements = frm.elements;
new Ajax.Updater({
success: 'team',
failure: 'team'
},
'players.cgi', {
method: 'POST',
asynchronous: true,
evalScripts: true,
parameters: {
category: elements['category'].value ,
country: elements['country'].value}
});
Event.stop(evt);
}
Ajax.Responders.register({
onCreate: function() {
if($('loading') && Ajax.activeRequestCount>0)
Effect.Appear('loading',{duration:0.5,queue:'end'});
},
onComplete: function() {
if($('loading') && Ajax.activeRequestCount==0)
Effect.Fade('loading',{duration:0.5,queue:'end'});
}
});
</script>
</head>
<body style="font-family:verdana; font-size:10px">
<br><br><form id="form_one" name="form_one">
SHOW<select name="category" class=sel>
<option value="all">All Players</option>
<option value="Batsman">Batsmen</option>
<option value="Bowler">Bowlers</option>
<option value="Wk">Wicket Keepers</option>
</select>
FROM<select name="country" class=sel>
<option value="all">All Countries</option>
<option value="australia">Australia</option>
<option value="bangladesh">Bangladesh</option>
<option value="bermuda">Bermuda</option>
<option value="canada">Canada</option>
<option value="england">England</option>
<option value="india">India</option>
<option value="ireland">Ireland</option>
<option value="kenya">Kenya</option>
<option value="netherlands">Netherlands</option>
<option value="newzealand">Newzealand</option>
<option value="pakistan">Pakistan</option>
<option value="scotland">Scotland</option>
<option value="southafrica">Southafrica</option>
<option value="srilanka">Srilanka</option>
<option value="windies">Windies</option>
<option value="zimbabwe">Zimbabwe</option>
</select>
<input type="submit" id="btngo" value=GO class=btngo />
</form>
<br><br>
<table width=100% height=100% border=0>
<tr>
<td valign=top width=40% height=100%>
<div id="team" style="width:400px;float:left;"></div>
</td>
<td valign=top width=20% height=100%>
<span id='loading' style="display:none"><img src=ajax-loader.gif /></span>
</td>
<td valign=top width=40% height=100%>
<div id="players" style="width:400px;float:right;"></div>
</td>
</tr>
</table>
I've even tried changing the input type=submit to button, but to no avail.
Where am i going wrong??
Thanks,
Naveen
I am using prototype.js 1.5.1. I've implemented Ajax.Updater in a script which is working fine in both FF 2 and IE 6 except for the following problem in FF only-
When the focus is on the submit button of a form, then pressing enter SUBMITS the form with parameters passed to the url, as if it were no ajax, and output is not displayed. Though Ajax.Updater works fine if the submit button is clicked! This is an Firefox only problem. The link to the script is http://sillypoints.com/sel_prot.cgi . You can verify the problem by bringing the focus on any submit button and then pressing enter.
The code is as follows:
<script type="text/javascript">
Event.observe(window,'load',function(e)
{
Event.observe(document.forms['form_one'],'submit',handleSubmit);
});
function handleSubmit(evt)
{
var frm = Event.element(evt);
var elements = frm.elements;
new Ajax.Updater({
success: 'team',
failure: 'team'
},
'players.cgi', {
method: 'POST',
asynchronous: true,
evalScripts: true,
parameters: {
category: elements['category'].value ,
country: elements['country'].value}
});
Event.stop(evt);
}
Ajax.Responders.register({
onCreate: function() {
if($('loading') && Ajax.activeRequestCount>0)
Effect.Appear('loading',{duration:0.5,queue:'end'});
},
onComplete: function() {
if($('loading') && Ajax.activeRequestCount==0)
Effect.Fade('loading',{duration:0.5,queue:'end'});
}
});
</script>
</head>
<body style="font-family:verdana; font-size:10px">
<br><br><form id="form_one" name="form_one">
SHOW<select name="category" class=sel>
<option value="all">All Players</option>
<option value="Batsman">Batsmen</option>
<option value="Bowler">Bowlers</option>
<option value="Wk">Wicket Keepers</option>
</select>
FROM<select name="country" class=sel>
<option value="all">All Countries</option>
<option value="australia">Australia</option>
<option value="bangladesh">Bangladesh</option>
<option value="bermuda">Bermuda</option>
<option value="canada">Canada</option>
<option value="england">England</option>
<option value="india">India</option>
<option value="ireland">Ireland</option>
<option value="kenya">Kenya</option>
<option value="netherlands">Netherlands</option>
<option value="newzealand">Newzealand</option>
<option value="pakistan">Pakistan</option>
<option value="scotland">Scotland</option>
<option value="southafrica">Southafrica</option>
<option value="srilanka">Srilanka</option>
<option value="windies">Windies</option>
<option value="zimbabwe">Zimbabwe</option>
</select>
<input type="submit" id="btngo" value=GO class=btngo />
</form>
<br><br>
<table width=100% height=100% border=0>
<tr>
<td valign=top width=40% height=100%>
<div id="team" style="width:400px;float:left;"></div>
</td>
<td valign=top width=20% height=100%>
<span id='loading' style="display:none"><img src=ajax-loader.gif /></span>
</td>
<td valign=top width=40% height=100%>
<div id="players" style="width:400px;float:right;"></div>
</td>
</tr>
</table>
I've even tried changing the input type=submit to button, but to no avail.
Where am i going wrong??
Thanks,
Naveen