Materialize CSS Select not Closing after selecting element - drop-down-menu

I am using materialize css. I created a tab and put select element inside it. But it was not closing after selecting element.I am using materialize 0.98.
If i put it outside tab then it works.
Here is my code :
My Scrtipt
<script>
$(document).ready(function(e) {
$('ul.tabs').tabs({'swipeable': true});
$("select").material_select();
});
</script>
Html Code :
<div class="main mainContentMargin">
<div class="row">
<!-- This will Work-->
<div class="col s12 input-field">
<select id="company_select1" name="company_select1">
<option value="-1" selected>Select Company</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label>Select Company</label>
</div>
</div>
<div class="row">
<div class="card col s12 medium">
<ul id="tabs-swipe-demo" class="tabs tabs-fixed-width" style="margin-bottom: 1%">
<li class="tab col s6">To Supplier</li>
<li class="tab col s6">Using Product</li>
</ul>
<div id="test-swipe-1" class="col s12">
<!-- This will Work but not closing the dropdown-->
<div class="row">
<div class="col s12 input-field">
<select id="company_select" name="company_select">
<option value="-1" selected>Select Company</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label>Select Company</label>
</div>
</div>
</div>
<div id="test-swipe-2" class="col s12">
</div>
</div>
</div>
</div>

Dropdown is not closing because we make tab swipeable. That's why it dropdown click event was catched by the tab.
I just set the stopPropogation option to true in dropdown and it work
$(document).ready(function(e) {
$('ul.tabs').tabs({'swipeable': true});
$("select").material_select({"stopPropagation":true});
});

Related

Is there a way to add custom attributes to slimselect?

In Lighthouse report I have an error: "ARIA items do not have accessible names" and it looks like div.ss-list is the problem (because it has role="listbox" attribute which fails aria-input-field-name audit). Unfortunately my slimselect doesn't copy custom attributes from select when initialized, for example aria-label="category".
Is there a way to copy/add custom attributes to slimselect div.ss-list element when initializing (without injection html after initializing) or do you have any other good solutions to that issue?
Here is sample code from devtools with already created slimselect:
<select name="category" aria-label="Category" class="search__select" tabindex="-1" data-ssid="ss-59594" aria-hidden="true" style="display: none;">
<option value="">All</option>
<option value="5576">Category 1</option>
<option value="10">Category 2</option>
<option value="82">Category 3</option>
<option value="199">Category 4</option>
</select>
<div class="ss-59594 ss-main search__select" style="">
<div class="ss-single-selected ss-open-below">
<span class="placeholder">All</span>
<span class="ss-deselect ss-hide">x</span>
<span class="ss-arrow"><span class="arrow-up"></span></span>
</div>
<div class="ss-content ss-open">
<div class="ss-search">
<input type="search" placeholder="Search" tabindex="0" aria-label="Search" autocapitalize="off" autocomplete="off" autocorrect="off">
</div>
<div class="ss-list" role="listbox">
<div class="ss-option ss-disabled ss-option-selected" role="option" data-id="97962314">All</div>
<div class="ss-option" role="option" data-id="79478522">Category 1</div>
<div class="ss-option" role="option" data-id="32989768">Category 2</div>
<div class="ss-option" role="option" data-id="53607703">Category 3</div>
<div class="ss-option" role="option" data-id="31214879">Category 4</div>
</div>
</div>
</div>

Add or delete rows in table in Thymeleaf

I wish to add row or rows into "bin type" in example below:
It depends on me how many rows it is going to be. If i will decide on three rows i wish to finalize on confirmation button and continue another table-row. I wish to do that in Thymeleaf because i don't know JavaScript. My whole project is in Spring/Hibernate/thymeleaf, contains about 40 bins in my sql DB.
Here is my html file:
<div class="form-row">
<div class="form-group col-md-8">
<select class="form-control" th:field="*{binsFeatures}">
<option value="0">Select BIN type</option>
<option th:each="binFeature : ${binsFeatures}" th:value="${binFeature.id}"
th:text="${binFeature.name}"></option>
</select>
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-dumpster"></i></span>
</div>
</div>
<div class="form-group col-md-4">
<input type="text" th:field="*{quantity}"
class="form-control input-lg"
placeholder="amount"
required="true">
<span th:if="${#fields.hasErrors('quantity')}"
th:errors="*{quantity}"
class="text-danger">
Quantity Error
</span>
<span class="input-group-addon"></span>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-8">
<select class="form-control" th:field="*{type}">
<option value="0">Select Type of Inbound</option>
<option th:each="inbound : ${inbounds}" th:value="${inbound.id}"
th:text="${inbound.type}"></option>
</select>
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-viruses"></i></span>
</div>

