How to change parent container of dropdown list in select2 - javascript

I have form, which contain a few selects. For the latter I used plugin select2.
In exemple below you can see, that pull-down menu of select situated in the root of document - in the body.
Can I change location of dropdown list and how to do this?
UPD: probably my question is not fairly accurate. I'm asking, how to put dropdown list in commun container with select block?
$(document).ready(function() {
$(".js-example-basic-single").select2({
minimumResultsForSearch: Infinity
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div class="wrapper">
<select class="js-example-basic-single" style="width: 200px;">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>

I don´t know if is available on the select2 version you are using, but you can use this:
$('select').select2({
dropdownParent: $('#my_amazing_modal')
});
Source https://select2.github.io/options.html#dropdownParent

This would work
$("#selectInput").select2({ dropdownParent: "#modal-container" });
Please note that this would work on select2 version 4.0.2. For higher versions see other answers.
Reference: https://github.com/select2/select2-bootstrap-theme/issues/41

The location of your dropdown list is determined by your HTML and CSS layout. It depends on where you put the div in your example and how it is styled. See my example below which shows the dropdown list moved to the right of a yellow box.
$(document).ready(function() {
$(".js-example-basic-single").select2({
minimumResultsForSearch: Infinity
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div style="width:100%;height:100%;position:relative;">
<div style="height:100px;width:100px;background-color:yellow;float:left;"></div>
<div style="float:left;" class="wrapper">
<select class="js-example-basic-single" style="width: 200px;">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>

Related

How to do date time picker with respected timezone with selected dropdown?

I need a calendar with time select as well as timezone selection. Like below image:
Here is my code:
$('#datetimepicker').datetimepicker({
// format:'d.m.Y H:i',
// timepicker:false,
// allowTimes: []
// onSelectDate:function(ct,$i){ // only to select time the changed date highlighted
// alert(ct.dateFormat('d/m/Y'));
// },
inline:true,
step: 30,
lang:'ru',
disabledWeekDays: [0,6]
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<div>
<input id="datetimepicker" type="text" >
</div>
I got the datetimepicker plungin to do this. But can't able to add calendar based on timezone. Here i'm attached my working code, but not added any timezone dropdown here. Can anyone suggest to achieve this:
One option is to use control groups. In the snippet below, I used the CSS classes ui-controlgroup and ui-controlgroup-vertical to achieve this. However, you can also use scripting as shown in the documentation. As you will observe, I took the liberty to demonstrate the dropdown using specific timezones, but, you can use Moment in conjunction with Luxon to achieve your needs. The datetimepicker plugin does not have a built-in ability to refresh after update, but I attempted a hack using blur to achieve that.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"/>
<script src="https://cdn.jsdelivr.net/npm/luxon#1.22.0/build/global/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<body>
<!-- https://jqueryui.com/controlgroup/ -->
<div class="ui-controlgroup ui-controlgroup-vertical">
<input id="datetimepicker" type="text" class="ui-controlgroup-item">
<select id="timezonepicker" class="ui-controlgroup-item">
<option value="Europe/Moscow" selected>Moscow Standard Time</option>
<option value="Asia/Omsk">Omsk Time</option>
<option value="Asia/Novosibirsk">Novosibirsk Time</option>
</select>
</div>
<script>
$('#datetimepicker').datetimepicker({
inline:true,
step: 30,
lang:'ru',
disabledWeekDays: [0,6]
});
$('#timezonepicker').change(function() {
let newDate = luxon.DateTime.fromISO(luxon.DateTime.local(), {zone: $(this).val()}).toFormat('yyyy/MM/dd hh:mm');
$('#datetimepicker').val(newDate);
$('#datetimepicker').trigger('blur');
});
</script>
</body>
</html>

Bootstrap Multiselect - unselect by onclick

I'm using the Bootstrap-Multiselect function; I want to unselect an option when I click on "x".
This is a simple example of what I'm looking for.
$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");
$('#tags').find('[value=' + tag + ']').prop('selected', false);
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div value='Php' id='remove'>x</div>
</div>
</body>
</html>
This could be achieved by unselecting all then getting the selected values and remove the target tag from them and reselect the rest of them then finally refresh the select :
$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");
var values = $('#tags').val();
if(values){
$('#tags').selectpicker('deselectAll');
$('#tags').selectpicker('val', values.filter(function(e) {return e !== tag }));
$('#tags').selectpicker('refresh');
}
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div value='Php' id='remove'>x</div>
</div>
</body>
</html>
I think that you should not use the value attribute in a div element, since it was not designed the job you are trying to do (see here). You can use a data-tag="php" for example, and when writing html I think is best to use " instead of ' too, but the browser do the trick.
In the select element, you wrote the id tags with the first letter in "caps lock"
and then in the javascript code you use #tags, see:
<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
$('#tags').find('[value=' + tag + ']').prop('selected', false);
After that, you just need to remove the selected element from the array and set the values again, see a working example:
jQuery(document).ready(function($) {
$(document).on("click", '#remove', function(a) {
var removed = $(this).data('value')
var values = $("#tags").val()
var index = values.indexOf(removed)
if (index != -1) {
values.splice(index, 1)
$('#tags').selectpicker('val', values);
}
});
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id="tags" data-style="btn-primary" multiple data-max-options="2">
<option value="Php" selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div data-value="Php" id="remove">x</div>
</div>
</body>
</html>

Bootstrap selectpicker not working on multiple fields added by Javascript / JQuery

Bootstrap select picker not working when loaded with jQuery /javascript dynamic fields.
When i remove selectpicker class from append function,it works but doesn't load style.
$('select').selectpicker();
$('#add_more').click(function() {
$('.testBox').append('<select class="show-tick form-control"><option>Safari</option><option>Firefox</option><option>Chrome</option></select> <br />');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
Add More
<select class="selectpicker show-tick form-control">
<option>Safari</option>
<option>Chrome</option>
<option>Firefox</option>
</select>
<br /><br />
<div class="testBox"></div>
JS is not reactive in the sense that $('select') will update with all the newly added instances of <select> elements. Since $('select').selectpicker() is executed when additional select elements have not been added to the DOM, it will only apply to those that are available at runtime—which is the one that is present in the DOM at that moment in time.
In order to initialize the plugin for newly added <select> elements, you can simply create a dummy <div> element and append your <select> element to it:
var $select = $('<div />').append('<select class="show-tick form-control"><option>Safari</option><option>Firefox</option><option>Chrome</option></select>');
Now, your to-be-added element will be available as a document fragment. jQuery is able to bind events to elements in the document fragment even before it is injected into the DOM, so you can initialize the plugin right then and there. We simply search the dummy div for your <select> element:
$select.find('select').selectpicker();
When this is done, you append it to your DOM:
$('.testBox').append($select);
See proof-of-concept example below:
$('select').selectpicker();
$('#add_more').click(function() {
// Create dummy div that houses select element
var $select = $('<div />').append('<select class="show-tick form-control"><option>Safari</option><option>Firefox</option><option>Chrome</option></select>');
// Initialize plugin in <select> element found in document fragment
$select.find('select').selectpicker();
// Append document fragment to your DOM
$('.testBox').append($select);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
Add More
<select class="selectpicker show-tick form-control">
<option>Safari</option>
<option>Chrome</option>
<option>Firefox</option>
</select>
<br /><br />
<div class="testBox"></div>

HTML Select2 alignment with inline buttons

I'm fairly new to web programming. I'm trying to make a simple Select2 picker and then have buttons next to it. The problem i'm having is I cant seem to figure out how to get the "Clear" and "All" buttons to Align evenly with the top of the select2 picker.
I say aligned with the top because as I add more selections to the multipicker, it will grow vertically. So I'm trying to make the buttons center aligned with the picker while there is nothing or just one thing selected. I'm using some Velocity template code in there too but I'm pretty sure thats all ok. All of the AUI classes used for formatting is from Atlassian Jira. Here is a link to my
http://jsbin.com/lejixo/edit?html,output
JS Bin on jsbin.com
Any Suggestions??
<html>
<head>
<!-- External dependencies -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui-experimental.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//aui-cdn.atlassian.com/aui-adg/6.0.0/css/aui.css" />
<link rel="stylesheet" type="text/css" href="//aui-cdn.atlassian.com/aui-adg/6.0.0/css/aui-experimental.css" />
<!-- / External dependencies -->
</head>
<body>
<section id="content" role="main">
<div class="aui-page-panel">
<div class="aui-page-panel-inner">
<section class="aui-page-panel-content">
<form id="admin" class="aui" action="" method="POST" enctype="multipart/form-data">
<div class="aui-group">
<div class="aui-item">
<div class="field-group">
<label for="baseline">Baseline(s):</label>
<!-- Trigger -->
<script type="text/javascript">
AJS.$(function() {
var $exampleMulti = AJS.$("#baseline").auiSelect2({
placeholder: "All"
});
AJS.$(".js-programmatic-multi-set-val").on("click", function() {
$exampleMulti.val(["CA", "AL"]).trigger("change");
});
AJS.$(".js-programmatic-multi-clear").on("click", function() {
$exampleMulti.val(null).trigger("change");
});
});
</script>
<script>
console.log($baselineD.class.name);
</script>
<div class="input-group">
<select id="baseline" name="baseline" style="width: 170px" value="${baseline}" multiple="">
#foreach($baseline in $instance.getAllBaselines())
<option value="${baseline}">$baseline</option>
#end
#set ($listType = "java.util.ArrayList")
#if($baselineD.class.name == $listType)
#foreach( $bl in ${baselineD})
#if(${bl})
<option selected="selected">${bl}</option>
#end
#end
#else
#if ( $baselineD )
<option selected="selected">${baselineD}</option>
#end
#end
</select>
<div class="aui-buttons input-group-btn" role="group">
<button type="button" class="aui-button js-programmatic-multi-set-val btn btn-default">
All
</button>
<button type="button" class="aui-button js-programmatic-multi-clear btn btn-default">
Clear
</button>
</div>
</div>
</div>
<div class="field-group">
<label for="priority">Priority:</label>
<!-- Trigger -->
<script type="text/javascript">
AJS.$(function() {
AJS.$("#priority3").auiSelect2({
placeholder: "All"
});
});
</script>
<select id="priority3" name="priority" style="width: 170px" value="${priority}">
#if(${priorityD})
<option selected="selected">${priorityD}</option>
#end
##<option value="All">All</option>
#foreach( $priority in $instance.getPriorities())
<option value="${priority}">$priority</option>
#end
</select>
</div>
</div>
</div>
</form>
</section>
</div>
</div>
</section>
</body>
</html>
Add this CSS to this line and it will always stay centered to the right no matter if the height changed.
<div class="aui-buttons input-group-btn" role="group" style="margin-left:12px;position:absolute;top: 50%; transform: translateY(-50%);">
You can add this to a class or keep it inline as I did. I did it this way so you can see where to place it.
Also you can change the margin-left:12px; to whatever you want.

Jquery Mobile - events wont bind after using $.mobile.navigate

When I use $.mobile.navigate to change the page, the page will load but the my custom script won't bind to the elements. If I refresh the page, the custom script will load and bind to the elements. I have a select element to choose between pages:
<select name="calc-Nav" id="calc-Nav">
<option value="a.php">A</option>
<option value="b.php">B</option>
<option value="c.php">C</option>
</select>
This is the event bound to the select element:
$("#calc-Nav").on("change", function (e) {
var opt = $("#calc-Nav option:selected").val();
if (opt) {
e.preventDefault();
$.mobile.navigate(opt);
}
});
Also, I link to my javascript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
Does anyone have any ideas how to make this work?
thanks.
EDIT:
Here is the template used for all pages
This is the standard Template of each of the pages.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<body>
<div data-role="page">
<div data-role="header">
<div class="ui-field-contain">
<select name="calc-Nav" id="calc-Nav">
<option value="Index.php">Home</option>
<option value="a.php">a</option>
<option value="b.php">b</option>
<option value="c.php">c</option>
</select>
</div>
</div>
<div data-role="main" class="ui-content">
<div id="index">
<h1> Form goes Here. </h1>
</div>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="js/formulas.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</html>
you need to bind them to the document
try-
$(document).on("change","#calc-Nav", function (e) {
var opt = $("#calc-Nav option:selected").val();
if (opt) {
e.preventDefault();
$.mobile.navigate(opt);
}
});
also be sure to add the link to your custom script after the jqmobile script

Categories