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();
Related
Wanted to have cleave.js to format text input on the fly.
I have 2 text inputs
HTML text input and
also a pop over text input whenever search icon is clicked.
The issue is on popover text input where cleave text formating is not
working.
I believe it could be related to the element hasn't exist somehow? I have try to listen to listener but no luck so far. .on('shown.bs.popover)
My code as as per below
https://jsfiddle.net/fairul82/y3kf92oq/
Libraries used : cleave,js , bootstrap popover , jquery
HTML
<div class="container">
<h3>Bootstrap 3 Popover HTML Example</h3>
<input type="text" class="input-element"><br>
<ul class="list-unstyled">
<li><a data-placement="bottom" data-toggle="popover" data-
container="body" data-placement="left" type="button" data-html="true"
href="#" id="login"><span class="glyphicon glyphicon-search" style="margin:3px 0 0 0"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<h1>
My Content
</h1>
<input type="text" class="input-element"><br>
</div>
</form>
</div>
//JS
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$("[data-toggle=popover]").on('shown.bs.popover', function() {
// alert('called back');
const cleave = new Cleave('.input-element', {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
});
});
const cleave = new Cleave('.input-element', {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
});
Here is solution https://jsfiddle.net/ztkv8w60/19/
According to authority document https://github.com/nosir/cleave.js, it has a note .input-element here is a unique DOM element. If you want to apply Cleave for multiple elements, you need to give different css selectors and apply to each of them.
It is tricky question, because the bootstrap popover creates the same element as your specific div when the icon gets a click. Therefore there are two the same element, you have to point it out which element is in a popover.
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 have the following structure
<div id="contractTab" class="ui top attached large tabular menu">
<a id="main-tab" class="item active" data-tab="first" ng-show="ctrl.currentTabsGroup == 'main'">some data</a>
<a id="supplier-tab" class="item" data-tab="third" ng-show="ctrl.currentTabsGroup == 'supplier'">some data2</a>
<a id="position-tab" class="item" data-tab="fourth" ng-show="ctrl.currentTabsGroup == 'position'">some data3</a>
<a class="item" data-tab="second" ng-show="ctrl.currentTabsGroup == 'main'">some data4</a>
</div>
And each tab looks like
<div class="ui bottom attached tab segment" data-tab="third">
<div class="ui basic segment">
<ng-form name="supplierForm">
...
</ng-form>
</div>
</div>
I have many fields required in each form. The problem is that when I try to validate form when this form is active(on screen), I get that it is invalid. For, example supplierForm.$valid == false
However, if I move to different form everything apparently erases and I get
supplierForm.$valid == true
Is there a way to connect all of this forms in order not to lose data?
This function is called when I change tabs
resetFormObject(formName);
$s[formName].$setPristine();
$timeout(function() {
document.getElementById(tabId).click();
}, 20);
Where resetFormObject just initializes active object to send it when the form is submitted
I want to dynamically add field inputs to a form as the user completes it. However, if the user changes a value for a previous field that others depended on, then I want to hide those later fields again and reset their values back to the default. I can show and hide the input fields without a problem. However, no matter what I do, I cannot change the value of the selection dropdown menu.
Here is my script:
$(function() {
$('#type_selection').change(function() {
var case_type = $('#type_selection :selected').val();
if(case_type !== "") { //the default value is an empty string
$('.subtype-panel').slideDown('slow');
}
else {
$('.subtype-panel').slideUp('slow');
$('#subytype_selection').val("").change();
}
});
});
Play template:
#(caseForm: play.data.Form[Case])
#import views.html.common._
#import models._
#implicitFieldConstructor = #{
b3.vertical.fieldConstructor
}
#main("New Case Info") {
<div class="page-header">
<h3>New Case Information<span class="pull-right label label-primary">Open</span></h3>
</div>
<fieldset>
#b3.form(action = routes.CaseController.save()) {
<div class="panel panel-primary">
<div class="panel-heading">Case Type</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">
#b3.select(caseForm("caseType"),
options = options(Case.typeOptions),
'_id -> "type_selection",
'_label -> "Case Type",
'_default -> "-- Select a Type --")
</div>
<div class="col-md-3">
#datePicker(caseForm("date"), '_label -> "Date", 'placeholder -> "mm/dd/yyyy")
</div>
</div>
</div>
</div>
<div class="panel panel-primary subtype-panel">
<div class="panel-heading">Case Subtype</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">
#b3.select(caseForm("caseSubType"),
options = options(Case.subTypeOptions),
'_id -> "subtype_selection",
'_label -> "Subtype",
'_default -> "-- Select a Subtype --")
</div>
</div>
</div>
</div>
}
</fieldset>
}
The b3 syntax may look a bit odd to you. It comes from a play bootstrap library: http://adrianhurt.github.io/play-bootstrap/
For b3 select fields, the default option is automatically assigned a value of an empty string. This is what I want to change my selection choice back to using JQuery.
The solution is as adis said in his comment. Using _id -> foo changes the id of the entire form-group (the label and the dropdown), but it does not change the id of the selection box specifically. You have to use id -> foo to do that.
I used to use this in Web Form development through the id and name of the input radio button, but can't seem to get it in MVC5, could someone point out what I'm doing wrong?
On a radio button (part of the model) selection, depending which button, I want another text box to appear (within a div).
View:
<div class="ui-grid-solo">
<div class="ui-grid-solo">
<div class="ui-block-a">
<p>AS Number Type</p>
<span>
#Html.RadioButtonFor(model => model.NumberType, "Odd", true)Odd
#Html.RadioButtonFor(model => model.NumberType, "Even", false)Even
</span>
</div>
</div>
#if (Model.NumberType == true)
{
<div id="OddOrEven">
<div class="ui-grid-solo">
<div class="ui-block-a">
<span>
#Html.EditorFor(m => m.Reason)
</span>
</div>
</div>
</div>
}
JavaScript:
#section Scripts
{
<script type="text/javascript" src="~/Scripts/maintainscroll.jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input[Value='Odd']").click(function () {
var test = $(this).val();
$("#OddOrEven").show();
});
});
</script>
}
I would do it like this:
#Html.RadioButtonFor(model => model.NumberType, "Odd", true)Odd
#Html.RadioButtonFor(model => model.NumberType, "Even", false)Even
<div id="OddOrEven">
<div class="ui-grid-solo">
<div class="ui-block-a">
<span>
#Html.EditorFor(m => m.Reason)
</span>
</div>
</div>
</div>
<script>
$("#OddOrEven").hide();
$("input[name='NumberType']").on("change", function () {
if ($(this).val() == "Odd") {
$("#OddOrEven").show();
}
}):
</script>
Basically, grab the change event of your radio button group by the input's name, rather than the value. The issue with using the value is that if you have multiple radio button groups on the same view, and they each have the same value pairs (ie: true/false), then your view would not know which radio group to select. Using name is the proper way to go.
Remove the #if surrounding the div, set the div css class to hidden on page load, then your button will work, however clicking off of it will still leave it there, add to the javascript to hide the textbox again.
So remove that #if change your div to <div id="OddOrEven" style="display:none"> and the below within your script:
$(document).ready(function () {
$("input[Value='Odd']").click(function () {
$("#OddOrEven").show();
});
$("input[Value='Even']").click(function () {
$("#OddOrEven").hide();
});
});