AJAX는 테이블의 형식으로

Question

테이블의 동적 행 목록이 있습니다. 각 행의 1 셀 내에서 사용자가 셀을 클릭하고 양식을 호출 할 수있게하려고합니다. 양식을 사용하면 사용자가 해당 셀의 값을 변경할 수 있습니다. 지금 당장은 현재 구현으로 1 행만 있으면 모든 것이 훌륭합니다. 2 개 이상의 행이있는 경우 양식이 전혀 렌더링되지 않습니다. 양식에 고유 한 ID가 있어야하기 때문에 그럴 것이라고 믿습니다.하지만이 구현을 통해 양식을 작성하는 방법을 모르겠습니다. 어떤 충고/생각을 부탁드립니다.

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

Answer 1

정말 잘 작동하는 또 다른 해결책을 찾았습니다. 핵심은 jquery 호출에 고유 한 식별자를 추가하는 것이 었습니다. 표준 대화 상자 방법을 사용하면 html 및 css 코드 측면에서보다 쉽게 ​​구현할 수있었습니다.

// 효과를 과장하기 위해 기본 애니메이션 속도를 높이십시오. $ .fx.speeds._default = 1000; $ (함수() { $ ("? #dialogcon_id>") .dialog ({ 에 AutoOpen : 거짓, 쇼 : "블라인드", 숨기기 : "폭발", 모달 : "true"로 }); $ ("#openercon_id;?>") .click (함수() {$ ("#dialogcon_id>?") .dialog) ("개방"; 창 거짓; }) });

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