AJAX forms within a table's td

I have a table with a dynamic list of rows. Within 1 cell on each row, I want the user to be able to click in the cell and call a form. The form would allow the user to change the values of that cell. Right now, with my current implementation, if I only have 1 row, all works great. If I have 2+ rows, the form is not rendered at all. I believe it is because the form needs a unique id, but I am not sure how to do that with this implementation. Any advice/thoughts would be appreciated.

<script type="text/javascript">
    $(document).ready(function() {


        $(".status").click(function(e) {
            e.preventDefault();
 开发者_开发技巧           $("fieldset#status_menu").toggle();
            $(".status").toggleClass("menu-open");
        });

        $("fieldset#status_menu").mouseup(function() {
            return false
        });
        $(document).mouseup(function(e) {
            if($(e.target).parent("a.status").length==0) {
                $(".status").removeClass("menu-open");
                $("fieldset#status_menu").hide();
            }
        });

    });
</script>

<tr>

    <td>
        <a href="/contract/view/id/<?php echo $this->contract_id; ?>">Ads</a>
    </td>
    <td><a href="/customers/<?php echo $this->customer_id ?>/<?php echo $this->contract_name ?>.pdf"><?php echo stripcslashes(htmlspecialchars_decode($this->escape($this->contract_name))) ?></a></td>
    <td><?php echo $this->escape($this->contract_startdate) ?></td>
    <td><?php echo $this->escape($this->contract_length) . " " ?> month(s)</td>
    <td>$<?php echo ($this->escape($this->contract_value) - $this->escape($this->contract_discount)) ?></td>
    <td>
        <a href="#" class="status"><?php echo $this->escape($this->contract_status) ?></a>
        <fieldset id="status_menu">

            <form enctype="multipart/form-data" action="/contract/updatestatus/id/<?php echo $this->contract_id?>" method="post" name=""><dl class="zend_form">

                    <input type="hidden" name="contract_id" value="" id="contract_id" />
                    <fieldset id="fieldset-AssignDetail">
                        <dt id="contractStatus-label"><label disableFor="1" class="required">Status</label></dt>
                        <dd id="contractStatus-element">
                            <label for="contractStatus-quote"><input type="radio" name="contractStatus" id="contractStatus-quote" value="quote" />Quote</label><br /><label for="contractStatus-signed"><input type="radio" name="contractStatus" id="contractStatus-signed" value="signed" />Signed By All Parties</label><br /><label for="contractStatus-inactive"><input type="radio" name="contractStatus" id="contractStatus-inactive" value="inactive" />Inactive</label></dd></fieldset>
                    <dt id="submit-label">&nbsp;</dt><dd id="submit-element">
                        <input type="submit" name="submit" id="submit" value="Update" /></dd></dl></form>
        </fieldset>
    </td>
</tr>

---

I found another solution that works really well. The key was to add a unique identifier to the jquery call. Using the standard dialog method resulted in an easier implementation in terms of the html and css code.

// increase the default animation speed to exaggerate the effect $.fx.speeds._default = 1000; $(function() { $( "#dialogcon_id ?>" ).dialog({ autoOpen: false, show: "blind", hide: "explode", modal: "true" }); $( "#openercon_id; ?>" ).click(function() { $( "#dialogcon_id ?>" ).dialog( "open" ); return false; }); });

<td>
    <a href="/contract/view/id/<?php echo $this->con_id; ?>">Ads</a>
</td>
<td><a href="/customers/<?php echo $this->cust_id ?>/<?php echo $this->con_name ?>.pdf"><?php echo stripcslashes(htmlspecialchars_decode($this->escape($this->con_name))) ?></a></td>
<td><?php echo $this->escape($this->con_startdate) ?></td>
<td><?php echo $this->escape($this->con_length) . " " ?> month(s)</td>
<td>$<?php echo ($this->escape($this->con_value) - $this->escape($this->contract_discount)) ?></td>
<td>
    <a href="/contract/updatestatus/id/<?php echo $this->con_id ?>" id="opener<?php echo $this->con_id; ?>" ><?php echo $this->escape($this->con_status) ?></a>
    <div id="dialog<?php echo $this->con_id ?>" title="Basic dialog">
        <form enctype="multipart/form-data" action="/contract/updatestatus/id/<?php echo $this->con_id?>" method="post" name=""><dl class="zend_form">

                <input type="hidden" name="contract_id" value="" id="contract_id" />
                <fieldset id="fieldset-AssignDetail">
                    <dt id="contractStatus-label"><label disableFor="1" class="required">Status</label></dt>
                    <dd id="contractStatus-element">
                        <label for="contractStatus-quote"><input type="radio" name="contractStatus" id="contractStatus-quote" value="quote" />Quote</label><br /><label for="contractStatus-signed"><input type="radio" name="contractStatus" id="contractStatus-signed" value="signed" />Signed By All Parties</label><br /><label for="contractStatus-inactive"><input type="radio" name="contractStatus" id="contractStatus-inactive" value="inactive" />Inactive</label></dd></fieldset>
                <dt id="submit-label">&nbsp;</dt><dd id="submit-element">
                    <input type="submit" name="submit" id="submit" value="Update" /></dd></dl></form>

    </div>
</td>