Add Datatables Records using PHP Ajax

2022-12-07 21:56 问答作者：

Currently i am doing the function add Datatables records using PHP Ajax , when I click on the insert button, the blue message bar appears but the word "Data Inserted" is not displayed, nor see the error message . And the data is not added to the database. I have tried several ways but since there is no error message I don't know where to start. I hope someone can help me, thanks.

index.html:

<html>
 <head>
  <title>ALTERNATE</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
  <style>
  body
  {
   margin:0;
   padding:0;
   background-color:#f1f1f1;
  }
  .box
  {
   width:1270px;
   padding:20px;
   background-color:#fff;
   border:1px solid #ccc;
   border-radius:5px;
   margin-top:25px;
   box-sizing:border-box;
  }
  </style>
 </head>
 <body>
  <div class="container box">
   <h1 style="text-center">LIST OF ALTERNATE</h1>
   <br />
   <div class="table-responsive">
   <br />
    <div>
     <button type="button" name="add" id="add" class="btn btn-info">Add</button>
    </div>
    <br />
    <div id="alert_message"></div>
    <table id="user_data" class="table table-bordered table-striped">
        <thead>
        <tr style="background: #1E90FF">
            <th>No</th>
            <th>Mã NV</th>
            <th>Tên/Name</th>   
            <th>Shift</th>
            <th>Phone Number</th>
            <th>中文名</th>
            <th>1st</th>
            <th>2nd</th>
            <th>3rd</th>
            <th>4th</th>
            <th>5th</th>
            <th>6th</th>
            <th>7th</th>
            <th>8th</th>
            <th>9th</th>
            <th>10th</th>
            <th>11th</th>
            <th>12th</th>
            <th>13th</th>
            <th>14th</th>
            <th>15th</th>
            <th>16th</th>
            <th>17th</th>
            <th>18th</th>
            <th>19th</th>
            <th>20th</th>
            <th>21th</th>
            <th>22th</th>
            <th>23th</th>
            <th>24th</th>
            <th>25th</th>
            <th>26th</th>
            <th>27th</th>
            <th>28th</th>
            <th>29th</th>
            <th>30th</th>
            <th>31th</th>   
            <th>#</th>  
        </thead>
    </table>
   </div>
  </div>
 </body>
</html>

