Close fancybox programmatically

[strager]

I'm looking for a way to close my open fancybox in my code. I need to
close it as a part of the completion of an Ajax request.

The method suggested in the FAQ doesn't work ($.fn.fancybox.close()).
I've also tried 'clicking' the close button ($('#fancy_close').click
()), but that doesn't work, either.

[jeremyBass]

use

.trigger('click')

;)

[strager]

I tried this:

$('#fancy_close').trigger('click');
alert('closed');

The alert appears, but the fancybox does not disappear.

Am I doing something wrong?

[jeremyBass]

try


$('id or class').fancybox({}).trigger('click');

> > > ()), but that doesn't work, either.- Hide quoted text -
>
> - Show quoted text -

[jeremyBass]

Oh.,.. more to the point..... as I bet you don't want to just close
it... but you want it open and time/event program the close ... try it
this way....

$('id or class').fancybox({

'callbackOnShow': function() {
/// this is where you add you timmer or event call
/// which will have this in the fun for that...

$('id or class').fancybox({}).trigger('click');



}

}).trigger('click');



so if you just put it in as is... it shoud run and go up and then
close... if not then try the other call backs...

Hope that helps

cheers
jeremyBass

> > - Show quoted text -- Hide quoted text -

[strager]

I'm still getting errors when I do that.

I tried this code:

$('body').fancybox({}).trigger('click');

I get this error from Firefox:

$("body").fancybox is not a function

Am I doing something wrong?

[jeremyBass]

Working modle

http://www.corbensproducts.com/

click the login at the top right... then submit... when it errors
you'll see what I have be low runs ok there...



ok... here is a working modle.....

if ($(".errorLOGIN").length){
$(".errorlink").attr({"href":"#errorbox"});
$('a.errorlink').fancybox({
'hideOnContentClick': true,
'frameHeight' : 119
}).trigger('click');

window.setTimeout(function() {cllMe();}, 1000);
}
function cllMe(){

$('#fancy_close').trigger('click');

window.setTimeout(function() {callMe();}, 1000);

}


function callMe(){
$(".login").attr({"href":"#small_box"});
$('a.login').fancybox({'hideOnContentClick': false,
'frameHeight' : 119
}).trigger('click');
}



Note the 'hideOnContentClick': true, and the call to the other
fuctions... it's happen so fast if you don't do it right...

hope that helps
jeremyBass

[strager]

I've tried to use window.setTimeout, and it still doesn't work.

I think there's a bug with that site. The $('#fancy_close').trigger
('click'); does nothing. Try commenting it; the site will still
work. I think it works because when you call .fancybox() again, the
old fancybox is cleared then the new one appears.

I'm not looking to do something similar to a timeout like your
example, though. I have a button labeled "save" which sends an Ajax
request to save data then (should) close the fancybox window. I also
have a button labeled "cancel" in addition to the close button
provided by fancybox which just closes the window.

[jeremyBass]

Ok... so you were not sure it was working... I went and commented it
out...

you'll see with out it, it just switches... (I left it up for you to
see)

now just add the call to the fun on the ajax call back or what have
you and it'll work...

Trust me you can do what you’re asking... it's just you’re not doing
it right... that's a good thing thou :D

hope that helps

Cheers
jeremyBass

[strager]

Ah, okay, I see the 'new' transition...

What if you waited between .fancybox() calls?

Anyway, it's still not working. Here's more of my code. It's called
on the callbackOnShow of the fancybox.

var dialog = $('#fancy_ajax');

dialog.find('form').submit(function() {
$.ajax({
data: $(this).serialize(),
type: this.method ? this.method : 'post',
url: this.action ? this.action : link,
complete: function() {
// XXX This should close the fancy box. XXX

function closeFancybox() {

$('#fancy_close').trigger('click');
alert('closed');
}

window.setTimeout(function() { closeFancybox() },
1000);
}
});

return false;
});

Replacing the entire function (complete) with just $
('#fancy_close').trigger('click'); doesn't work either.

[jeremyBass]

try

var dialog = $('#fancy_ajax');

dialog.find('form').submit(function() {
$.ajax({
data: $(this).serialize(),
type: this.method ? this.method : 'post',
url: this.action ? this.action : link,
complete: function() {

window.setTimeout(function() { closeFancybox() },
1000);
}
});

return false;
});

function closeFancybox() {
$('#fancy_close').trigger('click');

// alert('closed'); probably blocking and stoping
the event

[jeremyBass]

if that was just part... you need to put the whole up ... it may be
something up the chain not working...

[jeremyBass]

ps... if you stay close to the forum for a bit I'm on for the next
30-45 mins... then I'll disappear for a while again

[strager]

Here's a fuller and simplified example.

function closeFancybox() {
$('#fancy_close').trigger('click');
}

function fixDialog(link) {

var dialog = $('#fancy_ajax');

// Some other stuff is here which corrects some styles and things
inside the content.
// Commenting doesn't affect the problem, though.

/* Handle form submissions. */
dialog.find('form').submit(function() {
// TODO Actually submit form.
closeFancybox();

return false;
});
}

// ...

$(document.createElement('a')).text(word).attr('title', 'Edit
word').appendTo(li)
.attr('href', 'url here')
.each(function() {
var a = this;
$(a).fancybox({
hideOnContentClick: false,
callbackOnShow: function() {
fixDialog(a.href);
}
});
});

When I click the link created in the Javascript, the fancybox appears
as it should. When I click the submit button inside the fancybox, the
fancybox does not close as it should.

[jeremyBass]

This would work?

function fixDialog(link) {
var dialog = $('#fancy_ajax');

// Some other stuff is here which corrects some styles and things
inside the content.
// Commenting doesn't affect the problem, though.

/* Handle form submissions. */
dialog.find('form').submit(function() {
// TODO Actually submit form.
$('#fancy_close').trigger('click');

return false;
});
}

if not try binding the click event on the submit button... you may be
losing the event bubble... Well, I'm off for a long trip... be back in
a week or so... sorry ... Hope I was some help...

Cheers
jeremyBass

[strager]

Still not working.

=[

I hooked up a custom event handler to #fancy_close like this:

$('#fancy_close').click(function() {
alert('clicked');
});

When clicking the X button, the alert shows and the fancybox closes.

When clicking my own button, the alert shows, but the fancybox does
not close!

Am I doing something wrong here? O_o

> ...
>
> read more »

[finco]

Could the problem be that you are operating modally when the fancybox
is open? If so, clicking elsewhere will not yield results.

> ...
>
> read more »

[strager]

Can you elaborate on what you mean here?

If I click the overlay manually, the fancybox closes, if that's what
you're asking. Clicking programatically fails similar to clicking the
#fancy_close div, however.

> ...
>
> read more »

[strager]

Okay, I found the problem.

I was loading jQuery, then fancybox, then jQuery again. This was
resetting the jQuery variable, which killed the functions, I guess.

Anyway, removing the second jQuery script call fixed the problem.

Thanks for your help!

> ...
>
> read more »