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

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 3

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 4

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 = '';

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

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

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

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