EVOLUTION-NINJA
Edit File: request_course.php
<?php echo view('includes/faculty_header'); ?> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/assets/css/jquery-ui.css'); ?>" /> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/assets/jqgrid/css/ui.jqgrid.css'); ?>" /> <script type="text/ecmascript" src="<?php echo base_url('public/assets/jqgrid/js/jquery.jqGrid.min.js'); ?>"></script> <script type="text/ecmascript" src="<?php echo base_url('public/assets/jqgrid/js/i18n/grid.locale-en.js'); ?>"></script> <script src="<?php echo base_url('public/assets/js/jquery-ui.js'); ?>" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="<?php echo base_url('public/assets/sumoselect/sumoselect.css'); ?>" /> <script type="text/javascript" src="<?php echo base_url('public/assets/sumoselect/jquery.sumoselect.min.js'); ?>"></script> <script type="text/javascript" src="<?php echo base_url('public/assets/timepicker/jquery.timepicker.js'); ?>"></script> <link rel="stylesheet" type="text/css" href="<?php echo base_url('public/assets/timepicker/jquery.timepicker.css'); ?>" /> <div id="page-wrapper"> <div class="row my_header"> <h3 style="padding-bottom:10px;border-bottom:2px dashed #468662;margin-bottom:20px; font-weight: bold;">REQUEST ADDITIONAL COURSE</h3> <a href="javascript:history.back()" class="btn btn-primary" style="float:right; margin-right:50px;">Back</a> <div class="col-md-2"></div> <div class="col-md-8"> <form class="form-horizontal" id="request_course"> <input type="hidden" class="login_id" name="login_id" value="<?php echo session()->get('faculty_login_id'); ?>" /> <input type="hidden" class="user_type_id" name="user_type_id" value="<?php echo session()->get('faculty_user_type_id'); ?>" /> <input type="hidden" class="faculty_institution_id" name="faculty_institution_id" value="<?php echo session()->get('faculty_institution_id'); ?>" /> <div class="form-group"> <label class="control-label col-sm-4">Category</label> <div class="col-sm-8"> <select class="form-control catagory" id="catagory" name="catagory" required> <option value="">Select Category</option> <?php foreach ($domain as $val) { ?> <option value="<?php echo $val->domain_id ?>"><?php echo $val->domain_name ?></option> <?php } ?> </select> </div> </div> <div class="form-group" id="sub_catagory"> <label class="control-label col-sm-4">Sub Category</label> <div class="col-sm-8"> <select class="form-control" id="catagory1" name="sub_catagory" required> <option value="">Select</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-sm-4">Comment</label> <div class="col-sm-8"> <textarea class="comment" name="comments" style="border-radius:5px;" rows="5" cols="55" style="width:100%;"></textarea> </div> </div> <div class="form-group"> <label class="control-label col-sm-4">Course Type</label> <div class="col-sm-8"> <input class="course_type" style="width: 8% !important;margin-top: 10px;" type="checkbox" value="live" name="course_type[]">Live</label> <input class="course_type" style="width: 8% !important;margin-top: 10px;margin-left: 40px;" type="checkbox" value="recorded" name="course_type[]">Recorded</label> </div> </div> <div class="form-group duration_div"> <!-- <label class="control-label col-sm-4">Duration</label> <div class="col-sm-8"> <input type="text" class="form-control" name="duration"> </div> --> </div> <div class="form-group timings_div" style="margin-bottom: -15px !important;"> <!-- <label class="control-label col-sm-4">Duration</label> <div class="col-sm-8"> <input type="text" class="form-control" name="duration"> </div> --> </div> <div class="form-group multiple_fields"></div> <div class="form-group" id="batch_size_div"> <label class="control-label col-sm-4">Batch size</label> <div class="col-sm-8"> <select class="form-control select" id="" name="batch_size"> <option value="">Select one...</option> <option value="1 - 1">1 - 1</option> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="70">70</option> <option value="80">80</option> <option value="90">90</option> <option value="100">100</option> </select> </div> </div> <div class="form-group" style="padding-top:10px;"> <!-- <div class="col-xs-offset-4 col-xs-4 col-sm-offset-4 col-sm-8"> <button type="submit" class="btn btn-primary submit">Send Request</button> </div> --> <div class=" row view_faculty" style="margin-left:30%;"> <div class="col-sm-6"> <center><button type="submit" class="btn btn-primary submit">Send Reques</button></center> </div> <div class="col-sm-6"> <button type="button" id="cancel" class="btn btn-danger center-block cancel cancel_1" style="margin-right:50%;">Cancel</button> </div> </div> </div> </form> </div> <div class="col-md-2"></div> </div> <div class=""> <div id="jaytab" style="margin-top:3%" class="grid"> <div class="grid_div"></div> <table id="list2"></table> <div id="pager2"></div> <div id="dialogSelectRow" title="Warning" style="display:none"> <p>Please select row</p> </div> </div> </div> </div> <!-- /#page-wrapper --> <script type="text/javascript"> $("#batch_size_div").hide(); $("#batch_size_id").prop('required', false); var domain_id = $("#catagory").val(); $("#catagory").change(function() { var domain_id = $("#catagory").val(); CallCategory(domain_id); }); $('.course_type').click(function() { var sel = $('input[type=checkbox]:checked').map(function(_, el) { return $(el).val(); }).get(); var available_type_state = $('input[type=radio]:checked').val(); if (jQuery.inArray("live", sel) !== -1) { $("#batch_size_div").show(); $("#batch_size_id").prop('required', true); var available_type = ''; available_type += '<div class="form-group">'; available_type += '<label class="control-label col-sm-4 available_type_label">Available Type</label>'; available_type += '<div class="col-sm-8">'; // available_type += '<input class="available_type" style="width: 8% !important;margin-top: 10px;" type="radio" value="full_day" name="available_type">Full Day</label>'; available_type += '<input class="available_type" style="width: 8% !important;margin-top: 21px;margin-left: 20px;" type="radio" value="timings" name="available_type">Timings</label>'; available_type += '</div>'; available_type += '</div>'; $(".duration_div").html(available_type); $('input[value="' + available_type_state + '"]').prop("checked", true); } else { $("#batch_size_div").hide(); $("#batch_size_id").prop('required', false); $(".timings_div").empty(); $(".multiple_fields").empty(); $(".duration_div").empty(); } $('.available_type').click(function() { var sel = $('input[type=radio]:checked').map(function(_, el) { return $(el).val(); }).get(); console.log(sel); if (jQuery.inArray("timings", sel) !== -1) { var available_timings = ''; available_timings += '<div class="form-group">'; available_timings += '<label class="control-label col-sm-4 col-xs-12">Available Timings</label>'; available_timings += '<div class="col-sm-8" style="margin-bottom:10px">'; available_timings += '<div class="row">'; available_timings += '<div class="col-sm-5 col-xs-5 space">'; available_timings += '<input id="onselectExample" type="text" class="form-control" name="from_time[]" placeholder="From Time" required />'; available_timings += '</div>'; available_timings += '<div class="col-sm-5 col-xs-5 space2 check">'; available_timings += '<input id="timepicker2" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />'; available_timings += '</div>'; available_timings += '<div class="col-sm-2 col-xs-2">'; available_timings += '<button type="button" class="btn btn-default center-block add_fields">Add</button>'; available_timings += '</div>'; available_timings += '</div>'; available_timings += '</div>'; available_timings += '</div>'; $(".timings_div").html(available_timings); $('#onselectExample').timepicker({ 'timeFormat': 'h:i A', minuteStepping: 15 }); $('#timepicker2').timepicker({ 'timeFormat': 'h:i A', minuteStepping: 15 }); $('#onselectExample').on('changeTime', function() { var value = $(this).val(); var field = ''; field += '<input id="onselectExampless" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />'; $('.check').html(field); if (value == '11:00 PM') { var getTime = value.split(":"); var newTime = '12:00 AM'; } else if (value == '11:30 PM') { var getTime = value.split(":"); var newTime = '12:30 AM'; } else { var getTime = value.split(":"); //split time by colon var hours = parseInt(getTime[0]) + 1; //add two hours if (hours == 13) { hours = 1; } var newTime = hours + ":" + getTime[1]; } var max_hours = parseInt(getTime[0]) + 11; var max_time = max_hours + ":" + getTime[1]; $('#onselectExampless').val(newTime); $('#onselectExampless').timepicker({ interval: 60, minTime: newTime, maxTime: max_time, 'timeFormat': 'h:i A' }); if (max_time == "NaN:undefined") { $("#onselectExampless").val(' '); //$("#onselectExampless").attr("placeholder", "To Time"); var input = ''; input += '<input id="onselectExampless" type="text" class="form-control ui-timepicker-input" name="to_time[]" placeholder="To Time" required="" autocomplete="off">'; $(".space2").html(input); } }); } else { $(".timings_div").empty(); } var i = 0; $('.add_fields').click(function(e) { var fields = ''; fields += '<div class="additonal_field">'; fields += '<label class="control-label col-sm-4 col-xs-12"></label>'; fields += '<div class="col-sm-8 append_time">'; fields += '<div class="row"><div class="col-sm-5 col-xs-5 space">'; fields += '<input id="onselectExample' + i + '" onchange="change_from_time(' + i + ');" type="text" class="form-control" name="from_time[]" placeholder="From Time" required />'; fields += '</div>'; fields += '<div class="col-sm-5 col-xs-5 space2 to_time' + i + '">'; fields += '<input id="timepicker2' + i + '" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />'; fields += '</div>'; fields += '<div class="col-sm-2 col-xs-2"><a href="javascript:void(0);" class="remove_fields">'; fields += '<span class="glyphicon glyphicon-remove"></span>'; fields += '</a>'; fields += '</div>'; fields += '</div>'; fields += '</div>'; fields += '</div>'; $('.multiple_fields').append(fields); $('#onselectExample' + i).timepicker({ 'timeFormat': 'h:i A', minuteStepping: 15 }); $('#timepicker2' + i).timepicker({ 'timeFormat': 'h:i A', minuteStepping: 15 }); $(".remove_fields").click(function() { $(this).closest('.additonal_field').remove(); }); i = i + 1; }); }) }) function change_from_time(id) { var values = $('#onselectExample' + id).val(); var fieldss = ''; fieldss += '<input id="onselect' + id + '" type="text" class="form-control" name="to_time[]" placeholder="To Time" required />'; $('.to_time' + id).html(fieldss); if (values == '11:00 PM') { var getTimes = values.split(":"); var newTimes = '12:00 AM'; $('#onselect' + id).val(newTimes); } else if (values == '11:30 PM') { var getTimes = values.split(":"); var newTimes = '12:30 AM'; $('#onselect' + id).val(newTimes); } else { var getTimes = values.split(":"); //split time by colon var hourss = parseInt(getTimes[0]) + 1; //add two hours if (hourss == 13) { hourss = 1; } var newTimes = hourss + ":" + getTimes[1]; $('#onselect' + id).val(newTimes); } var max_hours = parseInt(getTimes[0]) + 11; var max_time = max_hours + ":" + getTimes[1]; $('#onselect' + id).timepicker({ interval: 60, minTime: newTimes, maxTime: max_time, 'timeFormat': 'h:i A' }); } CallCategory(domain_id); function CallCategory(domain_id) { var login_id = $(".login_id").val(); $.ajax({ url: "<?php echo site_url('get_sub_domain_registered_courses') ?>", type: "POST", data: { 'domain_id': domain_id, 'login_id': login_id }, // async:false, success: function(response) { // response = jQuery.parseJSON(response); console.log(response); if (response.result == 1) { var content = ''; content += '<label class="control-label col-sm-4">Sub Category</label><div class="col-sm-8"><select name="sub_catagory[]" class="form-control sub_catagory" required="required" multiple>'; $.each(response.message, function(idx, vx) { content += '<option value="' + vx.sub_domain_id + '">' + vx.sub_domain + '</option>'; }); content += '</select>'; content += '</div>'; $('#sub_catagory').html(content); $('.sub_catagory').SumoSelect({ selectAll: true }); } else { // $('#sub_catagory').empty(); // $('.sub_catagory').empty(); var empty = ''; empty += '<label class="control-label col-sm-4">Sub Category</label>'; empty += '<div class="col-sm-8">'; empty += '<select class="form-control" id="catagory1" name="sub_catagory" required>'; empty += '<option value="">Select</option>'; empty += '</select>'; empty += '</div>'; $('#sub_catagory').html(empty); } } }); } $(document).ready(function() { $('#request_course').submit(function(e) { e.preventDefault(); var count_checked = $("[name='course_type[]']:checked").length; if (count_checked == 0) { toastr["error"]("Select course type"); } else { formdata = new FormData($(this)[0]); $(".submit").attr('disabled', 'disabled'); $(".submit").text("Submitting..."); $.ajax({ type: 'post', url: '<?php echo site_url('add_requested_course') ?>', data: formdata, contentType: false, processData: false, success: function(response) { response = jQuery.parseJSON(response); console.log(response); if (response.result == 1) { $("#loading").hide(); $(".submit").text("Submit"); $(".submit").removeAttr('disabled'); toastr["success"]("Added Successfully"); $('#request_course')[0].reset(); $("#list2").setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid'); var domain_id = $("#catagory").val(); CallCategory(domain_id); $(".duration_div").empty(); $(".timings_div").empty(); $('.multiple_fields').empty(); } else { $("#loading").hide(); toastr["error"](response.message); $(".submit").text("Submit"); $(".submit").removeAttr('disabled'); //toastr["success"]("Added Successfully"); } } }); } }); //grid CallGrid(); function CallGrid(access_rights_global, access_result_global) { jQuery("#list2").jqGrid({ url: "<?php echo site_url('get_requested_courses') ?>", mtype: "get", datatype: "json", colNames: ['ID', 'Category', 'Sub-Category', 'Course type', 'Timings', 'Comment', 'Status'], colModel: [{ name: 'mapping_id', index: 'mapping_id', width: 40, hidden: true, editable: false, key: true }, { name: 'domain_name', index: 'domain_name', editable: false, width: 150, }, { name: 'sub_domains', index: 'sub_domains', width: 150, editable: false }, { name: 'available_type', index: 'available_type', width: 150, editable: false }, { name: 'faculty_timings', index: 'faculty_timings', width: 150, editable: false }, { name: 'comments', index: 'comments', editable: false, width: 250 }, { name: 'approval_status', index: 'approval_status', width: 150, editable: false, formatter: function(cellvalue, options, rowObject) { if (rowObject.approval_status == 'APPROVED') { var retVal = ''; retVal += '<b>APPROVED</b>'; return retVal; } else if (rowObject.return_status == 'RETURNED') { var retVal = ''; retVal += 'RETURNED'; return retVal; } else { var retVal = ''; retVal += 'NOT APPROVED'; return retVal; } } }, ], rowNum: 20, rowTotal: 2000, rowList: [20, 30], rownumbers: true, //rownumWidth: 60, pager: "#pager2", sortname: 'id', viewrecords: true, gridview: true, autowidth: true, sortorder: "asc", shrinkToFit: true, loadonce: true, caption: "Requested Course List", }); $("#list2").jqGrid("setLabel", "rn", "SL"); $("#list2").jqGrid('filterToolbar', { searchOperators: false, stringResult: true, searchOnEnter: false, defaultSearch: "cn" }); //for multisearch code,remove if not required $("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false, search: false, refreshstate: "current" }, {}, {}, {}, { sopt: ['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'], closeOnEscape: true, multipleSearch: true, closeAfterSearch: true, closeAfterDelete: true, closeAfterEdit: true }, ); } }); const cancelButton = document.getElementById("cancel"); // Add a click event listener to the cancel button cancelButton.addEventListener("click", function() { // Clear the form data document.forms[0].reset(); }); </script> <?php echo view('includes/faculty_footer'); ?> <style> #page-wrapper{ background-image: url(public/assets/website_assets/images/banner.png); } .append_time { margin-bottom: 3%; } #FrmGrid_list2 { width: 100% !important; } .ui-jqdialog .ui-jqdialog-titlebar { height: 29px !important; background-color: #001a00; color: white; padding-left: 10px; } .fm-button { height: 21px !important; padding: 1px; margin-right: 10px !important; height: 21px !important; width: 43%; margin-top: -7px !important; } .ui-jqdialog-content td.navButton { padding-top: 12px !important; } .ui-jqgrid .ui-jqgrid-titlebar { height: 27px !important; /*background:#1e7ad7 !important;*/ color: white !important; } .ui-jqgrid-bdiv { height: auto !important; } .ui-widget-overlay { z-index: 0 !important; } #request_course{ margin-right: 25%; } /* .ui-widget-header { background: #1e7ad7 !important; } */ .ui-jqgrid-hdiv ui-state-default { /* width: 873px !important; */ cursor: default !important } ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #fed22f; background: #ffe45c; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { font-weight: bold; color: black; } /* .ui-jqgrid .ui-jqgrid-bdiv { overflow-y: scroll; overflow-x: scroll ; } .ui-jqgrid-htable{ width: 100% !important; } #list2{ width: 100% !important; } */ @media only screen and (min-width:320px) and (max-width:640px) { #jaytab { width: auto !important; overflow-x: scroll !important; } .ui-jqgrid ui-widget ui-widget-content ui-corner-all { width: 900px !important; } .ui-jqgrid-view { width: 900px !important; } .ui-jqgrid-hdiv { width: 900px !important; } .ui-jqgrid-htable { width: 900px !important; } .ui-jqgrid-bdiv { width: 900px !important; } #list2 { width: 900px !important; } #pager2 { width: 900px !important; } .available_div { padding-left: 0px !important; padding-right: 30px !important; } } @media only screen and (min-width:320px) and (max-width:640px) { #jaytab { width: auto !important; overflow-x: scroll !important; } .ui-jqgrid ui-widget ui-widget-content ui-corner-all { width: 900px !important; } .ui-jqgrid-view { width: 900px !important; } .ui-jqgrid-hdiv { width: 900px !important; } .ui-jqgrid-htable { width: 900px !important; } .ui-jqgrid-bdiv { width: 900px !important; } #list2 { width: 900px !important; } #pager2 { width: 900px !important; } .available_div { padding-left: 0px !important; padding-right: 30px !important; } } @media only screen and (min-width:641px) and (max-width:991px) { #jaytab { width: auto !important; overflow-x: scroll !important; } .ui-jqgrid ui-widget ui-widget-content ui-corner-all { width: 900px !important; } .ui-jqgrid-view { width: 900px !important; } .ui-jqgrid-hdiv { width: 900px !important; } .ui-jqgrid-htable { width: 900px !important; } .ui-jqgrid-bdiv { width: 900px !important; } #list2 { width: 900px !important; } #pager2 { width: 900px !important; } } </style>