JQuery Facebox Plugin : Get it inside the form tag

Question

I am wanting to use the Facebox plugin for JQuery but am having a few issues getting it running how I want. The div that houses the facebox content is created outside of the tag so even though I am loading up some web controls none of them are firing back to the server.

Has anyone dealt with this that can give me some pointers?

Answer 1

poking around the facebox.js I came across this line in the function init(settings)...

$('body').append($.facebox.settings.faceboxHtml)

I changed that to ...

$('#aspnetForm').append($.facebox.settings.faceboxHtml)

and it loads up in the form tag, not sure yet if there are any side effects

Answer 2

Great stuff!! Have you had any problems with this? I encountered the same problem within a day of you :)

http://groups.google.com/group/facebox/browse_thread/thread/3190f9385c2e03e4

Answer 3

You can use this code to register the PostBack event:

btn.OnClientClick = string.Format("{0}; $.facebox.close();",ClientScript.GetPostBackEventReference(btn, null));

this will let the button fires a PostBack.

Answer 4

Hi i am working on a social network site. I am using facebox in my application for writing comments. Funcationality is working well on button's click event but after completing the functionality facebox is redirecting to their original form. Any help.....

Answer 5

facebox problem with checkbox changed event and also with post back with in ajax control. Any help....

Answer 6

Well, i wanted to comment on your answer, but i'm one point shy of being able to comment.

I am using facebox to show an edit dialog from a RadGrid, containing some RadComboBoxes, all of which are ajaxified. But on posting back, the combobox values were not being transmitted to the server.

Your fix of changing the facebox script to use #aspnetForm instead of body worked PERFECTLY!

Thanks for the answer! CheerZ!

Answer 7

Even after the : $('#aspnetForm').append($.facebox.settings.faceboxHtml)

change I found it problematic. When you look at the page source using firebug you see that all the html in the div assigned to be the facebox div is doubled up (repeated).

So all of those controls with supposed unique id's are doubled up on the page, that can't be good on the postback, i've decided putting asp.net web controls in a facebox is not a good idea.

Answer 8

I modified facbox.js to do this. Maybe there is a better solution but this works like a charm

Here what i did:

1. add two lines on top of facbox.js before '(function($)'

var willremove = '';
var willremovehtml = '';

1. find "reveal: function(data, klass) {" and add this lines before the first line of function.

willremove = data.attr('id')
willremovehtml = $('#'+willremove).html()
$('#'+willremove).html('')

1. find "close: function() {" and make it look like below.

close: function() {
$(document).trigger('close.facebox')
$('#'+willremove).html(willremovehtml)
willremovehtml = ''
willremove = ''
return false
}