Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jQuery facebox and forms submissions - not working in Firefox

Posted on 2008-10-17
9
Medium Priority
?
5,013 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Find the IP of a Linux Server in Command Line

Knowing your server’s IP address(s) can be a useful bit of information to have for various reasons. This tutorial will teach you how to check the IPs of any modern Linux server. To follow along will simply need access to the server via SSH or TTY.

 

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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)

730 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