Blade File
<div id="for_item" wire:ignore>
<select wire:model="purchaseRequests.{{$index}}.item_id" class="select2 select2-sm" data-container="#for_item">
<option value="">Select</option>
#if(isset($itemList))
#foreach ($itemList as $item)
<option value="{{$item['id']}}">{{$item['name']}}</option>
#endforeach
#endif
</select>
</div>
#push('scripts')
<script>
$(document).ready(function () {
$('.select2').on('change', function (e) {
let elementName = $(this).attr('id');
var data = $(this).select2("val");
#this.set(elementName, data);
});
});
</script>
#endpush
I have the button that will add additional row, the select2 is working properly in static field but when i click the button to generate row the select2 is not working.
Component
public function addRequestDetail()
{
$this->dispatchBrowserEvent('reApplySelect2');
}
Blade
#push('scripts')
<script>
$(document).ready(function () {
window.addEventListener('reApplySelect2', event => {
$('.select2').select2();
});
});
</script>
#endpush
Related
I have a Vuejs Laravel page with Parent and 2 child
In my Parent template I have
<template>
<div>
<h4>DATA ANALYSIS</h4>
<dataAnalysisGraph />
<br>
<hr>
<dataAnalysisTable />
</div>
and in my dataAnalysisGraph child component i have a method that send request everytime the dropdown changes.
//dataAnalysisGraph
<template>
<div>
<div>
<select class="form-control select" name="" #change="GenerateChart" v-model='chartType' >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<br><br><br>
<highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
</div>
</template>
<script>
export default {
data() {
return {
data: [],
}
},
methods: {
GenerateChart(){
this.axios
.get('api/'+this.chartType)
.then(response => {
this.data = response.data;
});
},
},
created() {
this.GenerateChart();
},
};
</script>
In my dataAnalysisTable child component. I want to get the this.data from dataAnalysisGraph component and pass it to the dataAnalysisTable and updates it every time the dropdown form dataAnalysisGraph component changes.
this is my dataAnalysisTable component currently
<template>
<div>
{{data}}
</div>
</template>
<script>
export default {
data() {
return {
data: [],
};
},
methods: {
},
created() {
},
};
</script>
You can emit an event inside dataAnalysisGraph returning this.data to the parent and connect this value using v-model to the dataAnalysisTable component. You can read more in the vuejs guide specifically in the "Usage with v-model" section.
i am trying to use cascading dropdown list in mvc. main category is working but in subcategory having some problem.it doesn't show any value when i choose from main category
in Blade:
<div class="form-group">
<label for="cat_id">Category <span class="text-danger">*</span></label>
<select name="cat_id" id="cat_id" class="form-control">
<option value="">--Select any category--</option>
#foreach($categories as $key=>$cat_data)
<option value='{{$cat_data->id}}'>{{$cat_data->title}}</option>
#endforeach
</select>
</div>
<div class="form-group" id="child_cat_div">
<label for="child_cat_id">Sub Category</label>
<select name="child_cat_id" id="child_cat_id" class="form-control">
<option value="">--Select any category--</option>
</select>
</div>
#push('scripts')
<script>
$('#cat_id').on('change',function(e) {
var cat_id=$(this).val();
// alert(cat_id);
if(cat_id !=null){
// Ajax call
$.Ajax({
url:"/backend/category/"+cat_id,
data:{
_token:"{{csrf_token()}}",
id:cat_id
},
type:"POST",
success:function(response){
if(typeof(response) !='object'){
response=$.parseJSON(response)
}
// console.log(response);
var html_option="<option value=''>Select sub category</option>"
if(response.status){
var data=response.data;
// alert(data);
if(response.data){
$('#loader').css("visibility", "visible");
// $('#child_cat_div').removeClass('d-none');
$.each(data,function(id,title){
html_option +="<option value='"+ id +"'>" + title +"</option>"
});
}
else{
}
}
else{
$('#child_cat_div').addClass('d-none');
}
$('#child_cat_id').html(html_option);
}
});
}
else{
}
}) </script> #endpush
in Route:
Route::POST('/category/{id}','Admin\CategoryController#getChildByParent');
in article Controller:
public function create()
{
$categories=Category::where('is_parent',1)->get();
$photos = Photo::all();
$tags = Tag::all();
$articles = Article::all();
return view('backend.articles.create',
compact('categories','photos','tags','articles'));
}
in Category Controller:
public function getChildByParent(Request $request){
$category=Category::findOrFail($request->id);
$child_cat=Category::getChildByParentID($request->id);
return response()->json([$child_cat]);
return response()->json([
'child_cat' => $child_cat]);
}
in model category:
public static function getChildByParentID($id){
return Category::where('parent_id',$id)->orderBy('id','ASC')->pluck('title','id');
}
can someone please share working example of laravel ajax dropdown. there are so many examples about dependable dropdown, but i want simple dropdown of only one column, i have two tables teacher and nation, when teacher profile is open i want dropdown of nationality using ajax.
i have done it without ajax, but i don't know how to do with ajax.
without ajax:
<select name="nation_id" class="custom-select" >
<option selected value=" ">Choose...</option>
#foreach($nations as $nations)
<option value="{{#$nation_id}}" {{#$teacher->nation_id== $nations->id ? 'selected' : ''}} >{{#$nations->nation}}</option>
#endforeach
Controller:
$nations = nation::all();
<select class="form-control" name="nation_id" id="nation_id">
<option value="">Select nation</option>
#foreach($nations as $nation)
<option value="{{ $nation->nation_id }}">{{ $nation->nation_name }} </option>
#endforeach
</select>
<select class="form-control" name="teacher" id="teacher">
</select>
now the ajax code:
<script type="text/javascript">
$('#nation_id).change(function(){
var nid = $(this).val();
if(nid){
$.ajax({
type:"get",
url:"{{url('/getTeacher)}}/"+nid,
success:function(res)
{
if(res)
{
$("#teacher").empty();
$("#state").append('<option>Select Teacher</option>');
$.each(res,function(key,value){
$("#teacher").append('<option value="'+key+'">'+value+'</option>');
});
}
}
});
}
});
</script>
now in controller file;
public function getTeacher($id)
{
$states = DB::table("teachers")
->where("nation_id",$id)
->pluck("teacher_name","teacher_id");
return response()->json($teachers);
}
And last for route file:
Route::get('/getTeacher/{id}','TeachersController#getTeacher');
Hope this will work..
Good Luck...
Create a route for your method which will fetch all the nations-
Route::get('nations-list', 'YourController#method');
Create a method in your controller for the above route-
public function method()
{
$nations = Nation::all()->pluck('nation', 'id');
return response()->json($nations)
}
Add a select box like this in your HTML-
<select id="nation_id" name="nation_id"></select>
If you want to auto select the option based on a variable then you can do this-
<input type="hidden" name="teacher_nation_id" id="teacher_nation_id" value="{{ $teacher->nation_id ?? '' }}">
And then add this script in your HTML to fetch the nation list on page load-
<script>
$(document).ready(function($){
$.get('nations-list', function(data) {
let teacher_nation_id = $('#teacher_nation_id').val();
let nations = $('#nation_id');
nations.empty();
$.each(data, function(key, value) {
nations.append("<option value='"+ key +"'>" + value + "</option>");
});
nations.val(teacher_nation_id); // This will select the default value
});
});
</script>
Need help with Vuejs, as I'm very new to it.
I have form selector, and depends on selected item I should display information from selected item below the form and send id of this item to my form request.
Visual understand:
I have tried v-bind:value="post.id" make like v-bind:value="post"
and I can easy display #{{post.goal}}, but it sends {object Object} to my request.
Please help who have more skill.
My selector:
<div class="uk-form-controls" id="equity-name">
<select name="share_id" v-model="post">
<option v-for='post in posts' v-bind:value="post.id">#{{post.title}}</option>
</select>
{{-- Here I need help --}}
<div v-if="post">
selected post:
#{{post.goal}} {{-- HOW TO DISPLAY GOAL IN DOM? --}}
</div>
And my Vue:
<script type="text/javascript">
new Vue({
el: "#equity-name",
data: function() {
return {
posts: [
#foreach($company->equities as $equity)
{title: "{{ $equity->name }}", id: '{{ $equity->id }}', goal: '{{ $equity->goal() }}' },
#endforeach
],
post: null
}
},
})
</script>
Cheers, love!:)
Make a method getPostGoal to get goal of selected index
new Vue({
el:"#app",
data:{
posts:[
{id:1,title:'test1',goal:'goal1'},
{id:2,title:'test2',goal:'goal2'},
{id:3,title:'test3',goal:'goal3'},
],
post:1
},
methods:{
getPostGoal:function(id=null){
if(id){
var index = this.posts.map(e=>e.id).indexOf(id);
return this.posts[index].goal;
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div class="uk-form-controls" id="equity-name">
<select name="share_id" v-model="post">
<option v-for='p in posts' v-bind:value="p.id">{{p.title}}</option>
</select>
<div v-if="post">
selected post:
{{getPostGoal(post)}}
</div>
</div>
</div>
</div>
Another solution is, set object as value
new Vue({
el:"#app",
data:{
posts:[
{id:1,title:'test1',goal:'goal1'},
{id:2,title:'test2',goal:'goal2'},
{id:3,title:'test3',goal:'goal3'},
],
post:{goal:'NA'}
},
mounted(){
if(this.posts.length){
this.post = this.posts[0];
}
},
methods:{
getPostGoal:function(id=null){
if(id){
var index = this.posts.map(e=>e.id).indexOf(id);
return this.posts[index].goal;
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div class="uk-form-controls" id="equity-name">
<select name="share_id" v-model="post">
<option v-for='p in posts' v-bind:value="p">{{p.title}}</option>
</select>
<div v-if="post">
selected post:
{{post.goal}}
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#state').change(function(event) {
var $c=$("#state").val();
$.get('getCities',{id:$c},function(responseJson) {
var $select = $("#city");
$select.find('option').remove();
$.each(responseJson, function(key, value) {
$('<option ></option>').val(key).text(value).appendTo($select);
});
});
});
});
</script>
<form action="postingRequirementSaving" th:object="${PostRequirementCommand}">
<label>State:</label>
<select th:field="*{stateid}" id="state">
<option value="0" selected="selected">– Select an option –</option>
<option th:each="var :${state}" th:value="${var.stateid}" th:text="${var.statename}"></option>
</select> <span class="error"></span>
<label>City:</label>
<select th:field="*{city}">
<option value="0">Select City</option>
</select>
</form>
Json response is not supporting multiple select jquery plugin.
please can any one help me to resolve it.
i'm using spring hibernate frame work.
when i'm using static data it works fine, but when it comes dynamic it doesn't working.
If you are using a plugin you have to initialize the select field after your response loaded.
For example if you use this plugin :
<script src="jquery.multiple.select.js"></script>
you will have to initialize your city selector after receiving the jsonResponse. And also in above code you have to add a id to the selector.
<script>
$(document).ready(function() {
$('#state').change(function(event) {
var $c=$("#state").val();
$.get('getCities',{id:$c},function(responseJson) {
var $select = $("#city");
$select.find('option').remove();
$.each(responseJson, function(key, value) {
$('<option ></option>').val(key).text(value).appendTo($select);
});
$select.multipleSelect();
});
});
});
</script>