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
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 just use Theme Roller and download the theme I couldn't implement it
I have tried to import files, however while I add an input for date picker it is still only textbox... How to use this I only need "Datepicker" What am I doing wrong ?
Appreciate any help.
<html>
<head>
<script src="~/Content/jquery.js"></script>
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Content/jquery-ui.min.js"></script>
<link href="~/Content/jquery-ui.structure.min.css" rel="stylesheet" />
<link href="~/Content/jquery-ui.theme.min.css" rel="stylesheet" />
<title>Test</title>
</head>
<body>
<div>
<input id="date" type="text" />
</div>
</body>
</html>
<script>
$(function() {
$('#date').datepicker();
});
</script>
These are enough to make the custom ThemeRoller work(and of course add the images)
<link href="~/jquery-ui.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Hope it will help to others who is seeking for jQuery UI Custom ThemeRoller Implementation.
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.
This is my code . It is the basic template found in the angular jqm github account . There seems to be some error in the imports . As there is not much code there except that .
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile.structure-1.3.2.min.css"/>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile.theme-1.3.2.min.css"/>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.3.2.min.css"/>
<script src="jquery/jquery-1.10.2.min.js"></script>
<script src="jquery/jquery.mobile-1.3.2.min.js"></script>
<script src="ang/angular.js"></script>
<script src="ang/angular-mobile.js"></script>
<script src="ang/angular-jqm.js"></script>
<script src="ang/angular-scrolly-docs.js"></script>
<script>
function TextController($scope) {
$scope.someText = 'You have started your journey.';
}
</script>
<script src="app.js"></script>
</head>
<body ng-app="app" jqm-caching-view >
<div jqm-page>
<div jqm-header>
<h3>Header</h3>
</div>
Hello
<p>{{someText}}</p>
<div jqm-footer>
<h3>footer</h3>
</div>
</div>
</body>
This is the output:
Neither the angularjs is working nor the JQM .
What's in your app.js file?
First of all, you need something like "var myApp = angular.module('app', ['jqm']);" to make your app use angular-jqm.
Secondly, you need ng-controller (or routing code) to hook up the TextController to the current page.