jQuery Datatable : 편집 단추

Question

jQuery Datatable에 Edit 단추를 추가했습니다. 사용자가이 버튼을 클릭하면 행이 편집 가능하게됩니다. 업데이트 된 행은 MySQL DB에 저장되어야하지만, 여기에 문제가 있습니다 - 업데이트 된 행은 DB에 저장되지 않습니다. Firebug는 오류 메시지를 표시하지 않습니다. 누군가가 문제를 파악하도록 도와 줄 수 있습니까?

<script type="text/javascript" charset="utf-8"> 
     $(document).ready(function(){ 
       $('#newspaper-b').dataTable({ 
       "sPaginationType":"full_numbers", 
       "aaSorting":[[3, "asc"]], 
       "bJQueryUI":true 
       }); 
      $(".edit_but").click(function() { 
       var ID=$(this).attr('id'); 
       $("#first_"+ID).hide(); 
       $("#last_"+ID).hide(); 
       $("#first_input_"+ID).show(); 
       $("#last_input_"+ID).show(); 
      }); 
      $(".edit_tr").change(function() { 
        var ID=$(this).attr('id'); 
        var first=$("#first_input_"+ID).val(); 
        var last=$("#last_input_"+ID).val(); 
        var dataString = 'flightNum='+ ID +'&from='+first+'&STADate='+last; 
        $("#first_"+ID).html('<img src="load.gif" />'); // Loading image 
        if(first.length>0&& last.length>0) { 
        $.ajax({ 
         type: "POST", 
         url: "callpage.php?page=tables/edit.php", 
         data: dataString, 
         cache: false, 
         success: function(html) { 
           $("#first_"+ID).html(first); 
           $("#last_"+ID).html(last); 
         } 
        }); 
        } else 
        { 
        alert('All fields must be filled out.'); 
        } 
       }); 
       // Edit input box click action 
       $(".editbox").mouseup(function() { 
       return false 
       }); 

       // Outside click action 
       $(document).mouseup(function() { 
        $(".editbox").hide(); 
        $(".text").show(); 
       }); 

       $("tr").click(function(){ 
       $(this).addClass("selected").siblings().removeClass("selected"); 
       }); 
    }); 
</script> 

       <table id="newspaper-b" border="0" cellspacing="2" cellpadding="2" width = "100%"> 
        <thead> 
         <tr> 
          <th scope="col">Flt Num</th> 
          <th scope="col">From</th> 
          <th scope="col">STA Date</th> 
          <th scope="col"></th> 
         </tr> 
        </thead> 
        <tbody> 
         <?php foreach ($result1 as $row): 
          $flightNum=$row['flightNum']; 
          $from=$row['frm']; 
          $STADate=$row['STADate']; 
         ?> 
         <tr id="<?php echo $flightNum; ?>" class="edit_tr"> 
                 <td><?php echo $row['flightNum'];?></td> 
          <td class="edit_td"> 
           <span id="first_<?php echo $flightNum; ?>" class="text"> 
            <?php echo $from;?> 
           </span> 
           <input type="text" value="<?php echo $from;?>" 
             class="editbox" id="first_input_<?php echo $flightNum; ?>"/> 
          </td> 
          <td class="edit_td"> 
           <span id="last_<?php echo $flightNum; ?>" class="text"> 
            <?php echo $STADate; ?> 
           </span> 
           <input type="text" value="<?php echo $STADate; ?>" 
             class="editbox" id="last_input_<?php echo $flightNum; ?>"/> 
          </td> 
                 <td class="edit_td"><?php echo $row['pkID']; ?></td> 
          <td id="<?php echo $flightNum; ?>" class="edit_but"> 
           <div> 
            <img src='images/edit.png' alt='Edit' /> 
           </div> 
          </td> 
         </tr> 
         <?php endforeach;?> 
        </tbody> 
       </table>  

edit.php

<?php 
    include_once 'include/DatabaseConnector.php'; 
    if(isset($_POST['flightNum'])) { 
     $flightnum=$_POST['flightNum']; 
     $from=$_POST['from']; 
     $STADate=$_POST['STADate']; 
     $query = 'UPDATE flightschedule 
        SET frm="'.$from.'",STADate="'.$STADate.'" 
        WHERE flightNum="'.$flightNum.'"'; 
     DatabaseConnector::ExecuteQuery($query); 
     echo '1'; 
    } else { 
     echo '0'; 
    } 
?> 

Answer 1

은 $ 사용해 (". edit_tr 입력"). 트리거로서 변화().

변경 이벤트는 입력, 선택 및 텍스트 영역으로 만 제한되어 있지만 테이블 행에 바인딩하려고했습니다. 위의 코드는 클래스가있는 행의 모든 ​​입력에이 코드를 바인딩합니다.