dongquepao8653
2012-05-26 13:41
浏览 112
已采纳

jQuery Datatable:编辑按钮

I added Edit button to my jQuery Datatable. When the user clicks on this button, the row becomes editable. Updated row should be saved to MySQL DB, but here comes the problem - the updated row is not saved to DB. Firebug does not show any error message. Can someone help me figure out the problem?

<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'; 
    }
?>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dou18504707 2012-05-26 14:33
    已采纳

    Try $(".edit_tr input").change() as the trigger.

    Change events are limited to inputs, selects and textareas only, but you've tried binding it to a table row. The code above will bind it to any inputs inside the row with the class.

    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题