asked on

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

wafischer

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?

tarahbunton

ASKER

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).

wafischer

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.

tarahbunton

ASKER

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.

tarahbunton

ASKER

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.

wafischer

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.

tarahbunton

ASKER

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?

tarahbunton

ASKER

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.

ASKER CERTIFIED SOLUTION

wafischer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

tarahbunton

ASKER

It is the whole and complete answer.