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 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    296
    Thanks
    3
    Thanked 4 Times in 4 Posts

    Ajax.Updater causing problems in Firefox

    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:

    Code:
    <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

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    SUBMITS the form with parameters passed to the url, as if it were no ajax, and output is not displayed
    Give your form a method an enctype in the form
    Code:
    <form name="" method="post" action="" enctype="application/x-www-form-urlencoded">
      -or-
    enctype="multipart/form-data"
    I have no experience with prototype.js and what options you would have to contol FF and the enter key.

    You could disable the enter key on the submit button with:
    Code:
    <input type="submit" id="bingo" value="Submit" onkeydown="return false" />
    but it makes the form less accessable.
    Last edited by rwedge; 08-24-2007 at 05:02 AM.


  •  

    Posting Permissions

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