When I place a dynamically populated multiselect in a dropdown overlay, the multiselect's dropdown does not display when clicked. The exact same multiselect works just fine when it's not in a dropdown. See a fiddle that reproduces the issue here http://jsfiddle.net/yhnukfsz/6/ (started with the answer to this question).
The broken multiselect in question:
<div class="btn-group">
<button type="button" id="dropBtn" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<form>
<select class="form-control" id="mult2" multiple="multiple">
</select>
<button>
foobar
</button>
</form>
</li>
</ul>
</div>
And the JS:
$('.dropdown-menu').on('click', function(event) {
event.stopPropagation();
});
$('.selectpicker').selectpicker({
container: 'body'
});
$('body').on('click', function(event) {
var target = $(event.target);
if (target.parents('.bootstrap-select').length) {
event.stopPropagation();
$('.bootstrap-select.open').removeClass('open');
}
});
setUpMultiselect('#mult1');
setUpMultiselect('#mult2');
function setUpMultiselect(id) {
$(id).multiselect({
enableFiltering: true,
includeFilterClearBtn:false,
enableCaseInsensitiveFiltering: true,
selectAllJustVisible : true,
includeSelectAllOption : true,
nonSelectedText:"Filter ...",
numberDisplayed : 1
});
const options = [
{
title: 'title1', label: 'label1', id: 'id1', selected: true,
},{
title: 'title2', label: 'label2', id: 'id2', selected: true,
},{
title: 'title3', label: 'label3', id: 'id3', selected: true,
}]
$(id).multiselect('dataprovider', options);
$(id).multiselect('rebuild');
}
$('#dropBtn').click(() => {
setTimeout(() => {
setUpMultiselect('#mult1');
setUpMultiselect('#mult2');
}, 500)
})
Additional things I've tried that haven't fixed the issue include rebuilding/reinitializing the multiselect on the dropdown click event with and without a delay.
Related
How do we bind checkboxes value using vue js expression ? Below i have the data the filteroptions object and i manage to bind the value to the #html1 i have put below.
What I want to know is how can i bind the checked values to #html2 ? the selected values from the drpdown menu in #html1
As you can see on my filter by on html2 it is not dynamic.
Thank you.
html1
<div class="mh-filter-options">
<div class="filter-content">
<ul class="nav nav-pills">
<li class="dropdown" v-for="(opt, item) in filterOptions" :key="item">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false"> {{item}}</a>
<div class="dropdown-menu">
<a href="#" v-for="i in opt" :key="i.value">
<div class="inner">
<div class="checkbox">
<label class="filter-label-item">
<input type="checkbox" :data-prop="opt" :value=i.value />
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
<span>{{i.value}} <span class="badge badge-dark">{{i.count}}</span></span>
</label>
</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
html 2
<div class="filtered-by">
<div class="filter-title">Filtered By: </div>
<div>
<div class="filter-item">
Year: <span> 2019 </span>
<i class="fas fas- fa-times"></i>
</div>
<div class="filter-item">
Model: <span> Escape </span>
<i class="fas fas- fa-times"></i>
</div>
<div class="filter-item">
Price range: <span> $5000-$10000 </span>
<i class="fas fas- fa-times"></i>
</div>
</div>
<div class="clear-all-filter">
Reset Filters
</div>
</div>
Method
setFilters() {
this.filterOptions = {
year: [{ value: '2019', checked: true, count: 10 }, { value: '2013', checked: false, count: 99 }, { value: '2017', checked: true, count: 10 }],
model: [{ value: 'Explorer', checked: true, count: 8 }, { value: 'Ram 1500', checked: false, count: 4 }, { value: 'Piloto', checked: false, count: 10 }],
priceRange: [{ value: '$10,000-$20,000', checked: false, count: 5 }, { value: '$20,000-$30,000', checked: false, count: 22 }, { value: '$30,000-$40,000', checked: false, count: 10 }],
mileage: [{ value: '1-1000', checked: false, count: 10 }, { value: '1001-2000', checked: false, count: 64 }, { value: '2001-3000', checked: false, count: 10 }],
bodyStyle: [{ value: 'Crew Cab Pickup', checked: false, count: 13 }, { value: 'Quad Cab Pickup', checked: false, count: 9 }, { value: 'Sport Utility', checked: true, count: 2 }]
}
},
You should bind checkboxes with v-model, which takes a boolean value. So in your case it might be <input type='checkbox' v-model='i.checked'>
I'm not sure I totally follow your code, particularly the setFilters() method, but the principal of Vue is that you encapsulate all your page state in a model, then html2 just looks at the model value that's 2-way bound to the checkbox. Does that make sense ?
Currently I am working on a page with Bootstrap tables. These tables are autofilled. On the first page there are no problems to eliminate an element, because there is a confirmation message to eliminate.
When I go to the next page, and I want to eliminate the click on the "x" to eliminate it makes the action of deleting, but no confirmation message appears.
Here is the code
can('delete', $unit)
<form id="{{ $unit->id }}" style="display: inline-block;" method="post" action="{{ url("estates/$estate->uid/units/$unit->uid") }}">
{{ csrf_field() }}
<input type="hidden" name="_method" value="delete">
<button id="deleteUnit-{{ $unit->id }}" class="btn btn-simple btn-danger eliminar" rel="tooltip" data-placement="left" title="Eliminar" name="eliminar" data-id="{{ $unit->id }}">
<i class="fa fa-times"></i>
</button>
</form>
#endcan
and
$().ready(function(){
window.operateEvents = {
'click .edit': function (e, value, row, index) {
info = JSON.stringify(row);
// swal('You click edit icon, row: ', info);
console.log(row.actions);
},
'click .remove': function (e, value, row, index) {
console.log(row);
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
};
$table.bootstrapTable({
toolbar: ".toolbar",
showRefresh: false,
search: true,
showToggle: false,
showColumns: true,
pagination: true,
searchAlign: 'left',
pageSize: 10,
clickToSelect: false,
pageList: [10, 15, 20],
formatShowingRows: function(pageFrom, pageTo, totalRows){
$(window).resize(function () {
$table.bootstrapTable('resetView');
});
//do nothing here, we don't want to show the text "showing x of y from..."
},
formatRecordsPerPage: function(pageNumber){
return pageNumber + " rows visible";
},
icons: {
refresh: 'fa fa-refresh',
toggle: 'fa fa-th-list',
columns: 'fa fa-columns',
detailOpen: 'fa fa-plus-circle',
detailClose: 'fa fa-minus-circle'
}
});
//activate the tooltips after the data table is initialized
$('[rel="tooltip"]').tooltip();
$(window).resize(function () {
$table.bootstrapTable('resetView');
});
$('[id^="deleteUnit-"]').on('click', function (e) {
event.preventDefault();
var id = $(this)[0].getAttribute('data-id');
swal({
title: '¿Estás seguro?',
text: "No es posible deshacer esta acción!",
type: "warning",
showCancelButton: true,
cancelButtonText: "Cancelar",
confirmButtonClass: "btn btn-info btn-fill",
confirmButtonText: "Si, eliminar",
cancelButtonClass: "btn btn-danger btn-fill",
closeOnConfirm: false,
closeOnCancel: true
}, function(isConfirm){
if (isConfirm){
document.getElementById(id).submit();
}
});
});
});
Here is an imageScreenshoot
this is a question about vue and its v-table, specifically its v-client-table
This example has a filter on name pets and birthdays but not on age, edit or delete. https://jsfiddle.net/f5h8xwgn/299/
I need something similar but I'm unable to reproduce the affect in my project. I have 3 columns: name, active, and edit - edit is just a bunch of buttons - I don't need to sort or filter buttons.
this is my code code for the table:
<v-client-table :data="filteredList"
:columns="['name', 'active', 'edit']" :options="options"
>
<template slot="name" scope="props">
<div v-if="props.row.editing">
<textbox v-model="editName"></textbox>
</div>
<div v-else>{{ props.row.name }}</div>
</template>
<template slot="active" scope="props">
<div v-if="props.row.editing">
<select class="form-control" v-model="editActive">
<option v-bind:value="1">Active</option>
<option v-bind:value="0">Inactive</option>
</select>
</div>
<div v-else>
<div v-if="props.row.active">Active</div>
<div v-else>Inactive</div>
</div>
</template>
<template slot="edit" scope="props">
<div class="text-right">
<button type = "button"
#click="editFabricator(props.row)"
class="btn btn-primary">
<div v-if="props.row.editing">Cancel</div>
<div v-else>Edit</div>
</button>
<button v-if="props.row.editing"
type = "button"
#click="saveEdit(props.row.id)" class="btn btn-primary">
Save
</button>
</div>
</template>
</v-client-table>
this is my options
options: {
filterByColumn: true,
headers: {
name: 'Name',
active: 'Active',
edit: 'Edit',
},
listColumns: {
active: [{
id: '0',
text: 'Inactive'
}, {
id: '1',
text: 'Active'
}]
},
}
in the example on jsfiddle edit isn't listed in the :columns list when the table is declared but it still shows up in the table. if I remove edit from the :columns list it removes the edit column from the table and no matter what I do I can't get it to show up. if I put edit in the :columns list then the column is there but it has a filter. which I don't want.
this is for a laravel project. not sure if that makes a difference.
Under Options add the columns you want to filter by using the
filterable option.
{
"options": {
"filterByColumn": true,
"filterable": [
"name",
"active"
],
"headers": {
"name": "Name",
"active": "Active",
"edit": "Edit"
},
"listColumns": {
"active": [
{
"id": "0",
"text": "Inactive"
},
{
"id": "1",
"text": "Active"
}
]
}
}
}
https://matanya.gitbook.io/vue-tables-2/options-api
I am using MeteorJS (So great :) ), to develop simple app. I want to use masonry, so I am using sjors:meteor-masonry package.
When I use this code everything works fine:
var itemsData = [
{
title: 'First item',
description: 'Lorem 1',
price: 20
},
{
title: 'Secounde item',
description: 'Lorem 2',
price: 40
},
{
title: 'Third item',
description: 'Lorem 3',
price: 10
},
{
title: 'Fourth item',
description: 'Lorem 4',
price: 10
},
{
title: 'Five item',
description: 'sit 4',
price: 10
}
];
Template.itemsList.helpers({
items: itemsData
});
Template.itemsList.rendered = function() {
var container = document.querySelector('#main');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
};
But when I change part (code) for Template.itemsList.rendered to masonry don't work:
Template.itemsList.helpers({
items: function() {
return Items.find();
}
});
Any ideas ?
EDIT
myapp/lib/collections/items.js
Items = new Mongo.Collection('items');
And it is populated whit data from mongoshell. Data is ok, but masonry dont work.
EDIT 2
Masonry stops animating on screen resize and grid is not working as it should. No errors.
myapp/client/templates
<template name="itemSingle">
<div id="profile-widget" class="panel item">
<div class="panel-heading">
</div>
<div class="panel-body">
<div class="media">
<div class="media-body">
<h2 class="media-heading">{{title}}</h2>
{{description}}
</div>
</div>
</div>
<div class="panel-footer">
<div class="btn-group btn-group-justified">
<a class="btn btn-default" role="button"><i class="fa fa-eye"></i> 172</a>
<a class="btn btn-default" role="button"><i class="fa fa-comment"></i> 34</a>
<a class="btn btn-default highlight" role="button"><i class="fa fa-heart"></i> 210</a>
</div>
</div>
</div>
</template>
<template name="itemsList">
<div id="main">
{{#each items}}
{{> itemSingle}}
{{/each}}
</div>
</template>
I encountered the same problem, without never finding the perfect solution.
I tried to resolve with the setTimout() workaround :
Template.main.rendered = function() {
setTimeout(function() {
$('#container').masonry({
columnWidth: 35,
itemSelector: '.thumb',
gutter: 10,
isFitWidth: false
});
}, 1);
}
I toggle editable by clicking on a different (a pencil icon) DOM object. This works fine for simple text values, now I need an select box and preferbly the select2 dropdown.
On all other fields and the regular select dropdown I use the following:
$('.edit-last_name').click(function(e){
e.stopPropagation();
$('#last_name').editable('toggle');
});
For the select 2 dropdown I need to pass aditional params to editable, but I have no idea how to do it, the code below does not work. (the element is not triggerd)
$('.edit-country').click(function(e){
e.stopPropagation();
$('#country').editable({
toggle: 'show',
select2: {
width: 200,
placeholder: 'Select country',
allowClear: true
}
})
});
Here is the html:
<div class="row edit-line">
<div class="col-md-3 col-xs-4">
<strong>#lang('user.country')</strong>
</div>
<div class="col-md-6 col-xs-8 text-right">
<span id="country" class="edit-field" data-type="select" data-source="{{ route('countries') }}" data-value="{{ $user->country }}" data-pk="{{ $user->id }}" data-url="{{ action('UsersController#update') }}" data-title="#lang('user.country')">{{ Countries::getOne($user->country, App::getLocale(), 'cldr'); }}</span>
</div>
<div class="col-md-3 text-muted hidden-xs">
<i class="fa fa-pencil"></i> #lang('general.edit')
</div>
</div>
In fact it has notting to do specifically with select2, I just don't know how to pass params to editable.
You should bind editable to your input outside the click event. When the user clicks you can then toggle the editable.
Based on this question: X - editable input editable on click on other element, your javascript would be:
$(document).ready(function() {
// in case you don't want the modal
$.fn.editable.defaults.mode = 'inline';
// bind x-editable on DOM ready
$('#country').editable({
source: [
{id: 'gb', text: 'Great Britain'},
{id: 'us', text: 'United States'},
{id: 'ru', text: 'Russia'}
],
// change this from 'show' to 'manual'
toggle: 'manual',
select2: {
width: 200,
placeholder: 'Select country',
allowClear: true
}
});
// on element click
$('.edit-country').click(function(e){
e.stopPropagation();
// toggle x-editable
$('#country').editable('toggle');
});
});
Here is a working jsfiddle.