laravel livewire select box not working. how can i fix it? - laravel

I am making a very simple select box using livewire. This is trying to use wire:model but it doesn't work.
livewire file is
public $city = 'Seoul';
public function mount(){}
public function render()
{
echo 'city : '.$this->city;
return view('livewire.weather', []);
}
and blade file is
<select class="form-control" wire:model="city" name="city">
<option value="Seoul">서울</option>
<option value="Busan">부산</option>
<option value="Daejeon">대전</option>
<option value="Daegu">대구</option>
<option value="Kwangju">광주</option>
<option value="Incheon">인천</option>
<option value="Suwon">수원</option>
<option value="Changwon">창원</option>
<option value="Ulsan">울산</option>
<option value="Andong">안동</option>
<option value="Chuncheon">춘천</option>
<option value="Cheongju">청주</option>
<option value="Jeonju">전주</option>
<option value="Jeju">제주</option>
</select>
How to connect livewire and select box in html?

I don't see what is your problem here. Check network tab - $city should be updated after selecting
public $city = 'Seoul';
public function render()
{
return view('livewire.weather');
}

Related

Laravel : how to explode and showing multiple data in select2

I am using select2 and i want to showing multiple data from database in edit page
#foreach( $userLanguages as $userLanguageTitle)
<option value="{{$user->languages}}">{{$userLanguageTitle}}</option>
#endforeach
But showing me
<select name="languages[]" class="select2 form-control" multiple="multiple" required>
<option value="English,Persian,German" >English</option>
<option value="English,Persian,German" >Persian</option>
<option value="English,Persian,German" >French</option>
<option value="English,Persian,German" >German</option>
<option value="English,Persian,German" >Spanish</option>
<option value="English,Persian,German" >Turkish</option>
<option value="English,Persian,German" >Italian</option>
</select>
I want show selected data in element Like the example below
<select name="languages[]" class="select2 form-control" multiple="multiple" required>
<option value="English" selected >English</option>
<option value="Persian" selected >Persian</option>
<option value="French">French</option>
<option value="German" selected >German</option>
<option value="Spanish" >Spanish</option>
<option value="Turkish" >Turkish</option>
<option value="Italian" >Italian</option>
</select>
Model
public static function getUserlanguages()
{
return [
self::ENGLISH => 'English',
self::PERSIAN => 'Persian',
self::FRENCH => 'French',
self::GERMAN => 'German',
self::SPANISH => 'Spanish',
self::TURKISH => 'Turkish',
self::ITALIAN => 'Italian',
];
}
controller
public function edit(Request $request, $id)
{
$user = User::findOrFail($id);
$userLanguages = User::getUserlanguages();
return view('backend.users.edit', compact('user', 'userLanguages',));
}
Try this, assuming $user->languages is a relation in User model and there is column name in languages table
#foreach($userLanguages as $userLanguageTitle)
<option value="{{$userLanguageTitle}}" {{ (in_array($userLanguageTitle, $user->languages()->pluck('name')->toArray()) ? 'selected' : '') }}>{{$userLanguageTitle}}</option>
#endforeach
<option value="{{$user->languages}}">{{$userLanguageTitle}}</option>
Since you edited the code above, I assume that $user->languages returns all Languages of an User. So it returns either a Collection or an Array but not a single Language item. So you can simply use value="{{$userLanguageTitle}}" to display the name of the language or you use the key of it like that:
#foreach( $userLanguages as $key => $userLanguageTitle)
<option value="{{$key}}">{{$userLanguageTitle}}</option>
#endforeach

How to create Select2 Multiple value using Bulma in Laravel

I want to create select function on my laravel project , this Select is select2 multiple like on this doc link . on bulma documentation this select multiple is not have function javascript code . only like this :
<div class="select is-multiple">
<select multiple size="8">
<option value="Argentina">Argentina</option>
<option value="Bolivia">Bolivia</option>
<option value="Brazil">Brazil</option>
<option value="Chile">Chile</option>
<option value="Colombia">Colombia</option>
<option value="Ecuador">Ecuador</option>
<option value="Guyana">Guyana</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Suriname">Suriname</option>
<option value="Uruguay">Uruguay</option>
<option value="Venezuela">Venezuela</option>
</select>
</div>
can someone help how to create this select2 so we can add more than 1 value on this field select ?

Setting selected option in laravel from database

