> Looks like a case of "asynchronous-itis". You're reading the val() of
> the load()-ed div before the Ajax call has had a chance to respond.
>
> What you'll want to do is add the fancyBox stuff to the callback
> function for load() like this:
>
> $('div#resultsDataContainer').load('locatorResults.cfm',{'zip':$
> ('#branchLookup').val()},function(){
>
> $('#LocatorGoLink').fancybox({
> 'hideOnContentClick': false,
> frameWidth: 660,
> frameHeight: 700,
> overlayOpacity: .6,
> padding: 0
> });
>
> });
Well, I came up with this:
$('#branchLocatorGoLink').click(function() {
$('div#resultsDataContainer').load('locatorResults.cfm',{'zip':$('#branchLookup').val()},function(){
$('#branchLocatorGoLink').fancybox({
'hideOnContentClick': false,
frameWidth: 660,
frameHeight: 700,
overlayOpacity: .6,
padding: 0
});
});
});
The problem is that fancybox (for lack of proper terminology) has to
attach itself to the link as a click event BEFORE I actually click the
object, so setting it up from a click event won't actually trigger the
fancy box.
For now, the solution was to forgo any modal box that moves things
around in the DOM (as it appears FancyBox and ThickBox do) and instead
am loading it into a div and changing the visuals via CSS only. That
seems to work fine.
The problem seems to arise when I both try and load something into the
DOM node via ajax AND move the DOM node as it seems to be
moving/cloning the node before it's being populated with from the ajax
call.
All that said, this doesn't seem to be THAT unusual of a combination
of events so I hope someone has done something similar and knows the
fix/workaround... ;)
-DA