<script type="text/javascript" language="javascript" >
 $(document).ready(function(){
  
  fetch_data();

  function fetch_data()
  {
   var dataTable = $('#user_data').DataTable({
    "processing" : true,
    "serverSide" : true,
    "order" : [],
    "ajax" : {
     url:"fetch.php",
     type:"POST"
    }
   });
  }
  
  function update_data(id, column_name, value)
  {
   $.ajax({
    url:"update.php",
    method:"POST",
    data:{id:id, column_name:column_name, value:value},
    success:function(data)
    {
     $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
     $('#user_data').DataTable().destroy();
     fetch_data();
    }
   });
   setInterval(function(){
    $('#alert_message').html('');
   }, 5000);
  }

  $(document).on('blur', '.update', function(){
   var id = $(this).data("id");
   var column_name = $(this).data("column");
   var value = $(this).text();
   update_data(id, column_name, value);
  });
  
  $('#add').click(function(){
   var html = '<tr>';
   html += '<td contenteditable id="data0"></td>';
   html += '<td contenteditable id="data1"></td>';
   html += '<td contenteditable id="data2"></td>';
   html += '<td contenteditable id="data3"></td>';
   html += '<td contenteditable id="data4"></td>';
   html += '<td contenteditable id="data5"></td>';
   html += '<td contenteditable id="data6"></td>';
   html += '<td contenteditable id="data7"></td>';
   html += '<td contenteditable id="data8"></td>';
   html += '<td contenteditable id="data9"></td>';
   html += '<td contenteditable id="data10"></td>';
   html += '<td contenteditable id="data11"></td>';
   html += '<td contenteditable id="data12"></td>';
   html += '<td contenteditable id="data13"></td>';
   html += '<td contenteditable id="data14"></td>';
   html += '<td contenteditable id="data15"></td>';
   html += '<td contenteditable id="data16"></td>';
   html += '<td contenteditable id="data17"></td>';
   html += '<td contenteditable id="data18"></td>';
   html += '<td contenteditable id="data19"></td>';
   html += '<td contenteditable id="data20"></td>';
   html += '<td contenteditable id="data21"></td>';
   html += '<td contenteditable id="data22"></td>';
   html += '<td contenteditable id="data23"></td>';
   html += '<td contenteditable id="data24"></td>';
   html += '<td contenteditable id="data25"></td>';
   html += '<td contenteditable id="data26"></td>';
   html += '<td contenteditable id="data27"></td>';
   html += '<td contenteditable id="data28"></td>';
   html += '<td contenteditable id="data29"></td>';
   html += '<td contenteditable id="data30"></td>';
   html += '<td contenteditable id="data31"></td>';
   html += '<td contenteditable id="data32"></td>';
   html += '<td contenteditable id="data33"></td>';
   html += '<td contenteditable id="data34"></td>';
   html += '<td contenteditable id="data35"></td>';
   html += '<td contenteditable id="data36"></td>';
   
   html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs">Insert</button></td>';
   html += '</tr>';
   $('#user_data tbody').prepend(html);
  });
  
  $(document).on('click', '#insert', function(){
   var nost = $('#data0').text();
   var manv = $('#data1').text();
   var ten = $('#data2').text();
   var shift = $('#data3').text();
   var phone = $('#data4').text();
   var namechina = $('#data5').text();
   var st1 = $('#data6').text();
   var st2 = $('#data7').text();
   var st3 = $('#data8').text();
   var st4 = $('#data9').text();
   var st5 = $('#data10').text();
   var st6 = $('#data11').text();
   var st7 = $('#data12').text();
   var st8 = $('#data13').text();
   var st9 = $('#data14').text();
   var st10 = $('#data15').text();
   var st12 = $('#data16').text();
   var st12 = $('#data17').text();
   var st13 = $('#data18').text();
   var st14 = $('#data19').text();
   var st15 = $('#data20').text();
   var st16 = $('#data21').text();
   var st17 = $('#data22').text();
   var st18 = $('#data23').text();
   var st19 = $('#data24').text();
   var st20 = $('#data25').text();
   var st21 = $('#data26').text();
   var st22 = $('#data27').text();
   var st23 = $('#data28').text();
   var st24 = $('#data29').text();
   var st25 = $('#data30').text();
   var st26 = $('#data31').text();
   var st27 = $('#data32').text();
   var st28 = $('#data33').text();
   var st29 = $('#data34').text();
   var st30 = $('#data35').text();
   var st31 = $('#data36').text();
   if(manv != '' && ten != '' )
   {
    $.ajax({
     url:"insert.php",
     method:"POST",
     data:{nost:nost, manv:manv, ten:ten, shift:shift, phone:phone, namechina:namechina, st1:st1, st2:st2, st3:st3, st4:st4, st5:st5
    , st6:st6, st7:st7, st8:st8, st9:st9, st10:st10, st11:st11, st12:st12, st13:st13, st14:st14, st15:st15, st16:st16
    , st17:st17, st18:st18, st19:st19, st20:st20, st21:st21, st22:st22, st23:st23, st24:st24, st25:st25, st26:st26, st27:st27
    , st28:st28, st29:st29, st30:st30, st31:st31},
     success:function(data)
     {
      $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
      $('#user_data').DataTable().destroy();
      fetch_data();
     }
    });
    setInterval(function(){
     $('#alert_message').html('');
    }, 5000);
   }
   else
   {
    alert("Both Fields is required");
   }
  });
  
  $(document).on('click', '.delete', function(){
   var id = $(this).attr("id");
   if(confirm("Are you sure you want to remove this?"开发者_开发知识库))
   {
    $.ajax({
     url:"delete.php",
     method:"POST",
     data:{id:id},
     success:function(data){
      $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
      $('#user_data').DataTable().destroy();
      fetch_data();
     }
    });
    setInterval(function(){
     $('#alert_message').html('');
    }, 5000);
   }
  });
 });
</script>

insert.php:

<?php
include ("../includes/dbconnect.php");

