I am using angular chosen to spice up my select options, And all is good and well.
But when I try to put it inside a modal selecting one of the options closes the modal, but chosen stays open.
Tried using: backdrop: 'static', in my modal. same thing.
The Chosen select:
<select chosen ng-model="fullMember.Master_record"
ng-init="loadMembers()"
ng-options="Member.FullName for Member in Members"
class="form-control"
inherit-select-classes="true"
search-contains="true"
max-shown-results="10"
no-results-text="':אין_נתונים'"
placeholder-text-single="':בחר'">
<option value=""></option>
</select>
The Modal Factory.
return {
animationsEnabled: true,
open: function (sub, MID) {
var out = $uibModal.open({
templateUrl: "views/modals/" + sub.click + ".html",
controller: "ModalInstanceController",
size: 'lg',
resolve: {
MID: function () {
return MID;
}
},
backdrop: 'static',
});
return (out.result);
}
Is there something I am missing?
P.S. no errors, just looking ugly..
Related
I would like to build a selector that displays a "Check one or more or options" placeholder and, after selecting 1-N options, the placeholder is still displayed instead of the checked results.
In short, the component should always display the placeholder, regardless of having 0, 1 or N options checked.
I have been searching but I can't find any way to do it:
Html:
<select multiple id="e1" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
Js
$('select').select2({
placeholder: "Select a state",
templateSelection: function (data) {
return 'Select a state';
}
});
http://jsfiddle.net/91nqgkuy/2/
Finally, I have chosen to overwrite the results template and insert the desired text.
// Set the default option.
$(select, context).each(function (e) {
setTemplateResults($(this));
});
// Override select2 default work flow.
$(select, context).on('select2:select select2:unselect', function (evt) {
setTemplateResults($(this));
});
// Method.
function setTemplateResults(selector) {
let container = selector.siblings('span.select2').find('ul')
container.html('<li>' + Drupal.t('Select category(ies)') + '</li>');
}
I am using bootstrap dual listbox pluging in my ASP.NET MVC project.
I am also using Knockout in the project. I am trying to create bindingHandler for the this plugin to make it working smoothly with knockout.
here is what I tried
Binding Handler
ko.bindingHandlers.dualList = {
init: function (element, valueAccessor) {
$(element).bootstrapDualListbox({
selectorMinimalHeight: 160
});
$(element).on('change', function () {
$(element).bootstrapDualListbox('refresh', true);
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).bootstrapDualListbox('destroy');
});
},
update: function (element, valueAccessor) {
$(element).bootstrapDualListbox('refresh', true);
}
}
HTML
<select class="form-control" data-bind="foreach:{data: EditedElement().Operations, as : 'op'} , dualList: EditedElement().Operations" multiple>
<option data-bind="value: op.OperationID(), text: op.Name(), selected: op.IsSelected()"></option>
</select>
View Model
function SelectOperationVM(operationId, isSelected, name) {
var self = this;
self.OperationID = ko.observable(operationId);
self.IsSelected = ko.observable(isSelected);
self.Name = ko.observable(name);
self.copy = function () {
return new SelectOperationVM(self.OperationID(), self.IsSelected(), self.Name());
}
}
My problem is that I can not make sync between the viewModel observableArray, and the plugin.
In other words, I want the changes in the plugin (the user removed some options or added some options) to be reflected on the view model property, and vice verse
to sync, you need to pass multiple observables to custom binding
so your html should be like
<select class="form-control" data-bind="foreach: { data: Operations, as: 'op'}, dualList: { options: Operations, selected: Selected }" multiple>
<option data-bind="value: op.OperationID(), text: op.Name(), selected: op.IsSelected()"></option>
</select>
and custom binding be like
ko.bindingHandlers.dualList = {
init: function(element, valueAccessor) {
var data = ko.utils.unwrapObservable(valueAccessor());
$(element).bootstrapDualListbox({
selectorMinimalHeight: 160
});
$(element).on('change', function() {
// save selected to an observable
data.selected($(element).val());;
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).bootstrapDualListbox('destroy');
});
},
update: function(element, valueAccessor) {
// to view if there is an update (without this "update" will not fire)
var options = ko.utils.unwrapObservable(valueAccessor()).options();
$(element).bootstrapDualListbox('refresh', true);
}
}
also i have created a dirty working jsfiddle
I have a dropdown menu which contains 3 options. This menu is shown inside a modal jQuery UI dialog.
I can open open the dialog and choose one of the three options. The chosen option is stored in a variable. This works fine. But if I open the dialog again and choose another option, the variable does not change - it contains the value of first selection.
$("#button").click(function()
{
var diag = "<select id='diagDropdown'>"
+"<option>Option 1</option>"
+"<option>Option 2</option>"
+"<option>Option 3</option>"
+"</select>";
$(diag).dialog(
{title: "Choose Option"},
{autoOpen: "false"},
{modal: "true"},
{draggable: "false"},
{ buttons: {OK: dialogOK} });
function dialogOK()
{
var chosenOption=$("#diagDropdown option:selected").val().toLowerCase();
//working with chosen option
$(this).dialog("close");
});
Hope you can help me. Thanks in advance!
The problem is that each time you click on your element with id "button", you are creating a new dropdown with id "diagDropdown" in a new dialog.
Then your code :
var chosenOption=$("#diagDropdown option:selected").val().toLowerCase();
is always selecting the first dropdown with id "diagDropdown" in the DOM.
Try this :
<input type="button" value="click me" id="button"/>
<script type="text/javascript">
// On DOM ready
$(function() {
var dropdown =
$('<select id="diagDropdown"> ' +
'<option>Option 1</option>' +
'<option>Option 2</option>' +
'<option>Option 3</option>' +
'</select>');
// Create the dialog (only once)
dropdown.dialog({
title: "Choose Option",
autoOpen: false,
modal: true,
draggable: false,
buttons: {
"OK": function() {
var chosenOption=$('#diagDropdown option:selected').val().toLowerCase();
//working with chosen option
$(this).dialog('close');
}
}
});
// Bind click event : on click just open the existing dialog
$('#button').click(function() {
$('#diagDropdown').dialog('open');
});
});
</script>
I have two Html.ListBoxFor called A & B.
1) A has data populated from DB & B is empty.
2) I want a functionality like this where items from list A are placed into list B.
$('.add').on('click', function() {
var options = $('select.multiselect1 option:selected').sort().clone();
$('select.multiselect2').append(options);
});
$('.addAll').on('click', function() {
var options = $('select.multiselect1 option').sort().clone();
$('select.multiselect2').append(options);
});
$('.remove').on('click', function() {
$('select.multiselect2 option:selected').remove();
});
$('.removeAll').on('click', function() {
$('select.multiselect2').empty();
});
3) I tried this with asp.net mvc, but I was unable to fetch the selected items in model & controller.
4) I want a way by which we can perform this in asp.net mvc. If there can be some way in mvc then I would be able to store that data in SQL DB
5) Its jquery sibling is here
Any help would be appreciated
I think this will help you.
Blockquote
Html file
Fruits:
<select multiple="multiple" id="a">
<option value="1">Apple</option>
<option value="2">Orange</option>
<option value="3">Banana</option>
</select>
<input type="button" id="add" value="Add"/>
<input type="button" id="addall" value="Add all"/>
<select multiple="multiple" id="b">
</select>
Javascript File
$("#add").bind("click", function () {
addOption(false);
});
$("#addall").bind("click", function () {
addOption(true);
});
function addOption(isAll){
var option = $("#a option");
if (!isAll) {
option = $("#a option:selected");
} else {
$("#b").html("");
}
$(option).each(function () {
var val = $(this).val();
var text = $(this).text();
$("#b").append($(this)[0].outerHTML);
$(this).remove();
});
}
I'm actualilly trying tu use this nice widget : http://quasipartikel.at/multiselect_next/
I have two of this Widget in the same page, and what i'm trying to do is refreshing the second one when i select or deselect item in the first one.
For exemple, at the beggining, i only have this :
<select id="crc" class="multiselect" multiple="multiple">
</select>
Then, on select and deselect event, I'm creating some more nodes and add them to this (and it works, it create something like this :
<select id="crc" class="multiselect" multiple="multiple">
<option>test1</option>
<option>test2</option>
</select>
The problem is that I'm not able to refresh the second widget after adding the new options.
I fount an usefull post with similar problem and tried this :
$("#crc").multiselect("destroy").multiselect();
But it didn't work, does anyone have an idea?
I had exactly the same problem. Here's what worked for me:
To fix problem with destructor of ui.multiselect make the following change inside of the destroy function:
destroy: function() {
this.element.show();
this.container.remove();
if ($.Widget === undefined)
$.widget.prototype.destroy.apply(this, arguments);
else {
$.Widget.prototype.destroy.apply(this, arguments);
return this;
}
}
The old version was:
destroy: function() {
this.element.show();
this.container.remove();
$.widget.prototype.destroy.apply(this, arguments);
}
The reason of such changes is a new $.Widget introduced in jQuery 1.8. I also made the following changes/additions so that it would be compatible with IE9 and also provides a function to get selectedTexts as well.
// get all selected values in an array
selectedValues: function() {
return $.map( this.element.find('option[selected]=selected'), function(item,i) { return $(item).val(); });
},
selectedTexts: function () {
return $.map(this.element.find('option[selected]=selected'), function (item, i) { return $(item).html(); });
}