I am trying to implement a nice multi select field by using the loudev multi-select.js I followed the steps on the page, but nothing happens - only a normal multiple <select> is shown. The paths to multi-select.css and jquery.multi-select.js are OK.
I can't figure what's wrong:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="/css/multi-select.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<select multiple="multiple" id="my-select" name="my-select[]">
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
<option value='elem_100'>elem 100</option>
</select>
<script src="/js/jquery.multi-select.js" type="text/javascript"></script>
<script>
$('#my-select').multiSelect({});
</script>
</body>
</html>
The code above is working perfectly fine. You need to click on the CTRL key and make multiple selections. Do you want to see the selected items in a separate box on the right as shown on the developer's website ?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="css/multi-select.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<select multiple="multiple" id="my-select" name="my-select[]">
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
<option value='elem_100'>elem 100</option>
</select>
<script src="js/jquery.multi-select.js" type="text/javascript"></script>
<script>
$('#my-select').multiSelect({});
</script>
</body>
</html>
I think you made a slight mistake in the placement of the css and js files. Note that I removed the leading slash in front of the JS and CSS file and it is working fine for me. I assume you have the following directory structure
HTML file
js/ js file inside here
css/ css file inside here
Well I found my problem - it's because I'm using https:// to load the page. In such case the links to jQuery should be also https otherwise the browser ignores them:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
Thanks to Rahul Kadukar and his answer to point me that the code is overall OK.
Related
I'm trying to use bootstrap-multiselect to get a multi-select dropdown on my web page.
I've created a minimal example, the code of which is below. When I run this I get a single 'old-style' looking button on the page, which does nothing when it is clicked. I was expecting one of the bootstrap-multiselect dropdown multiselects.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
crossorigin="anonymous">
</script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet"
type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
type="text/javascript">
</script>
</head>
<body>
<select id="example-getting-started" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<script type="text/javascript">
$(document).ready(function () {
$('#example-getting-started').multiselect();
});
</script>
</body>
</html>
What am I doing wrong?
Problem is in versions you use.
Bootstrap is supported up to version 4 since they have migration guide just up to v4
And also, as I can see, rawgit version that you use is not the same as the latest version.
Here is the version that uses js and css from their page and it works fine.
If you need it to work with v5 then you can use it like this
$('#example-getting-started').multiselect({
buttonClass: 'form-select',
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
}
});
And you also need to use bundle version of bootstrap which contains popper.js
Here is example
I got many jQuery plugin, but when I tried in my bootstrap project , it is not working. Could you please suggest me Bootstrap multiselect drop-down with checkbox in JSP examples with source code.
I am using below code..it is not working in my template. It is showing simple drop down only.
<select id="lstFruits" multiple="multiple">
<option value="1">Mango</option>
<option value="2">Apple</option>
<option value="3">Banana</option>
<option value="4">Guava</option>
<option value="5">Orange</option>
</select>
<input type="button" id="btnSelected" value="Get Selected" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#lstFruits').multiselect({
includeSelectAllOption: true
});
});
</script>
The code sample (edited, latest) above appears to work properly for me. Note that the Bootstrap Multiselect plugin recommends jQuery 2.x or 1.10.x; you are using 1.8.3.
Also, the wrapping $(function() { ... }); is likely not necessary for what you are trying to accomplish.
I have a scenario of two different files where I need to load one html in another.
iframe.html:
<select data-placeholder="Choose a Country..." class="flexselect">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Algeria">Algeria</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
</select>
<iframe src="index.html" style="width:100%; border: 0px solid #fff;"></iframe>
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://rmm5t.github.io/jquery-flexselect/flexselect.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-1.6.4.js" type="text/javascript"></script>
<script src="http://rmm5t.github.io/jquery-flexselect/jquery.flexselect.js" type="text/javascript"></script>
<script src="http://rmm5t.github.io/jquery-flexselect/liquidmetal.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select.flexselect").flexselect();
});
</script>
</body>
</html>
It doesn't show any error at the same time its not working too. What I have observed is that its not getting triggered on the select tag which is above the iframe tag.
It works if I keep the select tag content in the index.html page, but there the iframe is not allowing to display the full dropdown content. It is getting restricted to certain height & allowing to scroll.
So I can't keep select tag in the iframe, it should be out of the iframe.
How can we make it workable?
You should know , How communication between iframe and parent window works.
Below code you can use to call parent window method.
window.parent.functionName();
I am working with dojo 1.6 and created a page containing only a combobox.
When I run it on Firefox 3.5 it works and all the theme related things and functionality of dojo is working fine.
But in Firefox 3.6 and chrome latest, theme and functionality(autosearch) of combobox is not working.
Here is my code:
<head>
<script type="text/javascript" src="dojo/dojo.js" djconfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.Button");
</script>
<link rel="stylesheet" type="text/css" href="dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="dijit/themes/tundra/form/Common.css" />
<link rel="stylesheet" type="text/css" href="dijit/themes/tundra/form/Button.css" />
</head>
<body class="tundra">
<p>Combox Box</p>
<select dojoType="dijit.form.ComboBox" id="fruit" name="fruit">
<option> Apples </option>
<option> Apricot </option>
<option> Aarro </option>
<option selected> Oranges </option>
<option> Pears </option>
<option> Mango </option>
<option> Banana </option>
</select>
<button dojoType="dijit.form.Button" type="button">Click Me</button>
</body>
Works fine in every browser... if accessed via http://, and not locally with file://. Try to view your page via http, either by uploading it to a remote server, or by using a local LAMP installation (XAMPP is great for development, and only runs when you explicitly request it to do so, so won't bog your system).
PS - I don't think you need these two lines:
<link rel="stylesheet" type="text/css" href="dijit/themes/tundra/form/Common.css" />
<link rel="stylesheet" type="text/css" href="dijit/themes/tundra/form/Button.css" />
because these are automatically loaded for you.
why does the following code don't focus the filteringselect?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://yandex.st/dojo/1.6.0/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<style type="text/css">
#import "http://yandex.st/dojo/1.6.0/dijit/themes/claro/claro.css";
</style>
<script type="text/javascript">
<!--
dojo.require("dijit.form.FilteringSelect");
dojo.addOnLoad(function(){
dijit.byId('dept').focus();
});
-->
</script>
</head>
<body class="claro">
<select name="dept" id="dept" dojoType="dijit.form.FilteringSelect" >
<option value=""></option>
<option value="test">test</option>
<option value="test1">test1</option>
</select>
</body>
</html>
I tried it with ie7 and firefox 3/4 - it works.
but it fails in ie8 :-(
may this be a dojo bug - or am I doing something wrong?
when does dojo.addOnLoad() fire? after the DOM is ready, or after all widgets have properly been initalized?
regards
gerhard
it's very intresting bug.. i have made small research and found solution. maybe it looks like a "dirty hack", but still it can help you.
you can simply add timeout:
dojo.addOnLoad(function () {
setTimeout(function () { dijit.byId('dept').focus() }, 400);
});
Not noticeable by a user but it gives IE a moment to breathe.
It's work in IE8 for me
I'm not sure what browsers fully support this, but you could try:
<select name="dept" id="dept" dojoType="dijit.form.FilteringSelect" autofocus>
Also, I don't see why you're using an Import statement if you could just use the link tag:
Before:
<style type="text/css">
#import "http://yandex.st/dojo/1.6.0/dijit/themes/claro/claro.css";
</style>
After:
<link rel="stylesheet" type="text/css" href="http://yandex.st/dojo/1.6.0/dijit/themes/claro/claro.css">