Load a specific option of SELECT tag while loading a template in Marionette - marionette

I'm trying to load the specific value of a drop down select tag when I'm loading that html inside the Marionette LayoutView.
The situation is
This is my html template which is passed to a Marionette LayoutView with a Model
<div class="span3">
<div class="control-group">
<label for="registeredIndicator">Registered</label>
<select class="input-medium" id="registeredIndicator">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
In that model a value registered indicator is retrieved as true or false.
My Goal is - When this template is rendered I want to display the value which is retrieved i.e. if its true, registeredIndicator should be Yes and vice-versa.
I accomplished this thing with help of jQuery inside the onRender function of LayoutView like
if(true === this.model.get('registeredIndicator')){
this.$('#registeredIndicator option:eq(1)').prop('selected', true);
}
but I got lot of drop downs in the HTML and it would not be a efficient way to check each every one with jquery.
I tried using if else inside the HTML with <%%> but this was not fruitful and is not correct also.
Is there any another approach available in which i can manipulate the data inside the template itself?
Thanks in advance!

Adding the conditional below should work:
<div class="span3">
<div class="control-group">
<label for="registeredIndicator">Registered</label>
<select class="input-medium" id="registeredIndicator">
<option value="">Select</option>
<option <%= registeredIndicator ? "selected" : "" %> value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
Specifically I added <%= registeredIndicator ? "selected" : "" %> to your template.

Related

How to select an option from Laravel into a select?

I'm bringing all the data from the database and displaying in inputs for an edit page of my CRUD, but I can't figure out how to select an option based on the data.
With inputs I know that I can just do this:
<div class="col-md-6">
<label for="razao" class="form-label">Nome Empresarial</label>
<input type="text" name="razao" value="{{$cliente->razao ?? old('razao')}}" class="form-control" id="razao">
</div>
But i can't find anything about select, and how to set an option "selected" based on the data from the database.
The select:
<div class="col-md-3">
<label for="tipoContribuinteSelectCnpj" class="form-label">Tipo de Contribuição</label>
<select class="form-control select2-single" name="tipoContribuinteCnpj" id="tipoContribuinteSelectCnpj">
<option hidden></option>
<option value="I">ICMS</option>
<option value="X">Isento</option>
<option value="N">Não Contribuinte</option>
</select>
</div>
The data saved in the database is a single char that corresponds to the value of the option of the select.
Although it looks stupid, this is how i did in case you came here from google:
<div class="col-md-3">
<label for="tipoContribuinteSelectCnpj" class="form-label">Tipo de Contribuição</label>
<select class="form-control select2-single" name="tipoContribuinteCnpj" id="tipoContribuinteSelectCnpj">
<option hidden></option>
<option value="I" #if($cliente->tipoContribuinteCnpj == "I") selected #endif>ICMS</option>
<option value="X" #if($cliente->tipoContribuinteCnpj == "X") selected #endif>Isento</option>
<option value="N" #if($cliente->tipoContribuinteCnpj == "N") selected #endif>Não Contribuinte</option>
</select>
</div>
Give this a shot:
<option value="I" {{ $cliente->tipoContribuinteCnpj == 'I' ? 'selected' : '' }}>ICMS</option>

Edit Form method Fill (package vform)

I request help me with this situation, I am trying to show a form to edit it but the idrol field returns an object, how can I access it to show me the user's role correctly
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Asignar Rol</label>
<div class="col-md-9">
<select class="form-control" :class="{'is-invalid': form.errors.has('idrol')}"
v-model="form.idrol"
name="idrol">
<option value="0" disabled>Seleccione Rol</option>
<option v-for="role in arrayRoles" :key="role.id" :value="role.id" v-text="role.name">
</option>
</select>
<has-error :form="form" field="idrol"></has-error>
</div>
</div>
Without using the fill method, I can access the property as follows
this.idrol =data['roles'][0].id it shows the role,
but in this way I would not be taking advantage of the benefits of the vform package
Edit Method
editModal(user) {
console.log(user);
let me = this;
me.form.reset();
me.form.clear();
me.modal = 1;
me.tipoAccion = 2;
me.form.fill(user);
}
I appreciate your help

Can't make multiple select in registration form

