Develop Reference

Select2 and Meteor.js how to?

I've only been using javascript / jquery and meteor for a couple of weeks now, so forgive me for asking what will be a simple question.
I'm trying to use Select2 in my Meteor.js app, and can't figure out how to get it working. I have installed natestrauser:select2 in my project and my jsfiddle shown just won't work. https://jsfiddle.net/jt0jr9uk
Template.createjob.onCreated( function() {
$("clientlist").select2({
placeholder: "Select a client",
allowClear: false,
});
});
And html:
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<select id="clientList" class="form-control">
<option value=""></option>
<option value="aberfitch">Abercrombie & Fitch</option>
<option value="bent">Bentley</option>
<option value="barb">Barbour</option>
<option value="dcsh">DC Shoes</option>
<option value="echo">ECHO United</option>
</select>
I'm using bootstrap also. Which I've added to my project. And basically I just want the single select box as shown here https://select2.github.io/examples.html#single
Should I be using any imports, or anything?

So first of all, on js level you tried to select an id, named clientlist
Template.createjob.onCreated( function() {
$("clientlist").select2({....
However, on html level, your id is defined in camelCase
<select id="clientList" class="form-control">
Second of all, when you select an id, you should use # sign before the id, what I mean is your jquery should look like this to achive the desired result:
Template.createjob.onCreated( function() {
$("#clientList").select2({
placeholder: "Select a client",
allowClear: false,
});
});
You need to import jquery on top of the document if you use meteor >1.3 as
import { $ } from 'meteor/jquery';
As a final suggestion, I would use Template.createjob.onRendered() instead for Template.createjob.onCreated()
The template rendered callback is fired after the DOM is rendered on
screen. The created callback is fired when the Template is
instantiated but not yet rendered
Check the following link for the full explanation https://stackoverflow.com/a/28783762/7235661

Dynamically adding checkboxes to multiselect dropdown

I have been stuck on this problem for hours and I am going mad ! I need a dropdown of checkboxes - which I populate dynamically into a select tag. I also need to append each multiselect dropdown that I deep-clone with jquery to a number of <div> elements. However, every time I do this the cloned element is rendered as a list of multiselectable items (and not as a dropdown and loses all its styling). This is the multiselect container that I would like to add my checkboxes to:
<select class="multiselect1" multiple="multiple">
</select>
I finally initialize each cloned dropdown by calling .multiselect(); The library I am using for this is: http://davidstutz.github.io/bootstrap-multiselect/
$('.multiselect1').multiselect();
var filterClone = $('.multiselect1').clone(true);
//filterClone.multiselect();
$('body').append(filterClone[0]);
When the above lines execute, the select element is indeed present in the body but is invisible. When I remove the style attribute the element becomes visible but is rendered as a list of multiselectable items (which is expected). But why is the cloned multiselectable dropdown not displayed at all in the first place ?
Any suggestions that could lead me to a solution (or the solutions itself!) using javascript or jquery would be most appreciated.

Well to make this work you need JQuery. Did you include JQuery? If you didn't you can use this: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> Did you upload all the files to your server?
Try this code on your website. Does it work?
HTML:
<select id="SOExample" multiple="multiple">
<option value="Love it!">Love it!</option>
<option value="Hate it!">Hate it!</option>
<option value="I don't know...">I don't know...</option>
</select>
JS:
<script type="text/javascript">
$(document).ready(function() {
$('#SOExample').multiselect();
});
</script>

Bootstrap Selectpicker will not reset using built-in functions

I have an array of Bootstrap Selectpickers for filtering results from a database. I need a way of resetting all the selectpickers to 'Nothing Selected', this is my code:
HTML
<div class="row">
<div class="col-md-3">
<label>By Group</label>
<select id="groups" name="group" class="form-control selectpicker" multiple></select>
</div>
<div class="col-md-3">
etc...
</div>
</div>
JS
ajax_fetch('build_group_options', {groupno:groupno}).done(function(html) {
//var html is a list of options in html format
$('#groups').html(html).find('option[value=""]').remove();
//refresh the selectpicker to make sure options are registered in the picker
$('.selectpicker').selectpicker('refresh');
});
Try to reset all the pickers:
$('#reset_filters').click(function() {
$('.selectpicker').selectpicker('deselectAll');
$('.selectpicker').selectpicker('render');
$('.selectpicker').selectpicker('refresh');
$(this).closest('form').find('.selectpicker').each(function() {
$(this).selectpicker('render');
});
});
As you can see I have tried all the functions to reset but to no avail so am obviously doing some wrong further up the logic.

I got solution from following code.Try it
$("#listID").val('').trigger('change');
And also you can try this
$("#listID").val('').selectpicker('refresh');

Maybe it's a little late, but maybe it'll help someone someday. For me the solution was this:
$("#listID").val([]).selectpicker('refresh');
I had the multiselect option and with this you replace your chosen items for an empty array, otherwise you'll choose the option where the value is empty val('').

So I looked in the selectpicker.js file, the deselectAll and selectAll functions both filter their respective options by a few arguments (see line 884):
deselectAll: function () {
this.findLis();
this.$lis.not('.divider').not('.disabled').filter('.selected').filter(':visible').find('a').click();
}
A little breakdown:
.not('.divider') //prevents the divider receiving a click event!
.not('.disabled') //ignore any disabled elements
.filter('.selected') / .not('.selected') //depending if its selectAll() or deselectAll()
.filter(':visible') //prevent any non-visible element receiving a click event!?
My problem was the .filter(':visible'), the list was not visible when the click event was triggered so these options were filtered out and therefore did not get 'clicked'/'deselected'.
I amended my version of the plugin and now my 'reset' button works as expected. The new line is:
this.$lis.not('.divider').not('.disabled').filter('.selected').find('a').click();

Sort order for ecommerce page using javascript (a/b-test)

Can javascript help me change the default sort order for an ecommerce category page? I'm running an a/b-test, and in the variation1 I'd like to have the sorting option "Newest" as the page default instead of "Most Popular". What kind of Javascript would change the sort order when the page is loaded?
The select ID's are as follows, currently the "Most Popular" is the default:
<select id="all-sort" class="ordering-select " name="sortAllProducts">
<option value="name.asc">Name (asc)</option>
<option value="name.desc">Name (desc(</option>
<option value="discountedPrice.asc">Min Price</option>
<option value="discountedPrice.desc">High Price</option>
<option value="lastStatusChange.desc">Newest</option>
<option value="viewCount.desc" selected="selected">Most Popular</option>
</select>
I tried changing the html-code (selected="selected") from Most popular to the "Newest" option using the the a/b-testing tool (visual website editor), but it didn't work, Most popular was still loaded as default. I think a Javascript is needed to load the code-change in the a/b-testing tool overriding the current default?
I'd really appreciate help, and I'm very sorry if this is an silly question, that has been answered a million times :/
I also tried looking for solutions and found couple of similar questions, but those unfortunately didn't give me the answer. I'm not very tech savy.
Javascript to sort contents of select element
How to show <Select > in sorted order (this was very close, but I didn't get it working).
Thanks!

Try:
$(function(){
$("#all-sort")[0].selectedIndex = 4;
});
Working fiddle: http://jsfiddle.net/fyL2efom/

How to resolve a conflict between bootstrap.js and angularjs for angular lists

This is my html code
<div class="form-group">
<select ng-model="modSelectedState" id="selectState" name="selectState"
ng-options="state as state.full_name for state in states">
<option value="">Select State...</option> </select>
</div><!-- /.form-group -->
It renders as expected until i add this line to my code:
<script type="text/javascript" src="scripts/bootstrap/js/bootstrap.min.js"></script>
At which point all i see when i render the page is the default option ("select state"). When I remove bootstrap.js everything renders as expected - that is I see the list of all states.
This is how I load the code in the controller
$http.get('./data/states.js').success(function (data) {
$scope.states = data.locations;
});
states.js is stored locally.
I have some other angular elements on the page and they all work fine. I also tried to play with the loading order (i.e. load bootstrap before angular and vice versa) but the result is the same - the list renders fine without bootstrap and it doesn't render with bootstrap.
Is there any known conflict between those two libraries when it comes to binding lists? Is there any known workaround?

You need to use controls specially prepared to work with bootstrap and angular... otherwise you will not only get this type of unexpected issues, but you'll get other type of issues based on the fact that you are trying to make your own implementations when there already exist validated ways of working with javascript libraries. Best regards.