Solved

jQuery facebox and forms submissions - not working in Firefox

Posted on 2008-10-17
9
4,979 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
Comment Utility

$(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
Comment Utility
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
Comment Utility

$(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
 

Author Comment

by:Dave6969
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 16

Expert Comment

by:sh0e
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
remove $(document).ready() enclosure
0
 

Author Comment

by:Dave6969
Comment Utility
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now