jQuery 숨겨진 양식 필드에서 ColdFusion 쿼리

Question

2 탭이있는 jQuery 탭 요소가 있습니다. 각 탭에는 자체 작업 페이지가있는 양식이 있습니다.

페이지 새로 고침을 방지하고 데이터를 내 작업 페이지에 게시하는 JavaScript 코드가 있습니다.

내 양식의 두 번째 탭에는 CFLoop에 의해 만들어진 여러 고유 한 양식 요소가 있습니다. 데이터베이스에서 특정 레코드를 삭제할 때이 방법을 사용합니다. 그러나 양식을 제출하면 내 작업 페이지의 쿼리에서 오류가 발생합니다.

500 (. 오류 실행 데이터베이스 쿼리)

: 나는 방화범에 오류가 있지만 화면에 (사람이 더 자세히는 ColdFusion 오류 코드를 볼 수있는 방법을 알고있는 경우, 즉 도움이 될 것입니다)하지를 볼 수 있습니다

레코드 ID를 숨겨진 양식 필드 형태로 작업 페이지의 쿼리에 전달합니다. jQuery를 사용하여 다른 방식으로이 작업을 수행해야합니까? 도와 주셔서 감사합니다.

양식 코드 :

<cfloop query="get_trips"> 
    <tr class="vehicle-log-table"> 
    <td class="vehicle-log-table">#DateFormat(get_trips._date, "mm-dd-yyyy")#</td> 
    <td class="vehicle-log-table"><div align="center">#get_trips.total_mileage#</div></td> 
    <td class="vehicle-log-table"><div align="center">#get_trips.expenses#</div></td> 
    <td class="vehicle-log-table"> 
     <div align="right"> 
     <form class="deleteMileageForm" id="deletemileage#get_trips.currentRow#" method="post"> 
      <input class="vehicle-log-form" type="submit" id="submit2" name="submi2" value="Delete"> 
      <input type="hidden" id="hidden" name="hidden" value="#get_trips.id#"> 
     </form>   
     </div><br /> 

     <span class="errorTab2" style="display:none"> <font color="##FF0000"> <strong>Trip Not Deleted</strong></font></span> 
     <span class="successTab2" style="display:none"> 
     <font color="##00FF00"> 
      <strong>Trip Deleted Successfully</strong> 
     </font> 
     </span> 
    </td> 
    </tr> 
</cfloop> 

jQuery를 코드 :

<script> 
    $(document).ready(function() { 
    //Submit form to add record. 
    $('#addmileage').submit(function (e) {   
     e.preventDefault(); 
     $.ajax({ 
     data: $('#addmileage').serialize(), 
     type:'POST', 
     url:'actionpages/add_trip.cfm?ticketid=<cfoutput>#url.ticketid#</cfoutput>', 
     success: function(){ 
      $('.success').fadeIn(200).show(); 
      $('.error').fadeOut(200).hide(); 
     } 
     }); 
    }); 


    $('.deleteMileageForm').submit(function (e) {   
     e.preventDefault(); 
     $.ajax({ 
     data: $('.deleteMileageForm').serialize(), 
     type:'POST', 
     url:'actionpages/delete_trip.cfm', 
     success: function(){ 
      $('.successTab2').fadeIn(200).show(); 
      $('.errorTab2').fadeOut(200).hide(); 
     } 
     }); 
    });  
    });  
</script> 

ColdFusion에서 쿼리

<!---Delete Trip --->       
<cfoutput> 
    <cfquery name="deleteTrips" datasource="#datasource#"> 
    delete from vehicle_log 
    where ID = #form.hidden# 
    </cfquery> 
</cfoutput> 

사람이 도와 드릴까요? 매우 감사.

Answer 1

Matt가 언급 한 것처럼 문제는 두 번째 탭의 모든 양식이 동일한 ID (deletemileage)를 갖는 것입니다. 당신이

$('#deletemileage').submit(function (e) { ... }); 

당신이 실제로 첫 번째 DOM 요소를 결합하고 함께 제출 이벤트 핸들러에 바인딩 할 때 그래서 jQuery를 그 당신의 선택을 일치 발견 한. deletemileage의 ID를 가진 첫 번째 DOM 요소는 tab2에서 첫 번째 양식이므로 올바르게 바인딩되고 나머지는 전혀 바인딩되지 않습니다. JQuery와 문서에서

이 :.

"각각의 id 값은 문서 내에서 한 번만 사용할 수 있어야합니다 이상 하나의 요소는, 그 ID를 사용하는 쿼리를 동일한 ID를 부여하지 않은 만 선택합니다 그러나이 동작은 에 의존해서는 안되며 동일한 ID를 사용하는 요소가 두 개 이상있는 문서는 유효하지 않습니다. "

두 가지. 첫째, Matt는 HTML을 유효하게 만들기 위해 id = "deletemileage # get_trips.current_row #"와 같은 ID를 정의 할 것을 제안했습니다. 둘째, 제출 이벤트를 모든 양식에 바인드하려면 class = "deleteMileageForm"과 같은 클래스를 제공하십시오. 그런 다음 사용하십시오

$(".deleteMileageForm").submit(function(e) { ... }); 

제출 처리자를 바인드하려면. 희망이 도움이됩니다.