I have this code in a livewire view which contains a form. This is a simple select field in which you are supposed to select a document type from a list.
<div>
<label for="documenttype" class="form-label"><strong>Document type</strong></label>
<select wire:model="documenttype_id" class="form-control" id="documenttype" aria-describedby="documenttypeHelp">
<option selected>{{ __( 'Choose' ) }}</option>
#foreach( $documenttypes as $documenttype )
<option value="{{ $documenttype->id }}" #if( isset( $documenttype_id ) && ( $documenttype_id == $documenttype->id ) ) selected #endif>
{{ $documenttype->name }}
</option>
#endforeach
</select>
</div>
The thing is that I want it to have preselected the correct value when editing a client. But for some reason when I add this code: #if( isset( $documenttype_id ) && ( $documenttype_id == $documenttype->id ) ) selected #endif in the options loop, the form starts behaving strangely.
Everytime the person filling the form selects an option the content becomes blank.
This is situation 1 (before selecting an option):
And this is situation 2 (after selecting the option):
I have no idea why this happens, can someone guide me on how to solve this issue?
add wire:ignore.self to root select's div. Using this modifier, you instruct Livewire don´t update the element itself but allows modification to its children.
The quick way to fix this would be to assign the selected value from your component mount method.
public function mount() {
$this->documenttype_id = $client->documenttype_id
//$client->documenttype_id being the previously selected value from your db
}
this will automatically select your option, you don't need the if statement on your option tag.
Related
I'm trying to set the hover background color of the options inside select tag.
It seems that it has been difficult to do this, but is there any up to date way to do this?
I'm using mobx+react in my application
HTML:
return(
<select
className="selectDecoration"
name={ name }
value={ value }
onChange={ e => onChange( name, e.target.value) }
>
<option disabled hidden value={ name } >
<a>{ name }</a>
</option>
{ options.map( item =>
<option value={ item }>
<a>{ item }</a>
</option> )
}
</select>
);
It is impossible to inject CSS to option tag, because it is rendered by the Operating System and its Web browser, the select tag is so useful, especially in mobile design, but it is so hard to dealing with it.
For more information I proffer this link. you can use custom react library to implement a select like design. I used relect.
I have a list of "matters." Each matter has an _id and name.
I have a "transaction." Every transaction belongs to a matter by reference to the matter's _id via a transaction.matterId property.
I'm presently working on a user interface to allow making changes to the transaction, including changing the matter to which the transaction is assigned. Like this:
Enter date:
Select a matter: (this is the culprit)
Enter the amount:
I am using handlebars to generate a Bootstrap select input with an option for each matter - i.e., "Select a matter..." This is easily done with handlebars {{ # each }} block helper. All the matters correctly appear as options, and each option's value is correctly assigned. No problem so far...
However, I want the option whose value matches the transaction.MatterId to be pre-selected since this is an update screen. For that, I invoke my custom "IfEquals" helper inside my {{# each }} block. The handlebars template is like this:
<div>Matter: {{ transaction.matterId}}</div> <-- I can see the matterId here.
<div class='form-group'>
<label for="selMatter">Case</label>
<select required id="selMatter" name="matterId" class="form-control">
{{# each matters }}
<option value='{{ _id }}' {{ ifEqual _id ../transaction.matterId "selected" "" }} >{{ name }}</option>
{{/ each }}
</select>
</div>
The custom helper is this:
ifEqual: function (obj, value, trueString, falseString) {
return ( (obj===value) ? trueString : falseString );
}
Let's say the 1st <div> shows a transaction.MatterId of "5." There will be one (and only one) option with a value of "5."
In the handlebars template, I have tried all sorts of possibilities to try to get {{ IfEqual }} to properly compare the 2 values. I tried the transaction.matterId without the "../" to see if it might be a context problem. No luck. I tried using a handlebars subexpression (even with its own helper function). Nope.
I am not getting the proper values inside the {{ IfEqual }} helper, and for that reason, even though the matching <option> is there, I can't make handlebars add the "selected" attribute to it.
Here is what I believe to be the right place to look, but I am not seeing what I am missing. http://handlebarsjs.com/expressions.html
Well, I got it, finally. If anyone comes across this scenario, here's what worked for me:
handlebars template:
<div class='form-group'>
<label for="selMatter">Case</label>
<select required id="selMatter" name="matterId" class="form-control">
{{# each matters }}
{{{ makeOption _id ../transaction.matterId name }}}
{{/ each }}
</select>
</div>
Here's the {{{ makeOption }}} helper:
makeOption: function (optionValue, dataValue, displayText) {
myOption = "<option value='" + optionValue + "'";
if ( optionValue.toString() === dataValue.toString() )
myOption += " selected";
myOption += ">" + displayText + "</option>";
return myOption;
},
I have a task list in Meteor in which I want to be able to update certain tasks. There is a 'priority' field in the collection. I am able to set the value property in the select tag. What I want is to set as 'selected' the option that matches the value of select tag.
Here is my code in the template:
<select value="{{priority}}" id="priorityList">
<option value="Low">Low</
<option value="Medium" >Medium</option>
<option value="High">High</option>
</select>
This is code code in the helper:
Template.add_task.helpers({
update: function() {
if(Session.get('id')) {
var id = Session.get('id');
var task = Items.find({_id: id});
console.log(task);
return task;
}
}
});
I am able to get the data for the fields from the helper but am new to coding and am trying to find a solution to be able to set either "Low", "Medium", or "High" to 'selected' so it will show on the dropdown when I go to update the task.
Thanks for any help that can be provided.
As you have said, priority property of a document will decide which item would get selected in the view by default. You can set another helper to make the tweaks.
<option value="Low" {{ isSelected "Low"}} >Low</option>
<option value="Medium" {{ isSelected "Medium"}} >Medium</option>
<option value="High" {{ isSelected "High"}} >High</option>
Template.add_task.helpers({
update: function(){//previous code},
isSelected: function(value){
var taskPriority = Items.findOne({_id: Session.get('id')}).priority;
return (taskPriority === value) ? 'selected' : '' ;
}
});
This is one possible solution. This problem may have a better solution than this. You are welcome to modify the codebse according to your needs.
I have a dropdown that gets its items from database. The default value to be selected in this dropdown is retrieved from a cookie.
The problem is,
1. there is an empty option tag as the first option and also,
2. the default value is not selected.
There is no issue at all when I use v1.3.16. This happens when using v1.2.0. (I have to use only v1.2.0)
How to fix this.
ASPX:
<select id="ddlItems" data-ng-model="ItemId">
<option value="-1">-- All Circles --</option>
<option data-ng-repeat="item in Items" value="{{item.AreaCode}}"
data-ng-selected="item.AreaCode==ItemId">{{item.AreaName}}</option>
</select>
Ctrl.js:
var promise = MyFactory.GetItems();
promise.then(function (success) {
if (success.data != null && success.data != '') {
var data = success.data;
$scope.Items = data.lstItems; //bind items to dropdown
$scope.ItemId = itemIdFromCookie; //select default value
alert(itemIdFromCookie); //it pops -1
}
else {
console.log(success.data);
}
}
Rendered HTML:
<select id="ddlItems" data-ng-model="ItemId">
<option value="? string:"-1" ?"></option>
<option value="-1">-- All Circles --</option>
//...other options
</select>
Try to use ngOptions instead
Like this
<select id="ddlItems"
data-ng-model="ItemId"
ng-options="item.AreaCode as item.AreaName for item in Items">
<option value="-1">-- All Circles --</option>
</select>
This happens becausedata-ng-model="ItemId" is empty when your model is App is Loaded.
To Have some initial value. you can put default value in ng-init
For Ex : data-ng-init='data-ng-model="--SELECT--";'
Or per your Array list Item which you are getting from database set one of the values.
Remember init will get triggered b/f you complete the Ajax Call.
I have a form, that includes a drop down list, and a submit button.
The drop down list has 5 values.
Let's say the user chooses value #3, then clicks submit. How would I prevent the drop down list from setting itself back to value #1?
Thanks!
use your serverside script to set selected="selected" for the selected <option>.
After your Submit your side should know what was submitted.
You can tell your DropDownList what was seleced befor by setting the seleced Value as selected.
Example:
<select name='myselect'>
<option value='1' <?php if($myselect == '1') { echo 'selected'; } ?>>#1</option>
<option value='2' <?php if($myselect == '2') { echo 'selected'; } ?>>#2</option>
<option value='3' <?php if($myselect == '3') { echo 'selected'; } ?>>#3</option>
</select>