양식 제출 후 라디오 버튼이 선택된 테이블 행을 숨기기

Question

양식에 포함 된 표가 있습니다. 이 테이블은 CF 루프에서 만들어지며 여기서 각 행 ID에는 SQL 테이블의 NumberID가 할당됩니다. jquery ajax submit을 수행하는 submit 버튼이 있습니다. 페이지 재로드를 수행하는 대신 제출 된 행을 숨길 필요가 있습니다.

<form id="unsortedTable" > 
    <input type="submit" id="makeParentButton" value="Make Parent"> 
    </span> 
    <div class="row-fluid"><p></p> 
    <table class="table table-bordered table-striped table-hover"> 


     <tbody> 
     <cfloop query="nonAffiliated"> 

      <tr id="#NumberID#"> 
      <td><input type="radio" name="NumberID" value="#NumberID#"></td> 
      </tr> 
     </cfloop> 
     </tbody> 
     </table> 
     </div> 
</form> 

그런 다음 제출할 때 트리거되는 JavaScript가 있습니다.

$(document).ready(function(e) { 
    $("#unsortedTable").submit(sendForm); 

    }); 

    function sendForm() { 
     var row = $(this).closest('tr'); 
     $.post('handlers/formHandler.cfm', 
     $("#unsortedTable").serialize(),function(data,status){ 
     $("#unsortedTable")[0].reset(); 

     row.hide(); //This is just a guess 
    }); 
    return false 


} 

제출 된 행을 hide()로 가져올 수 없다는 점을 제외하면 모든 것이 작동합니다.

Answer 1

양식이 숨기려는 표 행 내에 있지 않으면 $(this).closest('tr') 행을 찾지 못합니다. $(this)은 클릭 한 버튼을 참조하지만 버튼의 클릭 핸들러가 아닌 양식에서 서브릿 핸들러를 사용하고있는 것으로 생각할 수 있습니다.

당신은 id 또는 먼저 버튼을 찾아 하나, 행에 다른 방법을 찾아야 할 수 있습니다 :

$('#rowId').hide(); 

또는

$('#buttonId').closest('tr').hide(); 

을 편집 :

다시 읽은 후 귀하의 질문에 더 신중하게, 나는 당신이 제출 버튼을 숨기고 싶지 않아, 라디오 버튼을 깨달았다. 이를 위해 다음과 같이 할 수 있습니다 :

$(this).find('input:radio:checked').closest('tr').hide();