How to load vue component after being imported. May not load itself, should load in the file it's imported in

I'm trying to make a dynamic table with filters.
The filters are in Filters.vue and are supposed to be loaded in the Table.vue.
But the Filters.vue is not allowed to load itself, i want it to import itself into the Table.vue and then load Table.vue with the imported data from Filters.vue.
If Filters.vue loads itself then it will crash, i can fix the crash by putting the things in the prop in Table.vue html tag but that's not the way i want it to be.
Table.vue
<div class="row m-3">
<guide-filter></guide-filter>
</div>
Filters.vue
<template>
<div class="col-sm-auto">
<small class="text-cap mb-2 support-text-body">Status</small>
<div class="w-100">
<select v-model="filterResult.active" class="select2-selection custom-select">
<option value="">All</option>
<option value="1" >Active</option>
<option value="false" >Archived</option>
</select>
</div>
</div>
<div class="col-sm-auto">
<small class="text-cap mb-2 support-text-body">Language </small>
<div class="w-100">
<select v-model="filterResult.language_id" class="select2-selection custom-select">
<option value="">All</option>
<option v-for="language in languages" v-bind:key="language.id" v-bind:value="language.id">{{ language.name }}</option>
</select>
</div>
</div>
</template>
<script>
export default {
data() {
return {
filterResult: {},
}
},
}
</script>
<div class="col-sm-auto">
<small class="text-cap mb-2 support-text-body">Language </small>
<div class="w-100">
<select v-model="filterResult.language_id" class="select2-selection custom-select">
<option value="">All</option>
<option v-for="language in languages" v-bind:key="language.id" v-bind:value="language.id">{{ language.name }}</option>
</select>
</div>
</div>

Livewire & Select2

I am using Livewire and Slect2 in my project
and I am code to select 2 javascript also but select 2 value is not passed to the database here is my code
My Blade File
<div class="col-12 col-lg-12 col-sm-12">
<div wire:ignore>
<div class="form-group">
<label for="exampleInputRounded0">Section Name</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-globe-asia text-primary"></i></span>
</div>
<select class="form-control rounded-0 " wire:model="cr_classes_id" id="cr_classes_id" style="width: 100%;" tabindex="-1" aria-hidden="true">
#foreach ($classes as $class)
<option value="{{$class->id}}">{{$class->classes_name}}</option>
#endforeach
</select>
</div>
#error('cr_classes_sec_id') <span class="text-danger error">{{ $message }}</span>#enderror
</div>
</div>
</div>
Here is My JS
#push('js')
<script type="text/javascript">
$(document).ready(function () {
$('#cr_classes_id').select2();
$('#cr_classes_id').on('change', function (e) {
var data = $('#cr_classes_id').select2("val");
#this.set('cr_classes_id', data);
});
});
</script>
#endpush
Consol Error
Uncaught TypeError: Cannot read property '$wire' of undefined
at Livewire.value (index.js:31)
at HTMLSelectElement.<anonymous> (ClassRooms:844)
at HTMLSelectElement.dispatch (jquery.min.js:2)
at HTMLSelectElement.v.handle (jquery.min.js:2)
at Object.trigger (jquery.min.js:2)
at HTMLSelectElement.<anonymous> (jquery.min.js:2)
at Function.each (jquery.min.js:2)
at k.fn.init.each (jquery.min.js:2)
at k.fn.init.trigger (jquery.min.js:2)
at n.select (select2.min.js:2)
without wire:ignore Working find and data send to the database
Try this
<div class="col-12 col-lg-12 col-sm-12">
<div wire:ignore.self>
<div class="form-group">
<label for="exampleInputRounded0">Section Name</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-globe-asia text-primary"></i></span>
</div>
<select class="form-control rounded-0 " wire:change="$emit('classChanged', $event.target.value)" style="width: 100%;" tabindex="-1" aria-hidden="true">
#foreach ($classes as $class)
<option value="{{$class->id}}" {{ $cr_classes_id ? 'selected' : ''}} >{{$class->classes_name}}</option>
#endforeach
</select>
</div>
#error('cr_classes_sec_id') <span class="text-danger error">{{ $message }}</span>#enderror
</div>
</div>
</div>
and in component
public $cr_classes_id = '';
public $listeners = [
'classChanged'
];
......
public function classChanged($value)
{
$this->cr_classes_id = $value;
}
try to add ":key="cr_classes_id_key" in your blade file
<div class="col-12 col-lg-12 col-sm-12">
<div wire:ignore :key="cr_classes_id_key">
<div class="form-group">
<label for="exampleInputRounded0">Section Name</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-globe-asia text-primary"></i></span>
</div>
<select class="form-control rounded-0 " wire:model="cr_classes_id" id="cr_classes_id" style="width: 100%;" tabindex="-1" aria-hidden="true">
#foreach ($classes as $class)
<option value="{{$class->id}}">{{$class->classes_name}}</option>
#endforeach
</select>
</div>
#error('cr_classes_sec_id') <span class="text-danger error">{{ $message }}</span>#enderror
</div>
</div>

