Question

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'; 
    }
?>

Answer 1

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.