views:

771

answers:

4

I'm using a facebox to display a form inside a lightbox, nothing too exciting (just a couple of datepickers, some textboxes and a checkbox). However, I'm having issues with the postbacks, whenever I post back from the facebox it adds a ',' to the start of the input (so "rabbit" becomes ",rabbit") Now, I saw that there was the same issue with the modalpopup extender from the ajaxcontroltoolkit, so I assume it's a common issue.

Can anyone either explain why this is happening, or tell me how to fix it? provide a decent way of fixing this? I have actually done it, and it works very nicely, but I don't really want to answer my own bounty question so someone else give it a go!

Cheers, Ed

EDIT

See attached answer for a correct solution (I fixed this eventually but didn't want to ruin the bounty question so left the answer until afterwards).

+2  A: 

Why don't you trim the output? simply remove the ',' for each string

c0mrade
Bad move: this could quite happily cause issues further down the line if I change the lightbox or use it on a different page, and is just another random chunk of hack to maintain. It's also supremely inelegant ;) Oh, and sometimes (when there's already content in the textboxes) it'll actually come out as "content,newcontent".
Ed Woodcock
It's also supremely inelegant - this is correct I agree "but it works"
c0mrade
If we only ever went for "but it works" then we'd still be using BASIC and bicycles ;)
Ed Woodcock
"BASIC and bicycles" - true as well I voted up ur comment
c0mrade
I think it is ALWAYS in the form "content,newcontent" and ",newcontent" is just a special case where the original content was blank. So splitting on the command may be correct, although you would obviously need some strategy to handle commas in the content itself.
Ben Gartner
BASIC and bicycles? Gold, I've now got a picture of a computer powered by a bicycle with the user riding and typing away!
enbuyukfener
I have actually fixed this but I'm not sure answering your own bounty question is acceptable so I'm going to give it until the end for someone else to come to a solution, then I'll post up the code etc.
Ed Woodcock
+1  A: 

I have never programmed in ASP.NET or used facebox for that matter of fact, but here's a couple of solutions from my little research that might work.

There is a reveal function in the facebox source where the actual cloning is done:

reveal: function(data, klass) {
  $(document).trigger('beforeReveal.facebox')
  if (klass) $('#facebox .content').addClass(klass)
  $('#facebox .content').append(data) // <--- This does the cloning

The extra comma is obviously from the original form field that has been repeated. You could bind a click() function to the submit button that submits the form and in that function remove one of the clones. Since this function should run before the form data is processed, the duplicates should be taken care of.

$("#my-submit-button").click(function() { $('#facebox .content').empty(); }

If that doesn't work, then this surely will. Facebox has a bunch of hooks to run your code after various events. One of the hooks is reveal.facebox or afterReveal.facebox. Since the cloning is done on reveal, you would have to bind a custom function to run at this event, and in that function change the id/names of all elements. Append a random word like _temp or something for each element. Not the exact code, but I hope you get the idea.

(document).bind('reveal.facebox', function() {
    $("#facebox .content > *").each( 
        // change the id's/name's 
    );
});

Edit:

Looking at the html for Facebox examples, it looks like it lives inside its own <div> and copies anything that has to be shown within that div. So the structure of a sample facebox page could look like:

<html>
..
<form runat="server">

    <div id="myForm">
        // original form controls go here, probably hidden
        <input id="theId" type="text" value="" />
    </div>

    <div id="facebox">
        ...
        <div class="content">
            // the original form is copied inside this space and then displayed
            // this is the one the user interacts with and makes changes to
            <input id="theId" type="text" value="new value" />
        </div>
        ...
    </div>

</form>
..
</html>

So based on this structure and example, the input box with id=theId appears inside div#myForm and div#facebox. div#facebox is the one with the updated values that we need.

Anurag
Yeah, I did something like what you've explained (this was a starting point), however I do have one comment with methods 1 and 2: If you remove/rename the inputs, ASP can't see them so you won't get their values :) I get that you're not an ASP guy so you wouldn't know that though, so +1 anyways, this could work in another language like php where you use post vars properly.
Ed Woodcock
We are only renaming or removing one of the two inputs. I am guessing the .aspx server-side code binds to the input through the id attribute, so we leave one behind with the desired value and modify or take out the other one before submission. And thanks, I try to google my way out of problems :)
Anurag
would you update the thread with your solution Ed?
Anurag
yup, as soon as the bounty's up: don't want to spoil the fun ;)
Ed Woodcock
+1  A: 
Ed Woodcock
A: 

hi ED, i'dd like to put a datepicker on my facebox form. the form work ok... but i can't get datepicker working (it doesn't appear)! i'm a newbie in jquery.... if U can send me a .zip file containing an example page loading a facebox with a working datepicker (by clicking a input text field) i'll appreciate it! sorry for my english! my email--> [email protected]

i post some code of my page: INDEX.html ...

<script type="text/javascript" src="jquery.form.js"></script>
<link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facebox/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a[rel*=facebox]').facebox()
 }); 
</script>

.. ... inside BODY: ...

<a href="contact.php" rel="facebox">
<img src="../immagini/descr.jpg" alt="" width="858" height="104" border="0">
</a>

beppe