Question

I have a page with a variable number of tables which are dynamically generated. Each table lists a group of “products” which the user can add/edit/delete. Underneath each table is a button. I want each button to save the products in the table above it to a “package”, which is just a group of products. When the button is clicked, I want it to launch a jQuery dialog form where a user can enter a name and description for the package that they’re creating.

Is there a way for me to get a reference to the button that launched the jQuery dialog in the first place within the scope of the dialog’s “buttons” functions? That way, when the user clicks the “save” button in the dialog, I can submit both the form that is contained in the dialog itself (name and description) AND also submit the product data that is contained within the table closest in the page markup to the particular button that the user clicked to launch the form?

Edit: I forgot to mention that the WHOLE page (all tables) are already contained within one form element. This is because a user can also save all of the products in the three tables as an “oportunity”, which is a group of groups of products. Here is a little pseudo html to show the layout:

<form>
    <table>
    </table>
    <table>
    </table>
    <table>
    </table>
</form>

For the purpose of allowing user to save all products in all of the tables to an “opportunity”, I need to leave all three tables wrapped in one form tag. However, when a user clicks the “save package” button under a particular table, I want to only submit the data in that one table and the name and description entered by the user in the dialog.

Answer 1

define a global variable in js and set its value if one of the button’s clicked.
in this example “id” is used .

$('.button').click(function(){
   id = $(this).index();
   $('#dialog').fadeIn('1000');
    return false;
});

maybe this can be helpful :
http://jsfiddle.net/Vm7PL/1/

also you can use jquery-ui dialog box .