Close FancyBox after action?

Question

I've got some links on my page that when clicked, open a fancybox. Inside the fancybox there are some action buttons (like "close item", "delete item"). When those buttons are clicked, I want it to submit the form as usual, and then close the fancybox. How can I rig it up to do that without interfering with the POST?

Note: I'm not using Ajax.

Answer 1

If your back end returns something, example mine echoes "sent" on completion you could do this:

$.post("php/send_mail.php", function(result){
    if(result == 'sent'){
    //$('#success').slideDown('slow'); -My code
    //$('#submit').hide(); -My code
    $.fancybox.close();
    }
});

Only in your case you would want to do $.fancybox.close()

If you're doing this via $.ajax instead of .post you could use success: instead.

Sorry if this doesn't help.

Answer 2

Mark,

When you say perform the post, I assume you mean that you want the fancybox closed as soon as the request is sent (or as close to that time as possible)? I am assuming that you are serializing pieces of the fancyBox as part of the POST and don't want to close it too early.

In that case I'd leverage the jQuery.ajax beforeSend callback to close the box just before the request is sent out:

$.ajax({
  beforeSend: function() {
    //close fancybox here
  }
});

The XMLHttpRequest is created at that point, so there shouldn't be any effect on the request.

--Andrew

Answer 3

How about hiding the form, moving the form element to under the body element, then calling form.submit().

Answer 4

Hi Mark, I'm not sure to understand your problem but I notice when fancybox opens with many links, buttons created dynamicaly in title property of fancybox, those elements are not in the DOM of your page. And you can not interact with element of your page.

I don't know how you create your action buttons (like "close item", "delete item"), maybe you should explain this, to help us to help you :)