Solved

jQuery facebox and forms submissions - not working in Firefox

Posted on 2008-10-17
9
4,990 Views
Last Modified: 2012-05-05
Hi everyone.

I don't know if there are any jQuery experts here, but I thought I'd try as I've had some really great help so far from you experts :-)

I'm using the jQuery form plugin from http://www.malsup.com/jquery/form/. I need to query a remote page (<a href="remote_page.html"rel="facebox">)  as the form is created entirely dynamically (server side) and can change substantially according to the link clicked.

The code below works perfectly for IE6, but when I try the same thing in Firefox (v2) it *always* submits normally, going to the target page rather than load the message into the facebox. The form also works
fine in Firefox when not within the facebox.

I've tried everything I can think of to disable the submit, but nothing seems to work. I'd appreciate some help because I'm tearing my hair out with it (and I've not got a lot left!). The form is a bog standard POST, but I've tried GET as well. And even using the URL option in the forms plugin, as well as ajaxSubmit. Nothing I do seems to work. :-(

Hope someone can help!
$(document).ready(function() {
//This is where I try to disable the submit button (unsuccessfully!)
$("#facebox #submitButton").click(function(){
                return false;
        });
    $('#facebox #myform').ajaxForm({
         target: '#facebox #myformsubmitted',
         //This displays the success message.
         success: function(){
            $('#facebox #myformsubmitted').fadeIn('slow').fadeOut('slow');
            $('#facebox').animate({opacity: 1.0},2000).fadeOut('slow');
            $('#facebox_overlay').remove();
        }
    });

Open in new window

0
Comment
Question by:Dave6969
  • 4
  • 4
9 Comments
 
LVL 16

Expert Comment

by:sh0e
ID: 22743557

$(document).ready(function() {
//This is where I try to disable the submit button (unsuccessfully!)
$("#facebox #submitButton").click(function(){
                return false;
        });
$("#facebox").submit(function(){return false;});
    $('#facebox #myform').ajaxForm({
         target: '#facebox #myformsubmitted',
         //This displays the success message.
         success: function(){
            $('#facebox #myformsubmitted').fadeIn('slow').fadeOut('slow');
            $('#facebox').animate({opacity: 1.0},2000).fadeOut('slow');
            $('#facebox_overlay').remove();
        }
    });

Open in new window

0
 

Author Comment

by:Dave6969
ID: 22744500
I got all excited there but it doesn't work. Firefox still submits directly rather than through AJAX. :-(

I thought I may have inadvertently messed something up when editing to make my code seem clearer, so here is the *precise* code that is running fine in IE but still refuses to work in Firefox.
$(document).ready(function() {
$("#facebox").submit(function(){return false;});
    $('#facebox #filelabelform').ajaxForm({
         target: '#facebox #filelabelformsubmitted',
         //This displays the success message.
         success: function(){
            $('#facebox #filelabelformsubmitted').fadeIn('slow').fadeOut('slow');
            $('#facebox').animate({opacity: 1.0},2000).fadeOut('slow');
            $('#facebox_overlay').remove();
        }
    });
});

Open in new window

0
 
LVL 16

Expert Comment

by:sh0e
ID: 22746613

$(document).ready(function() {
$("#facebox #filelabelform").submit(function(){return false;});
    $('#facebox #filelabelform').ajaxForm({
         target: '#facebox #filelabelformsubmitted',
         //This displays the success message.
         success: function(){
            $('#facebox #filelabelformsubmitted').fadeIn('slow').fadeOut('slow');
            $('#facebox').animate({opacity: 1.0},2000).fadeOut('slow');
            $('#facebox_overlay').remove();
        }
    });
});

Open in new window

0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:Dave6969
ID: 22753066
Thanks. However I've noticed something even more problematic. AJAX is not working *at all* in a facebox in Firefox. I just tried a simple addClass and it didn't work at all, although when I tried the page by itself the query worked fine.

I'm guessing there might be a problem with facebox in this respect (after all it was only supposed to be an image viewer).

Unless anyone has any suggestions I guess I'm going to have to go to the forums for facebox - although they are nowhere near as responsive as the experts here!!
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22753270
I actually tested this code and found it to work.

Can you show a demo site?  Or the full source?  It would make things much easier.
Or just all the HTML tags being worked with.

Did you forget to include jquery.js?  addClass is not actually AJAX, but a DOM manipulation function of JQuery.
Something similar to below:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://www.malsup.com/jquery/form/jquery.form.js"></script>
$(document).ready(function() {
$("#facebox #filelabelform").submit(function(){return false;});
    $('#facebox #filelabelform').ajaxForm({
         target: '#facebox #filelabelformsubmitted',
         //This displays the success message.
         success: function(){
            $('#facebox #filelabelformsubmitted').fadeIn('slow').fadeOut('slow');
            $('#facebox').animate({opacity: 1.0},2000).fadeOut('slow');
            $('#facebox_overlay').remove();
        }
    });
});
<div id="facebox" style="display:block">
<form id="filelabelform" action="test">
<input type="submit" />
</form>
</div>
<div id="facebox_overlay" style="display:block">facebox overlay</div>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 22755133
Is what you posted originally the complete code you are executing at load time? Your anonymous function on line one is not closed. It would help to see the rest of your markup as well to make sure you are referencing the elements correctly. Look out for typos as well. Try:
$(document).ready( function() {
	//This is where I try to disable the submit button (unsuccessfully!)
	$("#submitButton").bind("click", function(){return false;});
	$('#myform').ajaxForm({
         target: '#myformsubmitted',
         //This displays the success message.
         success: function(){
            $('##myformsubmitted').fadeIn('slow').fadeOut('slow');
            $('#facebox').animate({opacity: 1.0},2000).fadeOut('slow');
            $('#facebox_overlay').remove();
        }
    });
});

Open in new window

0
 

Author Comment

by:Dave6969
ID: 22755379
I'm afraid I'm working on a corporate intranet and so behind a firewall so I can't show you a demo site. I discovered that another project which was solely for IE (the corporate stardard) and used facebox as well, didn't work in firefox (v2) either.

Yes I am loading the jquery library OK. Sorry yes I know addClass isn't an AJAX function (whoops!). I know the scripts work because I did my initial development with IE (and yes now I realise I should have done it in firefox first and then tweaked for IE!). I amviewing the same pages in IE and firefox.

The nearest I can do is post you the full code of the page that I'm calling with facebox, which you'll find below. I've removed all the server side code, as I'm 100% certain it's OK, and just left the variables encapsulated with $. The page would be called from a link thus: <a rel="facebox" href="categorisefiles.html"> and the remote file is in the same directory as the parent(?) file. I've included all the relevant styles for you as well.

I've started using facebox for lots of things as it solves a great many problems, so you've given me some hope that it's something in the way I'm putting the remote pages together that's causing things to mess up. Maybe I need a damn good talking to about it!  I've just spent half the weekend trying to code a solution myself (and ultimately failing). But hey... it's all learning! :-)

Sh0e: Yes that code would work in a standalone page. But my problems are getting the pages loading in a facebox popup. All Jquery functions outside of the facebox popup are working fine for me.

As I said before, the code below works FULLY in IE. In firefox it works fine as well... UNTIL I call it in as a remote page with facebox then the facebox just freezes when I click anything. As I said, I am finding the same problem in Firefox with apps that just use the standard jquery functions.
 

<html>
<head>
 
<style type="text/css">
#filearticle {padding:0; margin:0}
#filearticle form {margin:0; padding: 0}
h1.articletitle {font-size: 10pt; color: #FFFFFF; background: #0077bb; padding: 2px; margin: 0 }
#articlebody {padding: 5px}
#articlebody p {margin: 5px 0 5px 0}
#articlebody ul {margin: 5px 40px 5px 30px; list-style-type: square}
dl{
	width: 100%;
	padding: 0;
	background:#FFFFFF;
	margin: 0;
	text-align: left;
	clear: both;
	background: none;
 
	
}
dl dt{
	float: left;
	width: 25%;
	padding: .2em 0% 0.5em 0%;
	margin: 0 ;
	font-weight: bold;
	clear: left;
	font-size: 8pt;
 
}
 
dl dd{
	width: 70%;
	padding: .2em 0% 0.5em 0;
	float: left;
	margin: 0 ;
	font-size: 8pt;
}
input {border:1px solid #808080; background: #EEEEEE; font-size: 8pt; font-family: Tahoma}
.quickalert1 {background: #0077bb; color: #FFFFFF; text-align: center; font-size: 10pt; font-weight: normal; padding: 20px; width: 60%; position: absolute; top: 10%; left: 20%; border-top:1px solid #99ccff; border-left:1px solid #99ccff;border-right:1px solid #003366;border-bottom:1px solid #003366;}    
#filelabelformsubmitted {display:none}
</style>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
   
    
    $('#facebox #filelabelform').ajaxForm({ 
        // target identifies the element(s) to update with the server response 
        target: '#facebox #filelabelformsubmitted', 
        success: function(){ 
            $('#facebox #filelabelformsubmitted').fadeIn('slow').fadeOut('slow');
            $('#facebox').animate({opacity: 1.0}, 2000).fadeOut('slow');
            $('#facebox_overlay').remove();
        } 
    }); 
});
    </script> 
 
 
</head>
<body>
 
<div id="filelabelformsubmitted" class="quickalert1"></div>
<div id="filearticle">
<h1 class="articletitle">File Details</h1>
<div id="articlebody">
<form id="filelabelform" method="post" action="filelabelscript.dpe">
<dl>
<dt>File name:</dt><dd>$filename$</dd>
<dt>File entity:</dt><dd>$entity$</dd>
<input type="hidden" name="filename" value="$filename$">
<input type="hidden" name="entity" value="$entity$">
<dt>File label:</dt><dd><input type="text" name="filelabel" size="40" value="$filelabel1$" id="filelabel"></dd>
<dt>File Category1:</dt><dd><select size="1" name="filecategory1" id="filecategory1">
                               
                               <option value="">Select...</option>
                               
                               <option value="$id$" selected>$category$</option>
                               
                              </select></dd>
                              
                              
<dt>File Category2:</dt><dd><select size="1" name="filecategory2" id="filecategory2">
                               
                               <option value="">Select...</option>
                               
                               <option value="$id$" selected>$category$</option>
                               
                              </select></dd>
                              
<dt>File Language:</dt><dd><select size="1" name="filelanguage" id="filelanguage">
                               
                               <option value="">Select...</option>
                               
                               <option value="$id$" selected>$language$</option>
                               
                              </select></dd>
<dt>File Positioning:</dt><dd><select size="1" name="fileposition" id="fileposition">
                               
                               <option value="">Select...</option>
                               
                               <option value="$id$" selected>$position$</option>
                               
                              </select>
 
</dd>
<dt></dt><dd><input type="submit" value="submit" id="btnSubmit"></dd>
</dl>
</form>
 
</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22755795
remove $(document).ready() enclosure
0
 

Author Comment

by:Dave6969
ID: 22758627
WOW!

That simple?

Well you certainly earned your 500 points!

Looks like I wasted a weekend, but at least I'm learning :-)

Thank you!
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Weekend adv creator 3 39
jQuery detect if it is a mobile device 3 201
Javascript and Jquery not firing 9 49
Jquery Validation Messages Not Showing Up 3 16
by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question