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
Related
I need to display two select lists with the same options (there are many).
I have the index.html:
<body>
<select class="c_select1"></select>
<select class="c_select2"></select>
</body>
and in another html file (options.html) all the options (only the options):
<option value='AED' title='United Arab Emirates Dirham'>AED</option>
<option value='AFN' title='Afghan Afghani'>AFN</option>
<option value='ALL' title='Albanian Lek'>ALL</option>
<option value='AMD' title='Armenian Dram'>AMD</option>
<option value='ANG' title='Netherlands Antillean Guilder'>ANG</option>
...
<option value='AOA' title='Angolan Kwanza'>AOA</option>
<option value='ARS' title='Argentine Peso'>ARS</option>
<option value='AUD' title='Australian Dollar'>AUD</option>
<option value='AWG' title='Aruban Florin'>AWG</option>
<option value='AZN' title='Azerbaijani Manat'>AZN</option>
Then, using jQuery, I load options inside the two select tags with the same instruction with different class selector:
$(".c_select1").load("options.html");
I'd like to display as default selected option two different values (since I need to show a currency converter).
I've tried in 2 different ways, but any of these works fine (I show the code for just one).
<script type="text/javascript">
$(".c_select1").load("options.html");
$(".c_select1 option[value=ARS]").prop("selected", true);
</script>
or
$(".c_select1").val("ARS");
I don't know why, but I think there is a problem with the .load() of jQuery.
The only solutions that work are 2:
set a timer and execute the second jQuery statement after this timer
use 2 different options.html files one for each select tag, but I think it is not so clever.
Is there a better way to do this dynamically?
Try this:
$(".c_select1").load("options.html", function(){
$(".c_select1").val("ARS");
});
Explained:
The .load() jQuery method requires some time to get the contents of options.html (even if its just a few milliseconds). The browser doesn't wait for it before continuing to run the rest of the javascript logic. The function(){ I added to your .load( method call is some javascript logic that runs AFTER the results have returned (aka a "callback").
Use a callback :
$(".c_select1").load("options.html", function() {
$(".c_select1").val("ARS");
});
$(".c_select2").load("options.html", function() {
$(".c_select2").val("ARS");
});
Actually there is a delay of load method that is why selected item is not working. Like #Joulss said use callback method that should work. You can see the here.
$(function(){
$(".c_select1").load("option.html", function() {
$(".c_select1").val("AFN");
});
$(".c_select2").load("option.html", function() {
$(".c_select2").val("ANG");
});
});
Demo
I am using Django Model field values inside a Javascript file by using the following code:
var action_type =$('#id_strength').val();
Here strength is a Charfield.
But the same doesn't work for a ManytoMany Field
var action_type =$('#id_batches').val();
Batches:
When I viewed the source code, the HTML looks like this:
<div class="related-widget-wrapper">
<select name="batches" data-field-name="batches" multiple="multiple" id="id_batches" data-is-stacked="0" class="selectfilter">
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
So I did some digging and was finally able to get the JQuery to access the field. Since it is a ManytoMany select field, I just had to treat the batches as a select field.
var action_type = []
$("#id_batches").each(function(name,val) {
action_type.push(val.value);
});
Thanks Daniel Roseman for pointing me to right direction
I am new in materialize CSS framework and I am looking for searchable select.
I have added select component but now I want it to be searchable so that user can search value from dropdown options and select the value.
Thanks in advance
Another solution to this problem is to set minLength:0 when using Autocomplete - this essentially triggers the dropdown options on focus, and allows for searching or selecting.
The HTML:
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>
The JS:
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, {
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
minLength: 0,
});
Codepen here.
I have been searching for this option for quite a while. After digging deeper into materialize Git Hub threads found this answer from LeMinaw
he got everything nailed out. but he was using a custom materialize file and also it wasn't working on the mobile. So, I have modified the code to fix mobile issue. Please use import the following script file after you imported the Materialize.js file MaterilizeSelect.js.
and format your select as following
<div class="input-field col s6">
<select data-id="26" id="MySelct" serachname="myselectsearch" searchable="your placeholder for seach box">
<option value="some1">Some One</option>
<option value="SeamSeam">SeamSeam</option>
<option value="toott">Toott</option>
<option value="Flat">Flat</option>
</select>
<label for="roof_type">My Select</label>
</div>
serachname --> A meaning fullname for search box
searchable --> placeholder your search box(label)
Hope this helps. Once again thanks to LeMinaw
There is an open issue on github.
LeMinaw's solution:
Improvements :
No need to modify Materialize JS files Grabs keyboard focus nicely No
need for annoying JQuery Renders correctly for any widget width Demo
The code is avalaible in this gist :
https://gist.github.com/LeMinaw/52675dae35531999e22f670fb66d389b
To use it, just load this JS file and add searchable="placeholder" to
your select element.
Materialize's search option just isn't great. You could work with these to try to "fix" it, but you're better off just utilizing a better select javascript package, like Select2, which does all this easily. https://select2.org/getting-started/installation
I use materialize for lots of things, but always strengthen it with Select2 (and some other form UI libraries).
I have ui-select2 dropdown that depends on the selection of a parent. I have a array of options for the first ui-select2, then when something is selected from that dropdown, the next dropdown will appear. The available options for the 2nd dropdown will depend on what is selected in the first dropdown. The ng-repeat directive is iterating over an array of choices. Here is the html and the js code.
HTML:
<select name="application" placeholder="Select a Tenant"
ng-disabled="!sharedObj.tenantApplications ||
sharedObj.tenantApplications.length == null"
class="form-control" id="application"
ng-change="vmOrderItem.vmNameUSI=null" ui-select2
ng-model="vmOrderItem.tenantApplication" title="Select tenant application"
data-style="btn-default" required><option></option>
<option ng-repeat="tenantApplication in sharedObj.tenantApplications |
filter:tenantFilter()" value="{{tenantApplication.id}}">{{tenantApplication.name}}
</option>
</select>
JS:
/** Filters the tenant depending on what domain is selected */
$scope.tenantFilter = function(tenantApplication) {
$scope.sharedObj.tenantApplications;
tenantApplication.name;
tenantApplication.id;
return true;
/* return $scope.vmOrderItem.domain.id == tenantApplication.domainId;*/
}
The issue I get is that even if I return true, nothing ever shows up on the dropdown. I did this to test the logic. I don't know why the tenantApplication parameter is always undefined in the function. I used google chrome inspect element to insert a breakpoint and it complains that the argument is undefined. But I don't see why it wouldn't work properly when I return true. I'm a newbie to JavaScript and AngularJS so any help is greatly appreciated. I've worked through all the AngularJS examples and read their docs but I'm still just a beginner.
Think this should be:
<option ng-repeat="tenantApplication in sharedObj.tenantApplications |
filter:tenantFilter" value="{{tenantApplication.id}}">
I am trying to instantiate a multi-select box with Meteor JS and Select2. My html resides in a template as follows:
<template name="selectbox">
<select id="testbox">
<option value="AL">Alabama</option>
<option value="AL">Washington</option>
</select>
</template>
Within my client js I have the following code:
Template.selectbox.rendered = function(){
var options = { allowClear : true, multiple : true }
$("#testbox").select2(options);
};
Unfortunately my browser's console produces the following error:
Exception from Deps afterFlush function: Error: Option 'multiple' is not allowed for Select2 when attached to a <select> element.
I have also tried placing the following code directly in my client js file (as well as within Template.selectbox.create):
$(document).ready(function(){
var options = { allowClear : true, multiple : true }
$("#testbox").select2(options);
});
Unfortunately I receive the same error. The peculiar thing is I receive no error if my options are simply:
var options = { allowClear : true, placeholder : 'test' }
Neither option appears to take affect. However, The rendering of the select box is that of selct2.
Any idea what could be the issue? Thanks in advanced.
See how the example on select2 website is made. According to that code, you should add multiple attribute to the select tag, not to js method parameters.
So in your template replace <select id="testbox"> with <select multiple id="testbox">.