AJAX Form in Popup Box -- HOW???

Hi everyone.

I am trying to build a system where a user can click on an item on my page which will pop up a box with a form in it. They fill out the form and hit submit, then it is sent through AJAX to submit and the page is updated without refresh.

I know how to get AJAX submission without page refresh fine, and I know how to get popup boxes. I use fancy box and I can get things to popup fine. The trouble is getting the two to work together

I can't seem to get any of the DOM elements that appear within the popup box to respond to Javascript in any way, so AJAX submission seems impossible

I know this kind of thing is possible - I see it all over the place on Facebook. The question is, "How?"

In case you're curious, I'm using jQuery 1.3.1, and at the moment I'm using the Fancy Box plugin , though I've tried several others with the same basic result: I can get a form in a popup box, but can't get the DOM objects to obey my Javascript

Any help would be appreciated.

Thanks!

 

How do you put the form in the popup box ?

inline or iframed ?

 

Well I'll go with whatever works, but I would think that in order to update the current page, it would need to be inline right? So that's what I've got for now.

The basic concept is that I'm showing a table output of data. Let's say it's an address book type data, and I want them to be able to click on an entry and edit the info with the popup box and then when they click submit, the DB is updated and the row of the table is also updated to reflect the change.

So I've got it basically like this:

<table>

        <tr>
                <th>Name</th>
                <th>Address</th>
                <th>City</th>
                <th>State</th>
                <th>Postal Code</th>
                <th>Country</th>
                <th>Phone Number</th>
        <tr>

        <tr id="row1">
                <td>John Doe</td>
                <td>111 Some St.</td>
                <td>Anywhereville</td>
                <td>NY</td>
                <td>12345</td>
                <td>USA</td>
                <td>555-555-5555</td>
        <tr>

        <tr style="display:none" id="row1form">
                <td colspan="7">
                        <form>
                                .........
                        </form>
                </td>
        <tr>

        <tr id="row2">
                <td>Jane Doe</td>
........
</table>

Code (markup):

So I'd like the form in the hidden row to show up in the popup box. I can get that part to work, but then it's the ajax submission and updating the row part that is giving me fits.

Thanks for taking the time to help.