jQuery facebox and forms submissions - not working in Firefox

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

Dave6969Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sh0eCommented:

$(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
Dave6969Author Commented:
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
sh0eCommented:

$(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
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Dave6969Author Commented:
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
sh0eCommented:
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
hieloCommented:
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
Dave6969Author Commented:
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
sh0eCommented:
remove $(document).ready() enclosure
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dave6969Author Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.