Solved

Coldfusion/Fancybox jQuery Fancybox Load hangs

Posted on 2010-09-23
10
993 Views
Last Modified: 2012-05-10
Hello,
I'm using fancybox in a coldfusion application to display a login screen. For some reason, every once in a while, the fancybox hangs and does not display the login screen. We have been unable to determine any pattern to why it might be doing this.

I added the code that displays the login error message even though it is not executed at the time the fancybox is hanging because the msg param had not been passed. Just adding it just in case.


jQuery function that creates the login fancybox. 
$(document).ready(function() {
  //creates the fancybox for the login screen		  

$("a.msgfancy_login").fancybox({			     'titlePosition': 'inside', 
  'transitionIn': 'none',
  'transitionOut': 'none'
});

}

// links that call the jQuery fancybox
<a href="#application.baseurl#login_sm.cfm" class="msgfancy_login">
   <img src="#application.graphics_url#/login_brand1.gif" width="310" height="123" border="0"/>
</a>
<a href="#application.baseurl#login_sm.cfm" class="msgfancy_login">
   <img src="#application.graphics_url#/login_brand2.gif" width="352" height="123" border="0"/>
</a>
<a href="#application.baseurl#login_sm.cfm" class="msgfancy_login">
   <img src="#application.graphics_url#/login_brand3.gif" width="348" height="123" border="0"/>
</a>


// additional code to display login error message:

<cfif isdefined('msg')>
   <cfoutput>
	var #toScript(msg, "jsOutputMsg")#;
   </cfoutput>

				jQuery(document).ready(function() {
   $("a.msgfancy_login").attr("href",   
   "#application.baseurl#login_sm.cfm?msg=" + jsOutputMsg); 
  
   $("a.msgfancy_login").trigger('click');
});
</cfif>

Open in new window

0
Comment
Question by:tarahbunton
  • 6
  • 4
10 Comments
 
LVL 3

Expert Comment

by:wafischer
ID: 33746818
Does this problem occur with a specific browser, or browser version or is it independent of the browser?  Also, is this on many computers, your own, or just a handful?
0
 

Author Comment

by:tarahbunton
ID: 33747032
I am not sure if it is browser specific. The client has sent the error screen shot on IE6 and IE7 (which is just the jQuery loading animation). It has been more than one computer, but they are all located in the same building (so probably all have the same configuration).
0
 
LVL 3

Expert Comment

by:wafischer
ID: 33747153
Alright, drastically different browsers, IE7 may require compatibility mode to function properly.  

But in any case, what release of JQuery library are you using?  I belive the most current version is  1.4.1 or maybe it's 1.4.2 now, updating to that later library may fix the problem.

Also, inside your class are you using classes or IDs?  FancyBox works better with classes as opposed to IDs for CSS.  Making that change may also correct the problem.

This error feels like it has more to do with CSS.
0
 

Author Comment

by:tarahbunton
ID: 33747711
jQuery we are using: jquery-1.4.2.js
fancybox is: jquery.fancybox-1.3.0.pack.js

We are using classes as opposed to divs, but we have not defined the class in a css file (but this has never been a problem before).

Once the form in the fancybox is submitted, we are calling code from a separate coldfusion cfm file.

Interestingly, we (the developers) have not been able to replicate this error that the client is getting.
0
 

Author Comment

by:tarahbunton
ID: 33747833
Ok, so I found a "true" version of ie7 (we've been using ie8 in compatibility mode). It seems like it occurs the third time the link is clicked after the page load.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 3

Expert Comment

by:wafischer
ID: 33747972
If you are using the Internet Explorer Developer Toolbar check it for any errors on that third click.  If not download and install it, it's great for finding little bugs like this.
Link here: http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 for IE7, includes a link on that page to the IE8 developer toolbar.

Also if a warning appears in the bottom left of IE that has the yellow caution sign with the error "Done , but with errors on page" double-click on it to check where the error occurs.
0
 

Author Comment

by:tarahbunton
ID: 33748334
I did as you said and there were no errors.

I did add iframe type and it no longer hangs. When is it correct to use the fancybox default and when the iframe?
0
 

Author Comment

by:tarahbunton
ID: 33748476
Hey, got it working.
The issue was corrected by adding:
'ajax' : { cache: false} to the fancybox jQuery:
$("a.msgfancy_login").fancybox({                   
   'titlePosition': 'inside',
  'transitionIn': 'none',
  'transitionOut': 'none'
});

and it seems to have corrected the issue.

Thanks for your help.
0
 
LVL 3

Accepted Solution

by:
wafischer earned 500 total points
ID: 33748553
For your case it does not matter, since you're using this as a login screen.  

For other uses, using an iframe would be more appropriate when you want to display data from another web page or a photo gallery etc.  Using an iframe for a login window I would set the variable hideOnContentClick to false.
0
 

Author Closing Comment

by:tarahbunton
ID: 33885310
It is the whole and complete answer.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
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)

760 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

22 Experts available now in Live!

Get 1:1 Help Now