开发者

Add Datatables Records using PHP Ajax

开发者 https://www.devze.com 2022-12-07 21:29 出处：网络
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 s
相关专题：mysqliphp

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.

Add Datatables Records using PHP Ajax

Add Datatables Records using PHP Ajax

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(){...});
0

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

    关注公众号

    热门标签

    图文推荐

    Delphi - Custom drawing a message list

    Delphi - Custom drawing a message list
    C++ header-only include pattern

    C++ header-only include pattern
    IE7 Margin Collapses Into Padding

    IE7 Margin Collapses Into Padding
    in CoffeeScript, how can I use a variable as a key in a hash?

    in CoffeeScript, how can I use a variable as a key in a hash?
    Interactive visualization of a graph in python [closed]

    Interactive visualization of a graph in python [closed]
    How to customise PHP MYSQL tables?

    How to customise PHP MYSQL tables?
    High quality, simple random password generator

    High quality, simple random password generator
    Image Recognition ApI in android

    Image Recognition ApI in android

    开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

    法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

    Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9