Vuejs - How can i bind select item to input of combobox - javascript

I am trying to bind data from combobox I selected to its own input but every time I select an item of combobox 1 combobox 2 will also show combobox 1 item. Below is the code I wrote
HTML
// Combobox 1
<div style="height: 40px">
<div class="m-combobox" id="cbbWorkStatus">
<div class="m-combobox-label">Tình trạng công việc</div>
<div
class="select-list"
:class="
isActivate === 'workstatus' ? 'sl-activate' : 'inactive'
"
ref="selectList"
>
<div
class="select-item"
:value="item.WorkStatusId"
v-for="item in workStatuses"
:key="item.WorkStatusId"
#click="isSelect"
>
<i class="fas fa-check"></i>
<div class="select-item-text">
{{ item.WorkStatusName }}
</div>
</div>
</div>
<div class="select">
<input
class="m-combobox-input"
type="text"
placeholder="Chọn/Nhập thông tin"
value=""
tabindex="15"
id="txtWorkStatus"
fieldname="WorkStatus"
format="workStatus"
v-model="selectedValue" <----------------
/>
<div
class="m-combobox-button"
#click="activateCbb('workstatus')"
>
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
</div>
//Combobox 2
<div style="height: 40px">
<div
class="m-combobox"
id="cbbDepartment"
cbbname="DepartmentName"
cbbid="DepartmentId"
>
<div class="m-combobox-label">Phòng ban</div>
<div
class="select-list"
style="z-index: 100"
:class="
isActivate === 'department' ? 'sl-activate' : 'inactive'
"
ref="selectList"
>
<div
class="select-item"
v-for="item in departments"
:value="item.DepartmentId"
:key="item.DepartmentId"
#click="isSelect"
>
<i class="fas fa-check"></i>
<div class="select-item-text">
{{ item.DepartmentName }}
</div>
</div>
</div>
<div class="select">
<input
class="m-combobox-input"
type="text"
placeholder="Chọn/Nhập thông tin"
value=""
tabindex="11"
id="txtDepartment"
fieldname="DepartmentId"
format="department"
v-model="selectedValue" <--------------
/>
<div
class="m-combobox-button"
#click="activateCbb('department')"
>
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
Data
data() {
valueInput: null,
}
Methods
created() {
this.selectedValue = this.valueInput;
},
But this way, when I select the item in the combobox above, the combobox below is also displayed. I want each combobox to show only their item. Thank all!


