A select element with a pre-selected value does not render correctly, if I do not add wire:model to the element, it works well and shows the selected value in the select element.
But I need to add wire:model to save user-updated data
<div class="m-widget4">
#foreach ($this->result as $data)
<div>{{$data->id}}</div>
<select wire:model="list_session_picker.{{ $data->id }}" wire:key="{{ $data->id }}">
<option value="" disabled hidden>Select Session</option>
#foreach ($sessionData as $session)
<option value="{{ $session->id }}">{{ $data->user_session_id == $session->id ? 'selected' : '' }} {{ $session->session }}</option>
#endforeach
</select>
#endforeach
</div>
Componenet.php
public $result = [], $list_session_picker = [];
public $search_picker;
public function render()
{
$data['sessionData'] = Session::all('id', 'session');
$data['sectionData'] = Section::all('id', 'section');
return view('livewire.promote', $data);
}
public function search()
{
$search = ScCompany::query();
if (!empty($this->search_picker)) {
$search->where('session_id', $this->search_picker);
return
$this->result = $search
->whereNull('date_of_enter')
->with(['session:id,session', 'section:id,name'])
->get();
}
}
It works if I remove wire:model, so how could I show the selected value while using wire:model or is there any other way ?
Note** here i set wire:model="list_session_picker.{{ $data->id }}" so the list comes from for each loop can't update each other (on changing the option of one select will not uodate another select element in the list) .
I found this and this solutions, but how to apply them in my case, not much clear to me
You should set the selected element in the livewire component and not in the view. The view will reflect the state of the component thanks to the wire model.
At present you have conflicting views of which element should be selected and they will always be at odds with each other.
Just wire model. If you have an existing item selected, then set it state at the component.
Related
I am using Selectize.js to create a tagging like experience, for adding users to jobs, using the current users of the system.
In my view
Following the documentation, I have a select box with the multiple attribute which I populate with the users on the system. I have also declared that this input is an array by adding square braces.
<select name="job_administrator[]" multiple id="selectize" class="form-control{{ $errors->has('job_administrator') ? ' is-invalid' : '' }}">
<option value="">Select a user </option>
#foreach($users as $user)
<option value="{{ $user->id }}">{{ $user->full_name }} - {{ $user->access_level }}</option>
#endforeach
</select>
Then, I initialize the plugin
$('#selectize').selectize({
placeholder: 'Select user',
plugins: ['remove_button'],
delimiter: ',',
persist: false,
})
In my Controller
/**
* Handle adding job administrators to jobs
*
* #param Array $data
* #return void
*/
public function addAdministrators(Array $data, int $id)
{
$vacancy = JobPost::where('id', $id)->first();
if(!empty($data['job_administrator'])){
$jobAdmins = $data['job_administrator'];
// Grab the IDs for the tags in the array
$admins = Admin::whereIn('id', $jobAdmins)->get()->pluck('id');
$vacancy->administrators()->sync($admins);
} else {
// If there were no tags, remove them from this model instance
$vacancy->administrators()->sync(array());
}
}
My question is: on the editing screen is it possible to prefill the selected items when using Selectize?
Yes you can, just add the selected attribute to the option. You can do something like this.
<option value="{{ $user->id }}" {{$selected->contains($user->id) ? 'selected' : ''}}>{{ $user->full_name }} - {{ $user->access_level }}</option>
The $selected is then a collection of ids.
In my view tests.index is it possible to open my route tests.show by clicking in a select dropdown where datas comes from database ?
My controller :
public function index(Request $request)
{
$tests = DB::table('test')->distinct()->get();
return view('tests.index')->with('tests', $tests);
}
public function show($id)
{
$test = Test::findOrFail($id);
return view('tests.show', compact('test'));
}
My view index :
<select id="apports" type="dropdown-toggle" class="form-control" name="apports" onchange="{{ route("tests.show", $test->id) }}">
<option value="choisir" selected disabled>Choisir</option>
#foreach($tests as $test)
<option class="apports" value="{{$test->id}}">{{$test->apports}}</option>
#endforeach
When I put my route here : onchange I get the error "Undefined variable: test"
when I add a button below the select like that :
<a class="btn btn-small btn-success" href="{{ route("tests.show", $test->id) }}">Show</a>
I get always the last id of the table...
I would prefer not have a button, just when I change value in the select, return tests.show... Is someone could help me please ?
The $test variable is not set in the index view, only the $tests collection is available because you load the view with that:
return view('tests.index')->with('tests', $tests);
You need to use some JavaScript to achieve what you are looking for.
In the index template:
<select id="apports" type="dropdown-toggle" class="form-control" name="apports" onchange="goToTestPage(this.value)">
Then in your JavaScript file:
function goToTestPage(id) {
window.location.href = "link to your show route/"+id;
}
If the test id is changed dynamically by the user, you can't set it on PHP because PHP is executed before the user actually does the selection, so you have to rely on JavaScript
All you need is a javascript snippet to read the select option change and redirect you.
<select id="apports" type="dropdown-toggle" class="form-control" name="apports">
<option value="choisir" selected disabled>Choisir</option>
#foreach($tests as $test)
<option class="apports" value="{{ route("tests.show", $test->id) }}">{{ $test->apports }}</option>
#endforeach
</select>
<script>
$('select').on('change', function (e) {
var link = $("option:selected", this).val();
if (link) {
location.href = link;
}
});
</script>
I have dynamically generated multiple select elements in a page. And I have used
v-model = "selected_option"
for getting the value of the option selected . But all the select elements in the page have different option values and none of the select elements have any common default option value. All the select elements need to have the first option element as the default selected value. But if I write
selected_option = ''
then all the select elements are showing blank by default.
I can get the first option value as the default selected value if I remove
v-model = "selected_option"
and
selected_option = ''
but then I am not being able to get the selected value in the #change method . Here is my code
<div v-if="row.answer_input_type === 'Dropdown'">
<template v-for="answer in answers">
<template v-if="answer.AnswerTypeID === row.answer_type_id">
<select class="dropdown_cl" v-bind:disabled="row.is_enabled == 1 ? false : true" #change="selectChange(row.question_id)" v-model="selected_option">
<option v-for="option in answer.AnswerDescription" v-bind:value="option.AnswerMasterID" >{{option.AnswerDescription}}</option>
</select>
<p v-for="option in answer.AnswerDescription">{{option.AnswerMasterID}}</p>
</template>
</template>
</div>
the default value has been assigned as follows -
el : '...'
data : {
...
selected_option: '';
},
methods: {
selectChange: function(question_id) {
var self=this;
alert(question_id + " " + self.selected_option);
},
...
},
....
I need each select to have the first option as the default selected value. How can I do this? thanks
Here is a quick example of what I was explaining in comments.
<select v-for="answer in answers"
v-model="answer.selectedOption">
<option v-for="option in answer.options"
:value="option">
{{option}}
</option>
</select>
Example.
If you take this approach, you can manage the default option for each individual select. You also will know what was selected for each answer automatically.
I'm trying to passed my selected list in variable. Like this but it prints me a undefined value.
function showUserOptions(a)
{
var b = console.log(a[a.selectedIndex].value);
alert (b);
}
I can get the value using console.log but I want the user click the selected list the value inside in variable will changed.
Form:
<div class = "form-group">
<label for = "to" class = "control-label">To:</label>
<select onChange = "showUserOptions(this)" name = "to" class = "form-control" multiple>
#foreach ($result as $list)
<option value = "{{ $list->id }}">{{ $list->username }}</option>
#endforeach
</select>
</div>
Controller:
public function getDocuments()
{
$result = DB::table('users')->where('id', '!=', Auth::id())->get();
return view ('document.create')->with('result', $result);
}
provide a id to your drop down, and its name will be an array so that it can hold multiple values like:
<select name="myDropDown[]" id="myDropDown" class= "form-control" multiple>
#foreach ($result as $list)
<option value = "{{ $list->id }}">{{ $list->username }}</option>
#endforeach
</select>
$('#myDropDown').change(function(){
var selectedVal = $(this).val();
// it will return the selected values in an array
});
Try this, it work.
Currently the onClick method is toggling open class, showing 3 dropdown at one time.
I want to open the dropdown for the selected option, 1 dropdown at a time.
methods: {
onClick: function(event) {
this.is_open = !this.is_open;
}
}
http://jsfiddle.net/bs9Lh73m/
The problem with that approach is you need to be able to distinguish three different states, one for each button. Here's an approach that changes to tracking which of the items should be currently displayed by index:
http://jsfiddle.net/bs9Lh73m/2/
<label for="i_{{$index}}" v-on="click : onClick($index)">{{ model.type }}</label>
<div class="item_details" v-class="open : $index == openedCount">
<span>Count
<select v-model="modelCount">
<option v-repeat="count : model.features[0].count" value="{{ count.int }}">
{{ count.int }}
</option>
</select>
</span>
</div>
and
onClick: function ($index) {
this.openedCount = $index;
}
The $index == openedCount is a conditional that will resolve to true or false which is what is needed to get v-class to apply the class. $index is a special Vue variable which is set in the current model by v-repeat. I added a property called openedCount that indicates which button should currently be considered to be opened. The onClick call uses $index to update this value.