Code Multiselect
unknown
php_laravel_blade
3 years ago
6.3 kB
3
Indexable
Never
<tr id="row{{$i}}" class="text-center input-row" data-row="{{$i}}"> <td> <input data-date-autoclose="true" name="jobs[{{$i}}][date]" required type="text" class="form-control datepicker" data-date-format="yyyy-mm-dd" value="{{ old('jobs.'.$i.'.date') }}"/> </td> <td> <input name="jobs[{{$i}}][line]" required type="text" class="form-control" value="{{ old('jobs.'.$i.'.line') }}"/> </td> <td> <input name="jobs[{{$i}}][no_container]" required type="text" class="form-control number" value="{{ old('jobs.'.$i.'.no_container') }}"/> </td> <td> <div class="multiselect_div"> <select name="jobs[{{$i}}][type_containers]" id="multiselect4-filter" class="multiselect multiselect-custom type_container{{$i}}" onload="return addMultiSelect({{$i}})"> @php $type_containers = \App\TypeContainer::all(); @endphp @foreach ($type_containers as $type) <option {{ old('jobs.'.$i.'.type_containers') == $type->id ? 'selected' : '' }} value="{{ $type->id }}"> {{ $type->name }} </option> @endforeach </select> </div> </td> <td> <div class="multiselect_div"> <select name="jobs[{{$i}}][ports]" id="multiselect5-filter" class="multiselect multiselect-custom type_port{{$i}}" onload="return addMultiSelect({{$i}})"> @php $ports = \App\Port::all(); @endphp @foreach ($ports as $port) <option {{ old('jobs.'.$i.'.type_containers') == $port->id ? 'selected' : '' }} value="{{ $port->id }}">{{ $port->name }}</option> @endforeach </select> </div> </td> <td> <div class="form-row align-items-center"> <div class="col-md-6"> <input name="jobs[{{$i}}][temperature]" required type="text" class="form-control" value="{{ old('jobs.'.$i.'.temperature') }}"/> </div> <div class="col-md-6"> <select name="jobs[{{$i}}][temperatue_type]" required class="form-control" id="temperature_type"> <option {{ old('jobs.'.$i.'.temperature_type') == 'C' ? 'selected' : '' }} value="C">Celcius</option> <option {{ old('jobs.'.$i.'.temperature_type') == 'K' ? 'selected' : '' }} value="K">Kelvin</option> <option {{ old('jobs.'.$i.'.temperature_type') == 'F' ? 'selected' : '' }} value="F">Fahrenheit</option> </select> </div> </div> </td> <td> <input name="jobs[{{$i}}][product_code]" required type="text" class="form-control" value="{{ old('jobs.'.$i.'.product_code') }}"/> </td> <td> <input name="jobs[{{$i}}][qty]" required type="text" class="form-control number" onkeypress="return onlyNumberKey(event)" value="{{ old('jobs.'.$i.'.qty') }}"/> </td> <td> <input name="jobs[{{$i}}][notes]" type="text" class="form-control" value="{{ old('jobs.'.$i.'.notes') }}"/> </td> @if ($i != 0) <td> <button class="delete-row btn btn-danger" type="button"> <i class="fa fa-trash"></i> </button> </td> @endif </tr> <script> $(document).on('keyup', '.number', function() { $(this).val($(this).val().replace(/[^0-9]/g, '')); const value = $(this).val() const subsstr = value.substring(0, 1) if (subsstr == 0) { $(this).val('') } }) $('#multiselect4-filter').multiselect({ enableFiltering: true, enableCaseInsensitiveFiltering: true, maxHeight: 200 }); $('#multiselect5-filter').multiselect({ enableFiltering: true, enableCaseInsensitiveFiltering: true, maxHeight: 200 }); $('.datepicker').datepicker({ startDate: '-0m', }); function addMultiSelect(id) { $('#test-body').find(`select.type_container${id}`).multiselect({ enableFiltering: true, enableCaseInsensitiveFiltering: true, maxHeight: 200 }); }; // Remove criterion $(document).on("click", ".delete-row", function() { if (row > 1) { $(this).closest('tr').remove(); row--; } return false; }); // Add new row upload $("#add-upload-row").click(function() { var html = $(".clone").html(); $(".increment").after(html); }); $("body").on("click", "#delete-upload-row", function() { $(this).parents(".control-group").remove(); }); $(document).on('submit', 'form#form-excel', function(e) { e.preventDefault() const input = $('#file').val() if (input == '') { alert('please select the file first') return } let form_data = new FormData(this); $.ajax({ type: 'post', url: "{{ route('import.jobs') }}", data: form_data, cache: false, contentType: false, processData: false, dataType: 'json', beforeSend: function() { setLoading() }, success: function(res) { if (res.status) { hideLoading() window.location.href = "{{ route('view.import.jobs') }}" } }, error: function(xhr) { console.log(xhr); //hideLoading() } }) }) function setLoading() { let loading_text = $('.btn-import-excel').data('loading-text'); $('.btn-import-excel').html(loading_text).attr('disabled', true); } function hideLoading() { $('.btn-import-excel').html('Import').attr('disabled', false) } </script>