2011-03-23 79 views
1

我有一張表格,裏面有一個動態的行列表。在每行的1個單元格內,我希望用戶能夠單擊單元格並調用表單。該表單將允許用戶更改該單元格的值。現在,在我目前的實施中,如果我只有一排,所有的作品都很棒。如果我有2+行,表單根本不會呈現。我相信這是因爲表單需要一個唯一的ID,但我不確定如何使用此實現來完成此操作。任何意見/想法將不勝感激。表中的AJAX表格td

<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> 
+0

我不知道這是一個HTML的問題。我只是將這段代碼複製到一個.html文件中,重複了,現在有兩種形式。 – 2011-03-23 18:32:16

+0

這是很好的知道。它是一個更大的應用程序的一部分,所以也許會發生一些衝突。 – JoPo 2011-03-23 18:37:30

+0

不知道我在做什麼錯。我無法顯示每個表單。假設我有2行,當我選擇窗體的單元格時,它看起來像是渲染所有窗體,一個在另一個之上。 – JoPo 2011-03-23 20:15:58

回答

0

我發現了另一個很好的解決方案。關鍵是爲jquery調用添加一個唯一的標識符。使用標準的對話方法可以使html和css代碼更容易實現。

//增加默認動畫速度以誇大效果 $ .fx.speeds._default = 1000; $(函數(){$ ( 「?#dialogcon_id>」).dialog({ 的AutoOpen:假的, 顯示: 「盲」, 躲: 「爆炸」, 模式: 「真正的」 }); $( 「#openercon_id;?>」)。點擊(函數(){$ ( 「#dialogcon_id>?」).dialog( 「開放」); 返回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>