You have bound the same v-model to both the comboboxes, naturally giving you this result. Just create two separate v-models, one for selectedWorkStatusValue and the other for selectedDeptStatusValue. I don't know the library you used for creating the combo-box, or else I would have given you a full working demo. Nevertheless, the below sample should be enough to get you going.
new Vue({
el: "#app",
data: function() {
return {
workStatuses: [{
WorkStatusId: 1,
WorkStatusName: 'Programmer'
},
{
WorkStatusId: 2,
WorkStatusName: 'DevOps'
},
{
WorkStatusId: 3,
WorkStatusName: 'HR'
}
],
departments: [{
DepartmentId: 1,
DepartmentName: 'IT'
},
{
DepartmentId: 2,
DepartmentName: 'Management'
}
],
selectedWorkStatusValue: '',
selectedDeptStatusValue: ''
};
},
methods: {
isSelect(){ console.log('clicked isSelect') },
activateCbb(){ console.log('clicked isSelect') }
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div style="height: 40px">
<div class="m-combobox" id="cbbWorkStatus">
<div class="m-combobox-label">Tình trạng công việc</div>
<div class="select-list" ref="selectList">
<div class="select-item" :value="item.WorkStatusId" v-for="item in workStatuses" :key="item.WorkStatusId" #click="isSelect">
<i class="fas fa-check"></i>
<div class="select-item-text">
{{ item.WorkStatusName }}
</div>
</div>
</div>
<div class="select">
<input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin" value="" tabindex="15" id="txtWorkStatus" fieldname="WorkStatus" format="workStatus" v-model="selectedWorkStatusValue" />
<div class="m-combobox-button" #click="activateCbb('workstatus')">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
</div>
<br/><br/><br/><br/>
<div style="height: 40px">
<div class="m-combobox" id="cbbDepartment" cbbname="DepartmentName" cbbid="DepartmentId">
<div class="m-combobox-label">Phòng ban</div>
<div class="select-list" style="z-index: 100" ref="selectList">
<div class="select-item" v-for="item in departments" :value="item.DepartmentId" :key="item.DepartmentId" #click="isSelect">
<i class="fas fa-check"></i>
<div class="select-item-text">
{{ item.DepartmentName }}
</div>
</div>
</div>
<div class="select">
<input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin" value="" tabindex="11" id="txtDepartment" fieldname="DepartmentId" format="department" v-model="selectedDeptStatusValue" />
<div class="m-combobox-button" #click="activateCbb('department')">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
</div>
</div>


You v-model is the same on combobox 1 and 2 so if you select a value it's the same on both
So you need to create another v-model for your combobox 2 :
// Combobox 1
<div style="height: 40px">
<div class="m-combobox" id="cbbWorkStatus">
<div class="m-combobox-label">Tình trạng công việc</div>
<div
class="select-list"
:class="
isActivate === 'workstatus' ? 'sl-activate' : 'inactive'
"
ref="selectList"
>
<div
class="select-item"
:value="item.WorkStatusId"
v-for="item in workStatuses"
:key="item.WorkStatusId"
#click="isSelect"
>
<i class="fas fa-check"></i>
<div class="select-item-text">
{{ item.WorkStatusName }}
</div>
</div>
</div>
<div class="select">
<input
class="m-combobox-input"
type="text"
placeholder="Chọn/Nhập thông tin"
value=""
tabindex="15"
id="txtWorkStatus"
fieldname="WorkStatus"
format="workStatus"
v-model="selectedValue" <----------------
/>
<div
class="m-combobox-button"
#click="activateCbb('workstatus')"
>
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
</div>
//Combobox 2
<div style="height: 40px">
<div
class="m-combobox"
id="cbbDepartment"
cbbname="DepartmentName"
cbbid="DepartmentId"
>
<div class="m-combobox-label">Phòng ban</div>
<div
class="select-list"
style="z-index: 100"
:class="
isActivate === 'department' ? 'sl-activate' : 'inactive'
"
ref="selectList"
>
<div
class="select-item"
v-for="item in departments"
:value="item.DepartmentId"
:key="item.DepartmentId"
#click="isSelect"
>
<i class="fas fa-check"></i>
<div class="select-item-text">
{{ item.DepartmentName }}
</div>
</div>
</div>
<div class="select">
<input
class="m-combobox-input"
type="text"
placeholder="Chọn/Nhập thông tin"
value=""
tabindex="11"
id="txtDepartment"
fieldname="DepartmentId"
format="department"
v-model="selectedValue2" <-------------- New Selected Value
/>
<div
class="m-combobox-button"
#click="activateCbb('department')"
>
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
<script>
export default {
data() {
return {
workStatuses: [],
departments: [],
selectedValue : '',
selectedValue2: ''
};
},
methods: {
isSelect(){ console.log('clicked isSelect') },
activateCbb(){ console.log('clicked isSelect') }
}
}
</script>

Related

Vuejs How can I show select-list when I click on open button

i wrote like this but when i press the button all comboboxes show up but i want when i press the button in any combobox only that combobox will show up
HTML
<div class="m-combobox">
<div class="select-list" :class="{'sl-activate':isActivate}">
<div class="select-item" v-for="item in departments" :key="item.DepartmentId">
<i class="fas fa-check"></i>
<div class="select-item-text">{{item.DepartmentName}}</div>
</div>
</div>
<div class="select">
<input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin">
<div class="m-combobox-button" #click="activateCbb">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
<div class="m-combobox">
<div class="select-list" :class="{'sl-activate':isActivate}">
<div class="select-item" v-for="item in positions" :key="item.PositionId">
<i class="fas fa-check"></i>
<div class="select-item-text">{{item.PositionName}}</div>
</div>
</div>
<div class="select">
<input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin">
<div class="m-combobox-button" #click="activateCbb">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
data
data: function () {
return {
positions: [],
departments: [],
isActivate: false,
};
}
Method
methods:{
activateCbb() {
this.isActivate = !this.isActivate;
},
}
Tks all!

Try like following snippet:
new Vue({
el: '#demo',
data() {
return {
positions: [{PositionId:1, PositionName:'ccc'}, {PositionId:2, PositionName:'ddd'}],
departments: [{DepartmentId:1,DepartmentName: 'aaa'}, {DepartmentId:2,DepartmentName: 'bbb'}],
isActivate: null,
};
},
methods:{
activateCbb(type) {
if(this.isActivate === type) {
this.isActivate = null
} else {
this.isActivate = type
}
},
}
})
Vue.config.productionTip = false
Vue.config.devtools = false
.sl-activate {
display: block;
}
.inactive {
display: none;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="m-combobox">
<div class="select-list" :class="isActivate === 'd' ? 'sl-activate' : 'inactive'">
<div class="select-item" v-for="item in departments" :key="item.DepartmentId">
<i class="fas fa-check"></i>
<div class="select-item-text">{{item.DepartmentName}}</div>
</div>
</div>
<div class="select">
<input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin">
<div class="m-combobox-button" #click="activateCbb('d')">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
<div class="m-combobox">
<div class="select-list" :class="isActivate === 'p' ? 'sl-activate' : 'inactive'">
<div class="select-item" v-for="item in positions" :key="item.PositionId">
<i class="fas fa-check"></i>
<div class="select-item-text">{{item.PositionName}}</div>
</div>
</div>
<div class="select">
<input class="m-combobox-input" type="text" placeholder="Chọn/Nhập thông tin">
<div class="m-combobox-button" #click="activateCbb('p')">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
</div>

Cannot read property 'submit' of null i use laravel and javascript

I want to add a product to my favorites, but I do not want to make a load for the entire page, so I use JavaScript as shown in the code where I made an ancor disruption and created a form and took an id from the form and implemented it by using the submit function, but the following error appears and does
Uncaught TypeError: Cannot read property 'submit' of null
Please advise the importance
Thank you
this view
<div class="product-info">
<div class="tab-content" id="myTabContent">
<!-- Start Single Tab -->
<div class="tab-pane fade show active" id="man" role="tabpanel">
<div class="tab-single">
<div class="row">
#foreach($products as $p)
<div class="col-xl-3 col-lg-4 col-md-4 col-12">
<form action="{{route('cart.store')}}" method="post" id="add-cart-{{$p->id}}">
{{ csrf_field() }}
<input type="hidden" name="id" value="{{$p->id}}">
<input type="hidden" name="Product_Name_ar" value="{{$p->Product_Name_ar}}">
<input type="hidden" name="Price" value="{{$p->Price}}">
<div class="single-product">
<div class="product-img">
<a href="{{route('product', ['product' => $p->id])}}">
<img class="default-img" src="{{ asset('images/products/'.$p->image) }}" alt="#">
<img class="hover-img" src="{{ asset('images/products/'.$p->image) }}" alt="#">
</a>
<div class="button-head">
<div class="product-action">
#if(Auth::guard('customer')->check())
<span class="favorite-count">{{ $p->favorite_to_customers->count() }}</span>
<a title="Wishlist" href="javascript:void (0);" onclick="document.getElementById('favorite-{{$p->id}}').submit()" class="{{ Auth::guard('customer')->user()->favorite_products()->where('product_id', $p->id)->count() != 0 ? 'favorite' : '' }}">
<i class="fa fa-heart "></i><span>Add to Favorite</span></a>
<form id="favorite-{{$p->id}}" action="{{route('product.favorite', $p->id)}}" method="post">
{{ csrf_field() }}
</form>
#else
<span class="favorite-count">{{ $p->favorite_to_customers->count() }}</span>
<a title="Wishlist" href="javascript:void (0);" onclick="toastr.info('To add favorite list you to need login first', 'info', {
closeButton: true,
progressBar: true
})">
<i class="fa fa-heart "></i>
<span>Add to Favorite</span></a>
#endif
</div>
<div class="product-action-2">
<button style="background: transparent; border: none; color: black" class="btn btn-warning">Add to chart</button>
</div>
</div>
</div>
<div class="product-content">
<h3>{{ $p->Product_Name_ar }}</h3>
<div class="product-price">
<span>{{ $p->Price }} K.D</span>
</div>
</div>
</div>
</form>
</div>
#endforeach
</div>
</div>
</div>
<!--/ End Single Tab -->
</div>
</div>
This Controller
class Favoritecontroller extends Controller
{
public function add($id) {
$customer = Auth::guard('customer')->user();
$isFavorite = $customer->favorite_products()->where('product_id', $id)->count();
if($isFavorite == 0) {
$customer->favorite_products()->attach($id);
}else {
$customer->favorite_products()->detach($id);
}
return redirect()->back();
}
}
This Route
Route::group(['middleware' => ['auth:customer']], function () {
Route::post('favorite/{id}/add', 'FavoriteController#add')->name('product.favorite');
});

I assume your JS fails here
... onclick="document.getElementById('favorite-{{$p->id}}').submit()"
The proper way to do it
... onclick="addToWhishList({{$p->id}})"
Then in your JS
<script>
function addToWhishList(formId) {
//console.log(formId);
document.getElementById('favorite-' + formId).submit();
}
</script>
Check working Demo

knockout sortable update function afer moving item to different position

I have knockout sortable bookmark page where it is possible to group your bookmarks and change the position. I have all my functions working but i can't seem to get the "afterMove" to work. This is my view:
<div class="col-lg-12">
<div class="bookmarkIconsBox">
<div data-bind="droppable: newGroup, connectClass : 'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-plus"></i>Nieuwe groep aanmaken</div>
<div data-bind="droppable: deleteItem, connectClass : 'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-trash"></i>Bookmark verwijderen</div>
</div>
<div class="bookmarkBoxTitle" data-bind="visible: $root.visible()">
<input class="title" data-bind="textInput: $root.groupname()" />
<span data-bind="click: function() { $root.setVisible(), $root.changeGroupName($root.groupname())}"><i class="fa fa-2x fa-save"></i></span>
<span data-bind="click: $root.setVisible, visible: $root.visible()"><i class="fa fa-2x fa-close"></i></span>
</div>
<div class="bookmarkBoxTitle" data-bind="visible: $root.visibleBookmarkName()">
<input class="title" data-bind="textInput: $root.bookmarkname()" />
<span data-bind="click: function() { $root.setVisibleBookmarkName(), $root.changeName($root.bookmarkname())}"><i class="fa fa-2x fa-save"></i></span>
<span data-bind="click: $root.setVisibleBookmarkName, visible: $root.visibleBookmarkName()"><i class="fa fa-2x fa-close"></i></span>
</div>
</div>
<div data-bind="foreach: allBookmarks.bookmarkGroups" class="col-lg-12">
<div class="bookmarkBoxTitle">
<h3 class="title" data-bind="text: Description" />
<span data-bind="click: function(){$root.edit(Description)}" class="editName"><i class="fa fa-2x fa-edit"></i></span>
</div>
<div data-bind="sortable: { template: 'itemTmpl', data: bookmarks, connectClass : 'lists', afterMove: $root.update($parent.allBookmarks.bookmarkGroups)}" id="sortable" class="lists bookmarkBackground">
</div>
</div>
<script id="itemTmpl" type="text/html">
<div class="card col-lg-4">
<div>
<span class="moveItem"><i class="fa fa-2x fa-arrows"></i></span>
<span data-bind="click: function(){$root.editBookmarkName(Description)}" class="editName"><i class="fa fa-2x fa-edit" data-bind="visible: !$root.visibleBookmarkName()"></i></span>
</div>
<div class="card-block">
<div class="bookmarkBoxTitle">
<h4 class="card-title" data-bind="text: Description " />
<h4 class="card-title" data-bind="text: $index" />
</div>
<ul class="card-text">
<li data-bind="text: workspace"></li>
<li data-bind="text: role"></li>
</ul>
<a class="btn btn-primary" data-bind="attr : {'href': '/#page/' + link }">Ga naar</a>
</div>
</div>
When i move an item in in a group or to a different group i want it to execute the $root.update() but i can't seem to get it to work.

Change Nearest Class when checkbox is selected

I want to use jquery/javascript to change the class of the <span class="thm-card-status">Active</span> when the item is checked/unchecked. There will be a lot of <div class="thm-card"></div> containers so it should only be changed for that specific card.
<div class="thm-card">
<div class="thm-card-media">
<img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
<div class="thm-card-overlay">
<form class="thm-form">
<div class="form-group"><!--Default Checkbox Item-->
<label for="__FOR__">
<input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
<span class="thm-form-label-side">Active</span>
</label>
<i class="fa fa-question-circle"></i>
</div>
</form><!--Form-->
</div>
<span class="thm-card-status">Active</span>
</div>
<div class="thm-card-content">
<div class="thm-card-details">
<h4>THM Slider Main</h4>
</div>
<div class="thm-card-control">
<div class="thm-card-links">
View
Edit
<span class="thm-card-info"><i class="fa fa-star-o"></i></span>
<span class="thm-card-info"><i class="fa fa-trash"></i></span>
</div>
</div>
</div>
</div>
EDIT:
I've tried:
$('.thm-checkbox-status').change(function() {
if($(this).is(':checked')) {
$('.thm-card-status').attr('checked', '').closest('.thm-card-status').addClass('thm-card-status-active');
} else {
$('.open_sub_ja').closest('div').removeClass('someclass');
}
});
And
$("thm-checkbox-status:checkbox").on('change', function(){
$(this).closest('.thm-card-status').attr('class', 'thm-card-status-active');;
});

Here's a working example. I made the thm-card-status-active green, so that you can see it work.
$(function() {
$('input.thm-checkbox-status').change(function() {
if($(this).prop("checked") == true){
$(this).closest('div.thm-card').find('span.thm-card-status').addClass('thm-card-status-active');
} else {
$(this).closest('div.thm-card').find('span.thm-card-status').removeClass('thm-card-status-active');
}
});
});
.thm-card-status-active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thm-card">
<div class="thm-card-media">
<img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
<div class="thm-card-overlay">
<form class="thm-form">
<div class="form-group"><!--Default Checkbox Item-->
<label for="__FOR__">
<input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
<span class="thm-form-label-side">Active</span>
</label>
<i class="fa fa-question-circle"></i>
</div>
</form><!--Form-->
</div>
<span class="thm-card-status">Active</span>
</div>
<div class="thm-card-content">
<div class="thm-card-details">
<h4>THM Slider Main</h4>
</div>
<div class="thm-card-control">
<div class="thm-card-links">
View
Edit
<span class="thm-card-info"><i class="fa fa-star-o"></i></span>
<span class="thm-card-info"><i class="fa fa-trash"></i></span>
</div>
</div>
</div>
</div>

$('.thm-checkbox-status').change(function(){
$(this).closest('.thm-card-overlay').next().addClass('something');
});

Uncaught referenceerror is not defined - adding javascript function when Angular is being used

I am familiar with Javascript and Jquery, but fairly new to angular. I have used jquery in the past with angular, but this application that I inherited is causing my severe grief.
I click on button and get:
Uncaught ReferenceError: addComment is not defined
Code:
<div ng-controller="TipsCtrl" class="container" id="tips">
<div class="grid" style="margin-bottom: 0" >
<div class="col-1-4">
</div>
<div style="text-align: center" class="col-1-2">
<label class="text-blue text-center">Sort By:</label>
<select style="width:30%" ng-init="order='created'" class="input" ng-model="order">
<option value="created">Date Created</option>
<option value="createdBy">Created By</option>
<option value="getCategory()">Category</option>
</select>
<button data-tooltip="Reverse the sorting order."
class="btn-blue" ng-click="reverse=!reverse">Reverse</button>
</div>
<div class="col-1-4 text-right">
<button ng-click="createEmptyTip()" style="vertical-align: bottom" class="btn-blue">Add</button>
</div>
</div>
<div class="col-1-1" ng-if="!!error">
<div class="panel">
<span class="text-red">Error:</span> {{ error }}
</div>
</div>
<div update="resultsUpdated" paginate="page in tips" order="order" reverse="reverse" url="true">
<div style="margin-bottom: 20px">
<div paginate-controller></div>
</div>
<div ng-repeat="tip in page" class="tip"
id="tip-{{ tip.id }}" async-anchor async-anchor-delay="500">
<div class="grid">
<div class="col-1-2">
<h3>
<span class="text-red" ng-if="tip.isNew()"><b>New:</b></span>
{{ tip.title }}
<div>Category: {{ tip.getCategory() }}</div>
</h3>
</div>
<div class="col-1-2 text-right">
<span>Posted by</span>
<span class="text-blue">{{ tip.createdBy }}</span>
<span>on {{ tip.created | date:'shortDate' }}</span>
<span>{{ tip.created | date:'H:mm' }}</span>
</div>
<div class="col-1-1">
<pre>{{ tip.body }}</pre>
</div>
<div class="col-3-4">
<ul ng-if="tip.attachments.length > 0" class="attachment-list">
<li ng-repeat="attachment in tip.attachments">
{{ attachment.name }}
</li>
</ul>
<div class="col-1-1">
</div>
<div class="col-1-1">
Angular Add Comment
<button onclick="addComment();" id="addcomment/{{tip.id}}" class="btn-yellow">Add Comment</button>
</div>
</div>
<!---->
<div class="col-1-4 text-right" ng-if="tip.createdBy == user.ntid">
<a href="#/tips/edit/{{ tip.id }}?paginatePage={{ params.paginatePage }}" class="btn-yellow" >Edit</a>
<!--Delete0-->
<button ng-ask="deleteTip(tip)" title="Delete"></button>
</div>
</div>
</div>
<div style="margin-top: 20px">
<div paginate-controller></div>
</div>
</div>
</div>
I call in the code the addComment() function ( I tried jquery first )
<script>
function addComment() {
console.log('in');
}
</script>

Try moving the function out of the markup and into the controller...
...inside TipsCtrl...
$scope.addComment = function() {
console.log('in');
};

Categories