if(isset($_POST["id"],$_POST["nost"], $_POST["manv"], $_POST["ten"], $_POST["shift"], $_POST["phone"], $_POST["namechina"], $_POST["1st"]
, $_POST["2st"], $_POST["3st"], $_POST["4st"], $_POST["5st"], $_POST["6st"], $_POST["7st"], $_POST["8st"]
, $_POST["9st"], $_POST["10st"], $_POST["11st"], $_POST["12st"], $_POST["13st"], $_POST["14st"], $_POST["15st"]
, $_POST["16st"], $_POST["17st"], $_POST["18st"], $_POST["19st"], $_POST["20st"], $_POST["21st"], $_POST["22st"]
, $_POST["23st"], $_POST["24st"], $_POST["25st"], $_POST["26st"], $_POST["27st"], $_POST["28st"], $_POST["29st"]
, $_POST["30st"], $_POST["31st"]))
{
 $nost = mysqli_real_escape_string($connection, $_POST["nost"]);
 $manv = mysqli_real_escape_string($connection, $_POST["manv"]);
 $ten = mysqli_real_escape_string($connection, $_POST["ten"]);
 $shift = mysqli_real_escape_string($connection, $_POST["shift"]);
 $phone = mysqli_real_escape_string($connection, $_POST["phone"]);
 $namechina = mysqli_real_escape_string($connection, $_POST["namechina"]);
 $st1 = mysqli_real_escape_string($connection, $_POST["st1"]);
 $st2 = mysqli_real_escape_string($connection, $_POST["st2"]);
 $st3 = mysqli_real_escape_string($connection, $_POST["st3"]);
 $st4 = mysqli_real_escape_string($connection, $_POST["st4"]);
 $st5 = mysqli_real_escape_string($connection, $_POST["st5"]);
 $st6 = mysqli_real_escape_string($connection, $_POST["st6"]);
 $st7 = mysqli_real_escape_string($connection, $_POST["st7"]);
 $st8 = mysqli_real_escape_string($connection, $_POST["st8"]);
 $st9 = mysqli_real_escape_string($connection, $_POST["st9"]);
 $st10 = mysqli_real_escape_string($connection, $_POST["st10"]);
 $st11 = mysqli_real_escape_string($connection, $_POST["st11"]);
 $st12 = mysqli_real_escape_string($connection, $_POST["st12"]);
 $st13 = mysqli_real_escape_string($connection, $_POST["st13"]);
 $st14 = mysqli_real_escape_string($connection, $_POST["st14"]);
 $st15 = mysqli_real_escape_string($connection, $_POST["st15"]);
 $st16 = mysqli_real_escape_string($connection, $_POST["st16"]);
 $st17 = mysqli_real_escape_string($connection, $_POST["st17"]);
 $st18 = mysqli_real_escape_string($connection, $_POST["st18"]);
 $st19 = mysqli_real_escape_string($connection, $_POST["st19"]);
 $st20 = mysqli_real_escape_string($connection, $_POST["st20"]);
 $st21 = mysqli_real_escape_string($connection, $_POST["st21"]);
 $st22 = mysqli_real_escape_string($connection, $_POST["st22"]);
 $st23 = mysqli_real_escape_string($connection, $_POST["st23"]);
 $st24 = mysqli_real_escape_string($connection, $_POST["st24"]);
 $st25 = mysqli_real_escape_string($connection, $_POST["st25"]);
 $st26 = mysqli_real_escape_string($connection, $_POST["st26"]);
 $st27 = mysqli_real_escape_string($connection, $_POST["st27"]);
 $st28 = mysqli_real_escape_string($connection, $_POST["st28"]);
 $st29 = mysqli_real_escape_string($connection, $_POST["st29"]);
 $st30 = mysqli_real_escape_string($connection, $_POST["st30"]);
 $st31 = mysqli_real_escape_string($connection, $_POST["st31"]);

 $query = "INSERT INTO alternate(nost,manv, ten, shift, phone,namechina,st1,st2,st3,st4,
 st5,st6,st7,st8,st9,st10,st11,st12,st13,st14,st15,st16,st17,st18,st19,st20,st21,st22,st23,
 st24,st25,st26,st27,st28,st29,st30,st31) VALUES('$nost','$manv', '$ten', '$shift', '$phone', '$namechina',
 '$st1', '$st2', '$st3', '$st4', '$st5', '$st6', '$st7', '$st8', '$st9', '$st10', '$st11', '$st12', '$st13',
 '$st14', '$st15', '$st16', '$st17', '$st18', '$st19', '$st20', '$st21', '$st22', '$st23', '$st24', '$st25', '$st26',
  '$st27', '$st28', '$st29', '$st30', '$st31')";
 if(mysqli_query($connection, $query))
 {
  echo 'Data Inserted';
 }
}
?>

Inside $(document).ready() , you need to call your function like this

$('#insert').click(function(){....});

If you still want using same function like this

$(document).on('click', '#insert', function(){...});

Define outside the $(document).ready

$(document).ready(function() { .... });
$(document).on('click', '#insert', function(){...});

继续阅读：mysqli php

Add Datatables Records using PHP Ajax

更多精彩内容

精彩评论

最新问答

央视是哪个频道？

请问买过的朋友，舒提啦旅行箱实际使用体验如何？？

检查不孕不育需要的费用？

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？

更多精彩内容

精彩评论

最新问答

央视是哪个频道？

请问买过的朋友，舒提啦旅行箱实际使用体验如何？？

检查不孕不育需要的费用？

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生 新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？