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.
Related
value: 'Select (mm)',
list: ["1mm","2mm","3mm", "4mm", "55mm"],
visible: false,
toggle() {
this.visible = !this.visible;
},
select(option) {
this.value = option;
},
<div class="thickness-productlist">CLEAR</div>
<div class="aselect" :data-value="value" :data-list="list">
<div class="selector" #click="toggle()">
<div class="label">
<span>{{ value }}</span>
</div>
<div class="arrow" :class="{ expanded : visible }"></div>
<div :class="{ hidden : !visible, visible }">
<ul>
<li :class="{ current : item === value }" v-for="item in list"
#click="select(item)" :key="item">{{ item }}</li>
</ul>
</div>
</div>
</div>
How to reset selected value from the dropdown on clicking of clear button in vuejs?
At present i am having the clear option, Where if i click on it, I want to selected value from the dropdown to get clear.
the dropdown selected value is binded to the value variable so listen to the click event and change it back
<div class="thickness-productlist" #click="value= 'Select (mm)'">CLEAR</div>
I’m trying to show a hit section from a Algolia Instant Search as simple as a dropdown-item from bootstrap:
one result per line as a <a> link, without images.
But I only get this one:
How can I get the dropdown-item (above) style , One item per line, without that borders and overlapping ?
Code HTML for seachbox:
<form class="form-inline md-form my-0 mr-5 text-white ">
<i class=“fas fa-search white-text” aria-hidden=“true”></i>
<div id=“searchbox” class="text-white "></div>
<div id=“hits” class=“dropdown-menu text-white” ></div>
</form>
Code JS :
search.addWidget(
instantsearch.widgets.searchBox({
container: “#searchbox”,
placeholder: “Search”,
showSubmit: false,
autofocus: false
})
);
search.addWidget(
instantsearch.widgets.hits({
container: "#hits",
templates: {
empty: "None.",
item: function(item) {
return `<a class="dropdown-item" href="/question/${item.id_question}">${item.str_question}</a>`;
}
}
})
);
Without being able to see the inside of <div id=“hits”></div>
I am guessing there is a ul and li
you need to make those display: block
and a few more css properties
probably white-space: pre;
Can you provide the inside html for <div id=“hits”></div>? so we can provide a better answer.
I have created a tabular page in which i need to filter the table with filters using a left side facets boxes of different category but with multi-selection options and i need to use Angularjs for this requirement.
I need to check/uncheck using the clear filter selection .
Any helping library can help to achieve the same or we need to do some logic around the checkboxes to achieve this.
My checkbox code looks like this:
<div class="col-sm-2" style="padding-top: 10px; padding-bottom: 20px;">
<div class="facetBx sltBx" ng-show="tabFilters.length > 0">
<p class="facetBxTitle"><i class="fa fa-filter"></i> Filter Selection
<a class="clrSlt" ng-click="clearAllFilters();">Clear</a>
</p>
<div class="facetBxChld" id="uRslctn">
<ul>
<li ng-repeat="item in tabFilters">
<div class="crop">
<strong title="{{item}}">{{item}}</strong>
</div>
<i class="fa fa-remove rmvThs" style="font-size: 14px;color:#000;float: right;" ng-click="checkItem(item, item,false);"></i>
</li>
</ul>
</div>
</div>
<div class="facetBx" ng-repeat="item in filters">
<p class="facetBxTitle bomtype">{{item.label}}</p>
<div class="facetBxChld" id="bomFacet">
<ul class="multiselect" style="max-height: 140px;overflow-y: auto;">
<li ng-repeat="(k,v) in item.values">
<input type="checkbox" ng-model='isSelected' ng-click='checkItem(item.name, k, isSelected)'>
<span> {{k}} ({{v}})</span>
</li>
<li ng-show="value.length == 0">
No Data Available.
</li>
</ul>
</div>
</div>
</div>
Below website are the reference of the code which i am trying to build:
www.jabong.com
The UI(HTML) is done but i am facing the trouble in the maintaining the checking and un-checking of the checkboxes which are not clearing off.
I believe i need to code something in the ng-model of checkbox to achieve it but i am not able to be successfull so need help on the same.
Sample Plunkur for the same:
enter link description here
Thanks in advance.
Basically you need to keep track of ng-model of checkboxes with some property in your $scope. I did this by modifying your $scope.filters and adding selected property inside it, like below.
var filters = [{
label: 'Brand',
name: 'brand',
values: {
Blackberrys: 503,
Arrow: 175,
ParkAvenue: 358
}
}, {
label: 'Color',
name: 'color',
values: {
Black: 100,
Green: 200,
Red: 300
}
}]
function loadFilters() {
$scope.filters = filters.map(function(filter) {
var filter = angular.copy(filter);
for (var key in filter.values) {
filter.values[key] = {
selected: false,
count: filter.values[key]
}
}
return filter;
})
}
loadFilters();
Then you can call loadFilters() any time you want to clear all filters. Please see POC attached below.
https://plnkr.co/edit/SADPoUpftnJkg1rMuSB9?p=preview
You should try 'ng-change' on checkboxes to trigger a method which changes the values according to checked and unchecked checkboxes.
For Ex.
<input type="checkbox" ng-model='isSelected' ng-click='checkItem(key, k, isSelected)' ng-change="yourMethodHere()">
in JS:
$scope.yourMethodHere = function() {
if (isSelected) {
// filter the values here
} else {
// non filtered values
}
}
By doing this you do not need to even maintain the values of exiting checked/unchecked checkbox.
I added an option to the dropdown that allows user to add item if it doesn't exist.
For that matter, I added an input field to the dropdown but when the user enters something, the dropdown tries to match the entered text with items that are already in the list.
I find it quite annoying in that specific case. I have noticed in the docs that input elements are bound to the search function. Nevertheless, I couldn't find how to disable this behaviour.
Here's the HTML:
<div class="ui fluid selection dropdown playlist">
<input name="playlist" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">playlist</div>
<div class="menu">
<div class="item create" data-value="0">
<span class="create-placeholder">+ new playlist</span>
<div class="ui action input add-playlist">
<input placeholder="new playlist">
<button class="ui button">Add</button>
</div>
</div>
<div class="item" data-value="1">foo</div>
<div class="item" data-value="2">bar</div>
<div class="item" data-value="3">baz</div>
</div>
</div>
The .add-playlist div and its content are not shown but I'm willing to spare you with the CSS here.
And the js:
$dropdown = $('.ui.dropdown');
$dropdown.dropdown({
action: (text, val) => {
if (val == 0) { // eslint-disable-line
$('.create-placeholder').hide(100);
$('.add-playlist').css('display', 'inline-flex');
$('.add-playlist input, .add-playlist button').show(200);
}
else $dropdown.dropdown('set selected', val).dropdown('hide');
},
onHide: () => {
// do that after dropdown has been hidden
setTimeout(() => {
$('.add-playlist, .add-playlist input, .add-playlist button').hide();
$('.create-placeholder').show();
}, 400);
}
});
I've set up a fiddle to have a clear exemple. Just type "foo" and you'll see what I mean in case it's not crystal clear.
To allow user to add new items just add allowAdditions: True To dropdown options, for more informtions see semantic-ui dropdown settings
Example:
$('dropdownSelector').dropdown({
allowAdditions: True
}).dropdown();
I gave up on Bootstrap popover, and went looking. I found WebUI Popover which has all the functionality i am looking for.
But I am having trouble setting the title of the popover using the html content of an element on the page. I get undefined in console.log() and the title loads empty. The html I am trying to access is dynamically created.
Where I think there is a bug in the plugin is that the content loads perfectly from another element on the page.
I have a FIDDLE here.
My WebUI Popover code is:
// Popover Menu initialize
$('.icon-popover-menu').webuiPopover({
placement: 'left',
trigger: 'click',
closeable: true,
multi: false,
animation: 'pop',
cache: 'false',
type: 'html',
width: '220',
title: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
content: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-body').html();
}
});
// Hide popover when screen changes size
$(window).on('resize', function() {
WebuiPopovers.hideAll();
});
$(window).on('scroll', function() {
WebuiPopovers.hideAll();
});
A sample of my HTML is:
<table class="fiddle">
<tr>
<td class="row-icon">
<button class="icon-popover-menu ion-fw btn-row-popover-menu">BTN</button>
<div style="display:none;">
<div class="btn-row-popover-menu-head">
<span>THIS IS THE TITLE</span>
</div>
<div class="btn-row-popover-menu-body">
<div class="input-group" role="group">
<a class="btn btn-app btn-icon-menu btn-popover-first" href="#">
EDIT
</a>
<a class="btn btn-app btn-icon-menu-danger" href="#">
DELETE
<br>
<span class="transaction-menu-legend">DELETE</span>
</a>
</div>
</div>
</div>
</td>
</table>
Any help is appreciated.
title: function() {
return $(event.target).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
This works fine. By doing $(this) you are trying to access the title element of the popover which obviously has no closest td.row-icon. Hence it is undefined.