I have a problem here, I want to make an edit form, I want the province that appears in the edit form to be the province selected from the database, here my code
<select name="provinsi" id="provinsi" class="form-control">
<option value="">Pilih Provinsi</option>
#foreach ($province as $prov)
<option value="{{$prov->name}}">{{$prov->name}}</option>
#endforeach
</select>
here my controller code
public function ShowSantri(Request $request,$id)
{
$province = DB::table('provinces')->get();
$profiles = Profile::find($request->id);
return view('admin/modal/edit_santri',compact('profiles','province'));
You can try like this:
<select name="provinsi" id="provinsi" class="form-control">
<option value="">Pilih Provinsi</option>
#foreach ($province as $prov)
<option value="{{$prov->name}}"
#if ($profiles['provName'] == $prov->name)
selected
#endif>
{{$prov->name}}
</option>
#endforeach
</select>
Just I'm not sure what is name in your $profiles for province. But I think that is what you need.
Here and here are some examples.
Good luck!
Use or change this code based on your needs:
<option value="{{$prov->name}}" {{ $prov->name == $profiles->prov_id ? "selected" : "" }}>{{$prov->name}}</option>
I think the $prov->name should be $prov->id, if not, you can change $profiles->prov_id to $profiles->prov_name. It depends on your database structure.

Code igniter update function on dropdown menu

i have this update function on my codeigniter
my controller is
public function updatepersonalinfo(){
$id = $_GET['id'];
$data['content'] = $this->Employees_Model->personalinfo($id); // this is current information to be updated
$data['content1'] = $this->Employees_Model->nationality(); // this is select box value
$data['content_view'] = 'Employees/edit_personalinfo';
$this->templates->admin_template($data);
}
then my view for one of the select box is
<select class="form-control" name = "BLOOD_TYPE">
<option value="<?php echo $content->BLOOD_TYPE; ?>"><?php echo $content->BLOOD_TYPE; ?></option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="AB"> AB </option>
<option value="O"> O </option>
</select>
what happens here is that for example, the value that to be updated is A
it will become
what i wanted to do is, for example, the value i will update to the database is B the update function will show something like this.

AngularJS Validation on <select> with a prompt option

I have the following code for a select drop down input that is styled in Bootstrap.
<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
<option value="">-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>
</select>
Before the user is able to submit this form, he or she must select a business process.
So I have put the required directive on the select statement, however because the first option tag has -- Select Business Process -- that still counts as a selected option, and thus the required flag is met, and therefore the form validates even though no actual Business Process is selected.
How can I overcome this issue?
Thank You.
This approach could/should solve your issue:
1) declare the options inside of your scope:
$scope.processes = [
{ code: "C", name: "Process C" },
{ code: "Q", name: "Process Q" }
];
And 2) use this declaration:
<select class="form-control" name="businessprocess" ng-model="businessprocess" required
ng-options="c.code as c.name for c in processes" >
<option value="">-- Select Business Process --</option>
</select>
The trick here is in fact, that during the angular cycles, will firstly fix the issue that the the current value is not among the processes options. So, the default would be set to:
<option value="">-- Select Business Process --</option>
and required will be working as expected (more details)
you can initial the value of selector in controller:
<select class="form-control" name="businessprocess" ng-model="businessprocess">
<option value="A">-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>
</select>
in Controller:
$scope.businessprocess = "A" ;
or "C","Q",whatever you want, so the select will always have value. i think you don't need "required" here in select.
If you don't want an init a value. also do some extra effect when user don't select it.
<select class="form-control" name="businessprocess" ng-model="businessprocess" myRequired>
<option value="">-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>
</select>
then write the directive:
model.directive("myRequired", function() {
return {
restrict: 'AE',
scope: {},
require: 'ngModel',
link: function(scope, iElement, iAttrs) {
if(iElement.val() == ""){
//do something
return;
} else {
//do other things
}
});
}
};
});
JS
angular.module('interfaceApp')
.directive('requiredSelect', function () {
return {
restrict: 'AE',
require: 'ngModel',
link: function(scope, elm, attr, ctrl) {
if (!ctrl) return;
attr.requiredSelect = true; // force truthy in case we are on non input element
var validator = function(value) {
if (attr.requiredSelect && ctrl.$isEmpty(value)) {
ctrl.$setValidity('requiredSelect', false);
return;
} else {
ctrl.$setValidity('requiredSelect', true);
return value;
}
};
ctrl.$formatters.push(validator);
ctrl.$parsers.unshift(validator);
attr.$observe('requiredSelect', function() {
validator(ctrl.$viewValue);
});
}
};
});
a best way and straight one is to use:
HTML
<select name="businessprocess" ng-model="businessprocess" required>
<option selected disabled value="">-- Select Business Process --</option>
<option ng-repeat="v in processes" value="{{v.id}}">{{v.value}}</option>
</select>
You can try to add form, like:
HTML
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="mainForm">
<select name="businessprocess" ng-model="businessprocess" required>
<option value="">-- Select Business Process --</option>
<option ng-repeat="v in processes" value="{{v.id}}">{{v.value}}</option>
</select>
<span class="error" ng-show="mainForm.businessprocess.$error.required">required</span>
</form>
</div>
js
angular.module('myApp', []);
function MyCtrl($scope, $timeout) {
$scope.processes = [{
id: "C",
value: "Process C"
}, {
id: "Q",
value: "Process Q"
}];
}
Demo Fiddle
Use the following code snippet
<select class="form-control" name="businessprocess" ng-model="businessprocess">
<option value="A" disabled selected hidden>-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>
</select>
Add "disabled" to the first option:
<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
<option value="" disabled>-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>
This works for me. Form is invalid until user selects any other value than "Choose..."
<select name="country" id="country" class="form-control" formControlName="country" required>
<option selected value="">Choose...</option>
<option *ngFor="let country of countries">{{country.country}}</option>
</select>
Maybe this code, can be usefull for this... in this case the form is called myform
<select ng-model="selectX" id="selectX" name="selectX" required>
<option value="" ></option>
<option value="0" >0</option>
<option value="1">1</option>
</select>
<span style="color:red" ng-show="myform.selectX.$dirty && myform.selectX.$invalid">
<span ng-show="myform.selectX.$error.required">Is required.</span>
</span>

Resources