Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1044
  • Last Modified:

Coldfusion/Fancybox jQuery Fancybox Load hangs

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
tarahbunton
Asked:
tarahbunton
  • 6
  • 4
1 Solution
 
wafischerCommented:
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
 
tarahbuntonAuthor Commented:
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
 
wafischerCommented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
tarahbuntonAuthor Commented:
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
 
tarahbuntonAuthor Commented:
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
 
wafischerCommented:
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
 
tarahbuntonAuthor Commented:
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
 
tarahbuntonAuthor Commented:
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
 
wafischerCommented:
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
 
tarahbuntonAuthor Commented:
It is the whole and complete answer.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now