Empty object given : laravel 5.1 ajax file upload

HTML form
{!! Form::open(['route' => 'events.store','id'=>'form-create-event','name' => 'form-create-event','files'=>true]) !!}
<div class="card">
<div class="card-body card-padding">
<div class="row">
<div id="step1" class="col-sm-4">
<!-- <h3 class="c-gray m-b-15">principales information</h3> -->
<div class="round round-lg blue">
<span>1</span>
</div>
<div class="form-group fg-float">
<div class="fg-line">
<p class="f-200 m-b-5 c-gray">Type d'évènement</p>
<select id="type_event" name="type_event" class="tag-select" data-placeholder="">
#foreach($types_events as $value)
<option value="{!! $value->id !!}">
{{$value->name}}
</option>
#endforeach
</select>
</div>
</div>
<div class="form-group fg-float">
<div class="fg-line">
<input type="text" class="input-sm form-control fg-input" data-rule-minlength='2' required="false" id="event_name" name="event_name">
</div>
<label class="fg-label">Nom de l'évènement</label>
</div>
<!-- <div class="form-group fg-float">
<div class="fg-line">
<input type="text" class="input-sm form-control fg-input input-mask" required="true" data-mask="0000-00-00" name="event_begin_date" id="event_begin_date">
</div>
<label class="fg-label">Date début (expl 2016-01-30)</label>
</div> -->
<div class="input-group form-group">
<span class="input-group-addon"><i class="md md-event"></i></span>
<div class="dtp-container dropdown fg-line">
<input type='text' name="event_begin_date" id="event_begin_date" class="form-control date-picker" data-toggle="dropdown" placeholder="Date début">
</div>
</div>
<!-- <div class="form-group fg-float">
<div class="fg-line">
<input type="text" class="input-sm form-control fg-input input-mask" required="false" data-mask="0000-00-00" id="event_end_date" name="event_end_date">
</div>
<label class="fg-label">Date fin (expl 2016-01-31)</label>
</div> -->
<div class="input-group form-group">
<span class="input-group-addon"><i class="md md-event"></i></span>
<div class="dtp-container dropdown fg-line">
<input type='text' id="event_end_date" name="event_end_date" class="form-control date-picker" data-toggle="dropdown" placeholder="Date fin">
</div>
</div>
<div class='form-group fg-float'>
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn btn-primary btn-file m-r-10">
<span class="fileinput-new">Ajouter un document</span>
<span class="fileinput-exists">Modifier</span>
<input type="file" id="event_document" name="event_document">
</span>
<span class="fileinput-filename"></span>
×
</div>
</div>
<!-- <div id="event_document_tag_name" class="form-group">
<input type="text" placeholder="Tag" id="event_document_tag" name="event_document_tag" class="form-control">
</div> -->
<div class="form-group fg-float">
<div class="fg-line">
<textarea name="event_description" id="event_description" required="false" class="form-control">
</textarea>
</div>
<label class="fg-label">Description</label>
</div>
<div class="form-group fg-float">
<div class="fg-line">
<textarea id="event_info_pr" name="event_info_pr" required="false" class="form-control">
</textarea>
</div>
<label class="fg-label">Informations pratiques</label>
</div>
<div class="form-group fg-float">
<div class="fg-line">
<textarea name="event_adress" required="false" id="event_adress" class="form-control">
</textarea>
</div>
<label class="fg-label">Adresse</label>
</div>
</div>
<div id="step2" class="col-sm-4">
<!-- <h3 class="c-gray m-b-15">informations</h3> -->
<div class="round round-lg blue">
<span>2</span>
</div>
<div class="form-group fg-float">
<div class="fg-line">
<p class="f-200 m-b-5 c-gray">Invités
<a data-toggle="modal" href="#modalDefaultUploadUsers" class="btn btn-success btn-xs waves-effect pull-right">
<i class="md md-file-upload"></i>
</a>
<a style="margin-right: 10px;" data-toggle="modal" href="#modalDefaultAddUser" class="btn btn-success btn-xs waves-effect pull-right">
<i class="md md-add"></i>
</a>
</p>
<select multiple id="event_publics" name="event_publics[]" class="tag-select" data-placeholder="">
#foreach($users as $value)
<option value="{!! $value->id !!}">
{{$value->firstname}} {{$value->lastname}}
</option>
#endforeach
</select>
</div>
</div>
<div class="form-group fg-float">
<div class="fg-line">
<p class="f-200 m-b-5 c-gray">Intervenants
</p>
<select id="event_speakers" name="speakers[]" class="tag-select" multiple data-placeholder="">
#foreach($users as $value)
<option value="{!! $value->id !!}">
{{$value->firstname}} {{$value->lastname}}
</option>
#endforeach
</select>
</div>
</div>
<!-- Groupe et participants -->
<div class="form-group fg-float">
<div class="fg-line">
<p class="f-200 m-b-5 c-gray">Groupes et participants</p>
<!-- <select id="event_gp_participants" name="gps_participants[]" class="demo" multiple="multiple">
#foreach($groups as $group)
#if($group->id !== 1 && $group->id !== 2)
<optgroup value="{{$group->id}}" label="{{$group->name}} ">
#foreach($users as $value)
<option value="group[{{$group->id}}][{{$value->id}}]" >
{{$value->firstname}} {{$value->lastname}}
</option>
#endforeach
</optgroup>
#endif
#endforeach
</select> -->
<select id="event_gp_participants" data-live-search="true" name="gps_participants[]" multiple class="selectpicker">
#foreach($groups as $group) #if($group->id !== 1 && $group->id !== 2)
<optgroup value="{{$group->id}}" label="{{$group->name}} ">
#foreach($users as $value)
<option value="group[{{$group->id}}][{{$value->id}}]">
{{$value->firstname}} {{$value->lastname}}
</option>
#endforeach
</optgroup>
#endif #endforeach
</select>
</div>
</div>
</div>
<div id="step3" class="col-sm-4">
<!-- <h3 class="c-gray m-b-15">informations</h3> -->
<div class="round round-lg blue">
<span>3</span>
</div>
<div class="table-responsive">
<table id="data-table-basic" class="table table-striped table-vmiddle">
<thead>
<tr>
<th colspan="3">
<a class="pull-right" data-toggle="modal" href="#modalWider">
Ajouter séance
</a>
</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
</div>
</div>
</div>
<button type="submit" class="btn btn-info"> Enregistrer
</button>
{!! link_to_route('events.index', 'Annuler', [], ['class' => 'btn btn-link']) !!}
</div>
</div>
{!! Form::close() !!}
JS code
var form = document.forms.namedItem("form-create-event");
console.log(form);
form.addEventListener('submit', function(ev) {
oData = new FormData(form);
oData.append("seances", seance);
console.log(oData);
var oReq = new XMLHttpRequest();
oReq.open("POST", form.action, true);
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
console.log('success');
} else {
console.log('failed');
}
};
oReq.send(oData);
ev.preventDefault();
}, false);
PHP code
public function store(Request $request)
{
return response()->json( $request->all());
}
The Problem : dd($request->event_document) returns empty object
header request
Server response
Most probably you are trying to upload files bigger than in size allowed by your php.ini. so set the value of upload_max_filesize and post_max_size in your php.ini :
; Maximum allowed size for uploaded files.
upload_max_filesize = 10M or whatever size you need
; Must be greater than or equal to upload_max_filesize
post_max_size = 10M

Resources