I use the basic registration form but I want to add a multiple select, a User can have multiple Skills and select them when he register.
My problem is that when I select multiples values Laravel only take the last one, so I search on the web for a solution and they say to add [] after my class name, so this is what I do :
<div class="form-group row">
<div class="col-md-6">
<?php $competences = \App\Competence::all(); ?>
<select name="competences[]" multiple="" class="form-control">
<option value="" selected disabled style="display:none">choose your school</option>
#foreach ($competences as $competence)
<option value="{{ $competence->id }}">{{ $competence->name }}</option>
#endforeach
</select>
</div>
</div>
But now, when I submit the form the page reload and stay in the register form, and the user is not register... I don't know what to do, anyone of you have a solution ?
Here is how I check the competences in my registerController
$competences = $data['competences'];
foreach ($competences as $comp){
$user->competences()->save(Competence::find($comp));
}
Use multiple="multiple" OR just multiple in blade.php:
<div class="form-group row">
<div class="col-md-6">
<?php $competences = \App\Competence::all(); ?>
<select name="competences[]" class="form-control" multiple>
<option value="" selected disabled style="display:none">choose your school</option>
#foreach ($competences as $competence)
<option value="{{ $competence->id }}">{{ $competence->name }}</option>
#endforeach
</select>
</div>
</div>
then in your controller, verify that you're actually getting the data in the form of an array by just printing $data
return $data;

Laravel 5.4 passing form select option value to a Route::get

I am trying to do the following within my Laravel 5.4 project.
In a users.index blade page I am listing all users from a database in a table.
All the users belong to a district. Some districts have more users then the other.
At the top of this table view I created a form with a select field. The options hold the id's for the 10 districts:
<form class="form-horizontal" method="GET" action="/users/district">
<div class="form-group col-md-5">
<select name="district" class="form-control">
<option value="1">Amsterdam</option>
<option value="2">Arnhem</option>
<option value="3">Assen</option>
<option value="4">Groningen</option>
<option value="5">Leeuwarden</option>
<option value="6">Rotterdam</option>
<option value="7">Sittard</option>
<option value="8">Tilburg</option>
<option value="9">Utrecht</option>
<option value="10">Antillen</option>
</select>
</div>
<div class="form-group col-md-4 col-md-offset-1">
<button class="btn btn-md btn-primary">Haal gegevens op</button>
</div>
</form>
When I put the URL "http://localhost/users/district/5" in manually in the browser it shows me a table view with only users from the district with the ID of 5.
This is my UsersController:
public function perDistrict($district)
{
$users = User::where('district_id', $district)
->paginate(12);
$totalusers = User::count();
return view('users.index', compact('users', 'totalusers'));
}
I would like to use the form to get me the results but when I submit the form it show me this URL: "http://localhost/users/district?district=5" and it gives me no result of course.
How can I convert that to the URL "http://localhost/users/district/5" ?
This my route:
Route::get('users/district/{district}', 'UsersController#perDistrict');
Hope someone can help me.
https://www.codecourse.com/lessons/laravel-fundamentals/729 did the trick for me with some own customization.

How to populate selectbox based on selection of another selectbox using Spring 4 Boot + ThymeLeaf+Hibernate

I am creating a registration form where i am have to create three select box. First selectbox contains all the countries, based on selection the state select box become visible and only state available in particular selected country will be display. there is also city selectbox too, where by default city dropdown will not display until state been selected and based on selection only cities belongs to particular state selected in state selectbox will be displayed.
I am able to generate all select box, but how to filter based on selection, i really don't know.
Effort:
<div class="form-group">
<label th:text="#{register.label.country}" `class="col-md-4 control-label">Country:</label>
<div class="col-md-6">
<select class="form-control" th:field="*{address.country}">
<option value="-1">--- Select Country ---</option>
<option th:each="country : *{countries}" th:value="${country.configId}" th:text="${country.configName}"></option>
</select>
<strong th:if="${#fields.hasErrors('address.country')}" th:errors="*{address.country}">Country Error</strong>
</div>
</div>
<div class="form-group">
<label th:text="#{register.label.state}" class="col-md-4 control-label">State:</label>
<div class="col-md-6">
<select class="form-control" th:field="*{address.state}">
<option value="-1">--- Select State ---</option>
<option th:each="state : *{states.?[parentid = 1]}" th:value="${state.configId}" th:text="${state.configName}"></option>
</select>
<strong th:if="${#fields.hasErrors('address.state')}" th:errors="*{address.state}">Country Error</strong>
</div>
</div>
<div class="form-group">
<label th:text="#{register.label.city}" class="col-md-4 control-label">City:</label>
<div class="col-md-6">
<select class="form-control" th:field="*{address.city}">
<option value="-1">--- Select City ---</option>
<option th:each="city : *{cities}" th:value="${city.configId}" th:text="${city.configName}"></option>
</select>
<strong th:if="${#fields.hasErrors('address.city')}" th:errors="*{address.city}">Country Error</strong>
</div>
</div>
I am able to generate all the selectbox, but i really don't know how to generate based on selection in thymeleaf with Spring boot.
Please help me. I know i can do this by using jquery ajax, but i want to avoid, i am thing is it possible with thymeleaf itself or not.
Thymeleaf is a server-side web template engine.
Once it is rendered, and is displayed to client, Thymeleaf is no longer there.
The only way to handle it is through javascript; or by sending a new request to render new filtered options.

Resources