I am trying to use Select2 and Chrome is refusing to execute the script because the mimetype is text/html. I am using 4.0.3. Here is my html:
<link href="static/js/common/select2/css/select2.min.css" rel="stylesheet" />
<script src="static/js/common/select2/js/select2.js"></script>
<script src="static/js/controllers/common/SelectAgency.js"></script>
<select id="auto"></select>
The code for SelectAgency.js is this:
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$("#auto").select2({
placeholder:'Test'
})
The select box appears, but it does not contain anything. Also this message appears in the console
select2.min.js:233 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/foiaonline/action/public/request/static/js/common/select2/js/static/js/controllers/common/select2/css/select2.min.css".
I was using an older version of select2(3.5.1). In 3.5.1 select2 is initialized with:
$(panel).select2({
placeholder:placeholderStr,
data: items
});
<input id="panel" type="text", class="auto"/></td>
Related
How can I change my jQuery autocomplete to use an Id instead of my values?
I would like to display the list of names but send a search using the Id value. Now it is working properly with the names but I think it will be more effective if it tries to find a unique value as an ID.
$.getJSON('Dashboard/CompaniesWithId', function (data) {
$.each(data, function (i, item) {
sellers[i] = item.Name;
sellersID[i] = item.Id;
});
}).error(function () {
console.log("error loading seller to the autocomplete");
});
$("#searchSeller").autocomplete({
messages: {
noResults: 'No sellers with this name',
},
minLength: 2,
delay: 500,
source: sellers,
});
you can add a hidden field and use the on select event to set the value of the hidden field to the selected id
http://api.jqueryui.com/autocomplete/#event-select
you can also use selection data with format [{value: 'value', label: 'label'}] but using this way, the field will show the id instead of the label
var availableTags = [
{id: 1, label: "ActionScript"},
{id: 2, label: "Ruby"},
{id: 3, label: "Scala"},
{id: 4, label: "Scheme"}
];
availableTags2 = [
{value: 1, label: "ActionScript"},
{value: 2, label: "Ruby"},
{value: 3, label: "Scala"},
{value: 4, label: "Scheme"}
];
$( "#a" ).autocomplete({
source: availableTags,
select: function( event, ui ) {
$('#tosend').val(ui.item.id);
}
});
$( "#b" ).autocomplete({
source: availableTags2
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
id to send<br>
<input type="text" name="tosend" id="tosend"><br><br>
type below<br>
<input id="a"><br>
<br>
<br>
using value instead of id<br>
<input id="b">
I don't know anything about your back-end. But assuming it is accepting IDs for your search parameters, will changing the source value to sellersID resolve your issue? You also have that extra comma after sources. It will cause you problems.
$("#searchSeller").autocomplete({
messages: {
noResults: 'No sellers with this ID.',
},
minLength: 2,
delay: 500,
source: sellersID
});
Good day all.
I have a html page, page.html, which loads an iframe, called iframe.html.
I have Select2 into page.html and there is a <select class='selectme'> into iframe.html.
I'm using this js to fire Select2 FROM page.html:
var jFrame = function (selector) { return $(selector, $("iframe").contents()); };
OurBigWrapper = {
"setup":{
"init":function(){
console.log("wrapper,setup,init");
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
jFrame(".countries").select2(
{
data: data /*,
formatSelection : this.formatSelection.bind(this)*/
}
);
}
}
}
while on the iframe.html page the code is like this:
<select class="countries">
</select>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
parent.OurBigWrapper.setup.init();
});
</script>
What I obtain is that the Select gets the data properly, but once clicked, the select only "change" the little arrow on the right, indicating the "opened option panel" but no option actually shows up.
interesting enough, if I delete the select2 css, this is what I obtain:
and here, clicking on the select and selecting another option, is what I see:
someone has any kind of clue of what is going on and how I can prevent it to happen?
<script>
$(function ($) {
$("button").on("click", function (evt) {
var jFrame = function (selector) { return $(selector, $("iframe").contents()); };
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
jFrame(".selectme").select2(
{
data: data
}
);
});
})
</script>
</head>
<body>
<iframe id="myframe" src="iframe.html"></iframe>
<button type="button">click</button>
</body>
and
<body>
<select class="selectme"></select> i
</body>
</html>
I have the following code. The aim is to style a select2 box with textbox as the searchbox. So I have implemented it as multiselect , but I only want one option to be selected.
One option is to restrict using maximumSelectionLength: 1. But in this case the limit message will be shown which i do not want to happen. (Even if i hide it some space will be taken up ).
Other option is to hide everything other than last-child , in that case multiple values will be send to backend when form is submitted.
So is there a way to remove the currently selected value when the new value is selected in multiselect ?
I'm using select2 version 3.5.2
$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: true,
placeholder: "Click here and start typing to search.",
data: [
{ id: 1, text: "Honolulu" },
{ id: 2, text: "Tokyo" },
{ id: 3, text: "Delhi" },
{ id: 4, text: "Zurich" }
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/>
<h3>Select a value</h3>
<input type="text" id="placeSelect"/>
You can only keep the last selected item and remove all other. Like this way :
$('#placeSelect').click(function () {
var t = $("#placeSelect").val().substr($("#placeSelect").val().length - 1);
$("#placeSelect").val(t).trigger("change");
});
$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: true,
placeholder: "Click here and start typing to search.",
data: [
{ id: 1, text: "Honolulu" },
{ id: 2, text: "Tokyo" },
{ id: 3, text: "Delhi" },
{ id: 4, text: "Zurich" }
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/>
<h3>Select a value</h3>
<input type="text" id="placeSelect"/>
$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: false,
placeholder: "Click here and start typing to search.",
data: [
{ id: 1, text: "Honolulu" },
{ id: 2, text: "Tokyo" },
{ id: 3, text: "Delhi" },
{ id: 4, text: "Zurich" }
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/>
<h3>Select a value</h3>
<input type="text" id="placeSelect"/>
You are using a multi option select, I suggest you to do the following:
multiple: false,
just add the following code in your query and it will work as you need it
$('ul.select2-choices').on("click", function() {
$("ul.select2-choices li .select2-search-choice-close").click();
});
I have a JSON array that looks something like this:
var mockArr = [
{activity: "That One Activity", due_date: "07/22/2016", address: "22 Jump Ln", id: "42"},
{activity: "That Other Activity", due_date: "07/25/2015", address: "123 Fake St", id: "43"}
];
and I'm trying to bind it to a kendo Scheduler widget, which is configured like this:
$("#scheduler").kendoScheduler({
date: new Date(),
height: 100,
views: [
{type: "day"},
{type: "month", selected: true},
{type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}"}
],
mobile: "phone",
timezone: "Etc/UTC",
allDaySlot:true,
editable: false,
dataSource: {
data: mockArr,
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "id", type: "number" },
title: { from: "activity" },
start: { type: "date", from: "due_date" },
end: {type: "date", from: "due_date"},
description: { from: "address" }
}
}
}
}
});
When I run the web applet the console spits out "TypeError: e is null", and I get a page that looks like this
But I get a working scheduler when I replace mockArr and the referencing model with a static SchedulerEvent such as:
var event = new kendo.data.SchedulerEvent({
id: 1,
title: "test event",
start: new Date("2016/7/22"),
end: new Date("2016/7/22")
});
Why doesn't the scheduler like my dataSource?
There are few reasons you are facing this issue.
The reason why page look like in the image you provided is because you specified height: 100 .Remove this line kendo framework handle it automatically and you can specify it later based on your need.
Your Json Array need to be formatted correctly. see the snippet in the code provided
The data Parameter in datasource expect a javascript object you need to parse it using this data:JSON.parse(mockArr),
I noticed that kendo does not allow to bind start/end parameter in the fields to same name like you used due_date so it need to be changed to
start:{ type: "date", from: "due_date" },
end: { type: "date", from: "due_date1" },
Other than this Your code work fine I have tested it.
The console error "web applet the console spits out "TypeError: e is null" sounds to be specific to java , i assume you are using java and that might be related to java framework.
Here is your live version of working code .
Navigate to Kendo UI online Editor and delete the pre-populated code and paste the code snippet provided below.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example">
<div id="scheduler"></div>
</div>
<script>
var mockArr ='[{"activity":"That One Activity","due_date":"07/22/2016","due_date1":"07/22/2016","address":"22 Jump Ln","id":"42"},{"activity": "That Other Activity", "due_date": "07/25/2016","due_date1":"07/25/2016","address": "123 Fake St", "id": "43"}]';
$("#scheduler").kendoScheduler({
date: new Date(),
views: [
{type: "day"},
{type: "month", selected: true},
{type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}"}
],
allDaySlot:true,
editable: true,
dataSource: {
data:JSON.parse(mockArr),
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "id", type: "number" },
title: { from: "activity" },
start: { type: "date", from: "due_date" },
end: { type: "date", from: "due_date1" },
description: { from: "address" }
}
}
}
}
});
</script>
</body>
</html>
In my select2, I use minimumInputLength option to start filtering after a certain length.
selectExample.select2({
minimumInputLength: 2
});
But after dynamically append new option with append() function, this minimumInputLength option is not working.
selectExample.append('<option value="10">Ten</option>');
What happened exactly? Is there a specific way to append new option for select2?
The current solution I use is redeclaring the .select2() with the minimumInputLength option included.
var dynamicOptions=[{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$("#select2").select2('data', dynamicOptions);
this is how you need to add options