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.
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'm trying to understand the Web Components, so I want to create a web component that would "wrap" a select tag into the select2.
Here's my main HTML:
<html>
<head>
<title>Web components</title>
<meta charset="utf-8"></meta>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/select2-select.html"></link>
</head>
<body>
<div>
<select2-select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select2-select>
</div>
</body>
</html>
And my custom element:
<link rel="import" href="../bower_components/polymer/polymer.html"></link>
<polymer-element name="select2-select">
<template>
<select id="main">
<content></content>
</select>
</template>
<script>Polymer({});</script>
</polymer-element>
The problem is, the option tags aren't being inserted in the shadow DOM:
What am I doing wrong? I'm running Firefox on Ubuntu 14.04.2, if it's anyhow relevant.
Thank you very much.
Yeah that happens, the easiest way around it is to use attributes. I've amended your original script to make it work.
Main html:
<html>
<head>
<title>Web components</title>
<meta charset="utf-8"></meta>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/select2-select.html"></link>
</head>
<body>
<div>
<select2-select options='[
{"value":"1","text":"1"},
{"value":"2","text":"2"},
{"value":"3","text":"3"},
{"value":"4","text":"4"}
]'></select2-select>
</div>
</body>
</html>
custom element:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="select2-select" attributes="options">
<template>
<select id="main">
<template repeat="{{option in options}}">
<option value={{option.value}}>{{option.text}}</option>
</template>
</select>
</template>
<script>
Polymer('select2-select', {
publish: {
options: {},
}
});
</script>
</polymer-element>
The first thing I can think of is that JQuery & Select2 are not accessible to the element because you have added them to the global scope. As per The Golden Standard Expressed Dependencies section Web Components should be responsible for their own dependencies.
The other thing to look at is that some HTML elements will only render inside other specific elements. For example - If I add option tags to div, they will not render unless they are wrapped in a select tag.
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.
I have a piece of code which works fine in Angular 1.2 without including Bootstrap, but when I use the selectpicker class of Bootstrap the data binding is not happening. Below is the piece of demo code.
<html ng-app>
<head>
<script src="assets/js/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/bootstrap-select.js"></script>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-select.css" rel="stylesheet" />
<link href="assets/css/main.css" rel="stylesheet" />
<link href="assets/css/styles.css" rel="stylesheet" />
</head>
<body>
<div ng-controller='Contact'>
<select class="selectpicker" ng-model='selected_person' ng-options='person.name for person in people'>
<option value="">Choose option</option>
</select>
<br>
Selected name = {{selected_person.name}}
</div>
<br>
<script>
$('.selectpicker').selectpicker();
function Contact($scope){
$scope.people = [
{name:"Abc",number: 65},
{name:"Xyz",number: 75},
{name:"Pqr",number: 85}
];
}
</script>
</body>
</html>
You don't want to have have some jQuery in a file and some AngularJS in another file, usually. If jQuery creates elements etc, they probably won't be picked up by angular.
The correct solution is to use an Angular directive. Here, it looks like somebody made one for you.
angular-bootstrap-select
this is what i got for you, the question asked in stackoverflow the same answer I copied for you see here docs download here