<main class="common_margin" id="main"> <div class="main-wrap"> <div class="dashboard-cover"> <div class="subject_r"> <div class="subject_rsec"> <a href="javascript:history.back()"><button class="btn btn-dark btn-sm">Back</button></a> <div class="common-heading"> <h2>Categories</h2> <div class="dashboard-btn-wrap"> <button class="btn btn-success" data-toggle="modal" onclick="showModal()">Add Category</button> </div> </div> <div class="alert alert-danger" id="errShow" style="display:none;"><strong>Failure!</strong> The category having dependent data you cannot delete this category.</div> <div class="alert alert-success" id="success" style="display:none;"><strong>Success!</strong> The category deleted successfully.</div> <div class="alert alert-success" id="successMsg" style="display:none;"><strong>Success!</strong> The changes done on category table successfully.</div> <div class="settings-tbl"> <table id="tbl" class="display dataTable table-responsive"> <thead> <tr> <th>S.No</th> <th>Category Name</th> <th>Status</th> <th>Action</th> </tr> </thead> <tbody> <?php if(isset($categoryData) && !empty($categoryData)){ $i=1; foreach($categoryData as $cData) { ?> <tr> <td><span class="text-center"><?= $i; ?></span></td> <td><?= $cData['name']; ?></td> <td><?php if($cData['is_active'] == 'Y'){ echo 'Active';}else{echo 'Inactive'; } ?></td> <td> <div class="sub_tabbtnsec"> <div class="sub_editbtn" onclick="editCategory(<?= $cData['id']; ?>)"><i class="fas fa-pencil-alt"></i></div> <div class="sub_delbtn" onclick="deleteCategory(<?= $cData['id']; ?>)"><i class="fa fa-trash" aria-hidden="true"></i></div> </div> </td> </tr> <?php $i++; } } ?> </tbody> </table> </div> </div> </div> </div> </div> </main> <!--End right-top side--> </div> <div class="addCategory_modal"> <div class="modal fade" id="addCategory" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <form id="categoryForm" method="POST"> <input type="hidden" name="id" id="id" value="0"> <div class="modal-body" id="modalBody"> <div class="form-group"> <label>Category Name</label> <input type="text" class="form-control txtData" name="name" id="name" placeholder="Category Name"> <p class="form_err" id="error-name"></p> </div> <div class="form-group"> <label>Status</label> <select class="form-control txtData" name="is_active" id="is_active" style="padding:0;"> <option value="">Select Option</option> <option value="Y">Active</option> <option value="N">Inactive</option> </select> <p class="form_err" id="error-is_active"></p> </div> </div> <div class="modal-footer"> <div class="dashboard-btn-wrap"> <button type="submit" class="btn btn-success btn-sm" id="buttonName">Add</button> <button class="btn btn-dark btn-sm" data-dismiss="modal">Cancel</button> </div> </div> </form> </div> </div> </div> </div> <!-- <script src="assets/js/jquery-3.2.1.slim.min.js"></script> --> <script src="<?= base_url(); ?>assets-lms/js/jquery-3.4.1.min.js" ></script> <script src="<?= base_url(); ?>assets-lms/js/jquery.validate.js"></script> <script src="<?= base_url(); ?>assets-lms/js/additional-methods.js"></script> <script src="<?= base_url(); ?>assets-lms/js/bootstrap.min.js"></script> <script src="<?= base_url(); ?>assets-lms/js/popper.min.js"></script> <script defer src="<?= base_url(); ?>assets-lms/js/all.js"></script> <script defer src="<?= base_url(); ?>assets-lms/js/main.js"></script> <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> <script src="<?= base_url(); ?>assets-lms/owl-carousel/js/owl.carousel.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <script> $(document).ready(function(){ $('.user-drpdown').click(function(){ $('.drpdown-items').toggle(); }); }); //table js $('#tbl').DataTable( { "lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]] } ); //table js end //multiple select js start $('select').selectpicker(); //multiple select js end </script> <script> $.validator.addMethod("nameRegex", function(value, element) { return this.optional(element) || /^[a-zA-Z\s]*$/.test(value); }, "Category must contain only letters."); $( "#categoryForm" ).validate({ errorClass: 'error', rules: { name: { required: true, minlength : 3, maxlength : 50, nameRegex: true }, is_active: { required: { depends: function(element) { return $("#is_active").val() == ''; } } } }, messages: { name: { required: "Category name is required", minlength : "At least 3 characters long", maxlength : "Should not exceed 50 characters", nameRegex: "Contain only letters." }, is_active:{ required: "Option is required" } }, errorPlacement: function(error, element) { if (element.attr("name") == "name") { error.appendTo($("#error-name")); }else if (element.attr("name") == "is_active") { error.appendTo($("#error-is_active")); }else { error.appendTo(element); } }, submitHandler: function (form) { var formdata = new FormData(form); $.ajax({ type: 'post', url: '<?= base_url(); ?>LmsAdmin/getCategoryData', data: formdata, cache:false, contentType: false, processData: false, success: function(result){ if(result == 0) { $('#error-name').text('Category already exists'); } if(result == 1){ $('#addCategory').modal('hide'); $('#successMsg').show(); setTimeout(() => { location.reload(); }, 2000); } } }); } }); </script> <script> function deleteCategory(cat_id) { swal({ title: "Are you sure?", text: "Once deleted, you will not be able to recover this category!", icon: "warning", buttons: true, dangerMode: true, }) .then((willDelete) => { if (willDelete) { var tableName = 'lms_categories'; $.ajax({ type: 'post', url: '<?= base_url(); ?>LmsAdmin/deleteCategoryData', data: {'categoryId': cat_id, 'tableName': tableName}, success: function(result){ if(result == 0) { $('#success').hide(); $('#errShow').show(); } else if(result == 1) { $('#errShow').hide(); $('#success').show(); setTimeout(function(){ location.reload(); }, 3000); } } }); } }) } function editCategory(cat_id) { var tableName= 'lms_categories'; $('#id').val(cat_id); $.ajax({ type: 'post', url: '<?= base_url(); ?>LmsAdmin/getCategoryById', data: {'categoryId': cat_id, 'tableName': tableName}, success: function(result){ $('#buttonName').text('Update'); $('#modalBody').html(result); $('#addCategory').modal('show'); } }); } function showModal() { $('#buttonName').text('Add'); $('.txtData').val(''); $('#error-name').html(''); $('#error-is_active').html(''); $('#addCategory').modal('show'); } </script> </body> </html>