API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 27th, 2018
3,686
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 13.48 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Ajax CRUD with Bootstrap modals and Datatables with Image Upload</title>
  8.     <link href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css')?>" rel="stylesheet">
  9.     <link href="<?php echo base_url('assets/datatables/css/dataTables.bootstrap.min.css')?>" rel="stylesheet">
  10.     <link href="<?php echo base_url('assets/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')?>" rel="stylesheet">
  11.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  12.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  13.     <!--[if lt IE 9]>
  14.       <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  15.       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  16.     <![endif]-->
  17.     </head>
  18. <body>
  19.     <div class="container">
  20.         <h1 style="font-size:20pt">Ajax CRUD with Bootstrap modals and Datatables with Image Upload</h1>
  21.  
  22.         <h3>Person Data</h3>
  23.         <br />
  24.         <button class="btn btn-success" onclick="add_person()"><i class="glyphicon glyphicon-plus"></i> Add Person</button>
  25.         <button class="btn btn-default" onclick="reload_table()"><i class="glyphicon glyphicon-refresh"></i> Reload</button>
  26.         <br />
  27.         <br />
  28.         <table id="table" class="table table-striped table-bordered" cellspacing="0" width="100%">
  29.             <thead>
  30.                 <tr>
  31.                     <th>First Name</th>
  32.                     <th>Last Name</th>
  33.                     <th>Gender</th>
  34.                     <th>Address</th>
  35.                     <th>Date of Birth</th>
  36.                     <th>Photo</th>
  37.                     <th style="width:150px;">Action</th>
  38.                 </tr>
  39.             </thead>
  40.             <tbody>
  41.             </tbody>
  42.  
  43.             <tfoot>
  44.             <tr>
  45.                 <th>First Name</th>
  46.                 <th>Last Name</th>
  47.                 <th>Gender</th>
  48.                 <th>Address</th>
  49.                 <th>Date of Birth</th>
  50.                 <th>Photo</th>
  51.                 <th>Action</th>
  52.             </tr>
  53.             </tfoot>
  54.         </table>
  55.     </div>
  56.  
  57. <script src="<?php echo base_url('assets/jquery/jquery-3.1.0.min.js')?>"></script>
  58. <script src="<?php echo base_url('assets/bootstrap/js/bootstrap.min.js')?>"></script>
  59. <script src="<?php echo base_url('assets/datatables/js/jquery.dataTables.min.js')?>"></script>
  60. <script src="<?php echo base_url('assets/datatables/js/dataTables.bootstrap.min.js')?>"></script>
  61. <script src="<?php echo base_url('assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js')?>"></script>
  62.  
  63.  
  64. <script type="text/javascript">
  65.  
  66. var save_method; //for save method string
  67. var table;
  68. var base_url = '<?php echo base_url();?>';
  69.  
  70. $(document).ready(function() {
  71.  
  72.     //datatables
  73.     table = $('#table').DataTable({
  74.  
  75.         "processing": true, //Feature control the processing indicator.
  76.         "serverSide": true, //Feature control DataTables' server-side processing mode.
  77.         "order": [], //Initial no order.
  78.  
  79.         // Load data for the table's content from an Ajax source
  80.         "ajax": {
  81.             "url": "<?php echo site_url('person/ajax_list')?>",
  82.             "type": "POST"
  83.         },
  84.  
  85.         //Set column definition initialisation properties.
  86.         "columnDefs": [
  87.             {
  88.                 "targets": [ -1 ], //last column
  89.                 "orderable": false, //set not orderable
  90.             },
  91.             {
  92.                 "targets": [ -2 ], //2 last column (photo)
  93.                 "orderable": false, //set not orderable
  94.             },
  95.         ],
  96.  
  97.     });
  98.  
  99.     //datepicker
  100.     $('.datepicker').datepicker({
  101.         autoclose: true,
  102.         format: "yyyy-mm-dd",
  103.         todayHighlight: true,
  104.         orientation: "top auto",
  105.         todayBtn: true,
  106.         todayHighlight: true,  
  107.     });
  108.  
  109.     //set input/textarea/select event when change value, remove class error and remove text help block
  110.     $("input").change(function(){
  111.         $(this).parent().parent().removeClass('has-error');
  112.         $(this).next().empty();
  113.     });
  114.     $("textarea").change(function(){
  115.         $(this).parent().parent().removeClass('has-error');
  116.         $(this).next().empty();
  117.     });
  118.     $("select").change(function(){
  119.         $(this).parent().parent().removeClass('has-error');
  120.         $(this).next().empty();
  121.     });
  122.  
  123. });
  124.  
  125.  
  126.  
  127. function add_person()
  128. {
  129.     save_method = 'add';
  130.     $('#form')[0].reset(); // reset form on modals
  131.     $('.form-group').removeClass('has-error'); // clear error class
  132.     $('.help-block').empty(); // clear error string
  133.     $('#modal_form').modal('show'); // show bootstrap modal
  134.     $('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
  135.  
  136.     $('#photo-preview').hide(); // hide photo preview modal
  137.  
  138.     $('#label-photo').text('Upload Photo'); // label photo upload
  139. }
  140.  
  141. function edit_person(id)
  142. {
  143.     save_method = 'update';
  144.     $('#form')[0].reset(); // reset form on modals
  145.     $('.form-group').removeClass('has-error'); // clear error class
  146.     $('.help-block').empty(); // clear error string
  147.  
  148.  
  149.     //Ajax Load data from ajax
  150.     $.ajax({
  151.         url : "<?php echo site_url('person/ajax_edit')?>/" + id,
  152.         type: "GET",
  153.         dataType: "JSON",
  154.         success: function(data)
  155.         {
  156.  
  157.             $('[name="id"]').val(data.id);
  158.             $('[name="firstName"]').val(data.firstName);
  159.             $('[name="lastName"]').val(data.lastName);
  160.             $('[name="gender"]').val(data.gender);
  161.             $('[name="address"]').val(data.address);
  162.             $('[name="dob"]').datepicker('update',data.dob);
  163.             $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
  164.             $('.modal-title').text('Edit Person'); // Set title to Bootstrap modal title
  165.  
  166.             $('#photo-preview').show(); // show photo preview modal
  167.  
  168.             if(data.photo)
  169.             {
  170.                 $('#label-photo').text('Change Photo'); // label photo upload
  171.                 $('#photo-preview div').html('<img src="'+base_url+'upload/'+data.photo+'" class="img-responsive">'); // show photo
  172.                 $('#photo-preview div').append('<input type="checkbox" name="remove_photo" value="'+data.photo+'"/> Remove photo when saving'); // remove photo
  173.  
  174.             }
  175.             else
  176.             {
  177.                 $('#label-photo').text('Upload Photo'); // label photo upload
  178.                 $('#photo-preview div').text('(No photo)');
  179.             }
  180.  
  181.  
  182.         },
  183.         error: function (jqXHR, textStatus, errorThrown)
  184.         {
  185.             alert('Error get data from ajax');
  186.         }
  187.     });
  188. }
  189.  
  190. function reload_table()
  191. {
  192.     table.ajax.reload(null,false); //reload datatable ajax
  193. }
  194.  
  195. function save()
  196. {
  197.     $('#btnSave').text('saving...'); //change button text
  198.     $('#btnSave').attr('disabled',true); //set button disable
  199.     var url;
  200.  
  201.     if(save_method == 'add') {
  202.         url = "<?php echo site_url('person/ajax_add')?>";
  203.     } else {
  204.         url = "<?php echo site_url('person/ajax_update')?>";
  205.     }
  206.  
  207.     // ajax adding data to database
  208.  
  209.     var formData = new FormData($('#form')[0]);
  210.     $.ajax({
  211.         url : url,
  212.         type: "POST",
  213.         data: formData,
  214.         contentType: false,
  215.         processData: false,
  216.         dataType: "JSON",
  217.         success: function(data)
  218.         {
  219.  
  220.             if(data.status) //if success close modal and reload ajax table
  221.             {
  222.                 $('#modal_form').modal('hide');
  223.                 reload_table();
  224.             }
  225.             else
  226.             {
  227.                 for (var i = 0; i < data.inputerror.length; i++)
  228.                 {
  229.                     $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
  230.                     $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
  231.                 }
  232.             }
  233.             $('#btnSave').text('save'); //change button text
  234.             $('#btnSave').attr('disabled',false); //set button enable
  235.  
  236.  
  237.         },
  238.         error: function (jqXHR, textStatus, errorThrown)
  239.         {
  240.             alert('Error adding / update data');
  241.             $('#btnSave').text('save'); //change button text
  242.             $('#btnSave').attr('disabled',false); //set button enable
  243.  
  244.         }
  245.     });
  246. }
  247.  
  248. function delete_person(id)
  249. {
  250.     if(confirm('Are you sure delete this data?'))
  251.     {
  252.         // ajax delete data to database
  253.         $.ajax({
  254.             url : "<?php echo site_url('person/ajax_delete')?>/"+id,
  255.             type: "POST",
  256.             dataType: "JSON",
  257.             success: function(data)
  258.             {
  259.                 //if success reload ajax table
  260.                 $('#modal_form').modal('hide');
  261.                 reload_table();
  262.             },
  263.             error: function (jqXHR, textStatus, errorThrown)
  264.             {
  265.                 alert('Error deleting data');
  266.             }
  267.         });
  268.  
  269.     }
  270. }
  271.  
  272. </script>
  273.  
  274. <!-- Bootstrap modal -->
  275. <div class="modal fade" id="modal_form" role="dialog">
  276.     <div class="modal-dialog">
  277.         <div class="modal-content">
  278.             <div class="modal-header">
  279.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  280.                 <h3 class="modal-title">Person Form</h3>
  281.             </div>
  282.             <div class="modal-body form">
  283.                 <form action="#" id="form" class="form-horizontal">
  284.                     <input type="hidden" value="" name="id"/>
  285.                     <div class="form-body">
  286.                         <div class="form-group">
  287.                             <label class="control-label col-md-3">First Name</label>
  288.                             <div class="col-md-9">
  289.                                 <input name="firstName" placeholder="First Name" class="form-control" type="text">
  290.                                 <span class="help-block"></span>
  291.                             </div>
  292.                         </div>
  293.                         <div class="form-group">
  294.                             <label class="control-label col-md-3">Last Name</label>
  295.                             <div class="col-md-9">
  296.                                 <input name="lastName" placeholder="Last Name" class="form-control" type="text">
  297.                                 <span class="help-block"></span>
  298.                             </div>
  299.                         </div>
  300.                         <div class="form-group">
  301.                             <label class="control-label col-md-3">Gender</label>
  302.                             <div class="col-md-9">
  303.                                 <select name="gender" class="form-control">
  304.                                     <option value="">--Select Gender--</option>
  305.                                     <option value="male">Male</option>
  306.                                     <option value="female">Female</option>
  307.                                 </select>
  308.                                 <span class="help-block"></span>
  309.                             </div>
  310.                         </div>
  311.                         <div class="form-group">
  312.                             <label class="control-label col-md-3">Address</label>
  313.                             <div class="col-md-9">
  314.                                 <textarea name="address" placeholder="Address" class="form-control"></textarea>
  315.                                 <span class="help-block"></span>
  316.                             </div>
  317.                         </div>
  318.                         <div class="form-group">
  319.                             <label class="control-label col-md-3">Date of Birth</label>
  320.                             <div class="col-md-9">
  321.                                 <input name="dob" placeholder="yyyy-mm-dd" class="form-control datepicker" type="text">
  322.                                 <span class="help-block"></span>
  323.                             </div>
  324.                         </div>
  325.                         <div class="form-group" id="photo-preview">
  326.                             <label class="control-label col-md-3">Photo</label>
  327.                             <div class="col-md-9">
  328.                                 (No photo)
  329.                                 <span class="help-block"></span>
  330.                             </div>
  331.                         </div>
  332.                         <div class="form-group">
  333.                             <label class="control-label col-md-3" id="label-photo">Upload Photo </label>
  334.                             <div class="col-md-9">
  335.                                 <input name="photo" type="file">
  336.                                 <span class="help-block"></span>
  337.                             </div>
  338.                         </div>
  339.                     </div>
  340.                 </form>
  341.             </div>
  342.             <div class="modal-footer">
  343.                 <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
  344.                 <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
  345.             </div>
  346.         </div><!-- /.modal-content -->
  347.     </div><!-- /.modal-dialog -->
  348. </div><!-- /.modal -->
  349. <!-- End Bootstrap modal -->
  350. </body>
  351. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!