JQuery Facebox Plugin : Get it inside the form tag

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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

Method 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.

Method 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.

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x