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
});
});
Or something similar anyway, I will confess I'm not too familiar with
FancyBox.
On Aug 26, 3:32 pm, D A <[email protected]> wrote:
> After a lot more testing, I think I know what's going on. I'm not sure
> if it's a jQuery issue or javascript in general.
>
> I've asked this on the FancyBox group, but thought I'd ask in here too
> as I have a hunch it's a more universal concept with jQuery that I
> need to grasp.
>
> What my script is doing:
>
> - calling .load() to populate a DIV with external content
> - calling fancyBox() to then display said DIV with content as a modal window.
>
> The end results is that I get a modal window that shows the contents
> of the div from the LAST .load()
>
> What I think happens is:
>
> 1) jquery Loads content into div but does NOT render it yet.
> 2) fancyBox grabs div but does NOT render it yet.
> 3) jquery call ends so it then begins the rendering
> 4) loaded content is displayed inside of DIV
> 5) Fancy box displays the div as it was before render (ie, the
> original blank DIV).
>
> Is that a correct understanding? In otherwords, in any particular
> chain of events in jQuery, all events are performed and then they are
> all rendered, rather than going one-by-one through each event.
>
> If that is a correct understanding, any suggestions as to how to get
> the visual result that I want?
>
> -DA
