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">
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 am working on CS50 Week8 problem set. In the following code, I have a dropdown list and a button, and the link embedded in the latter depends on the former. For some reason the button gets automatically clicked without being intended. Any idea why this is going wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Justin's Homepage</title>
</head>
<body id="homepage">
<h1 id="welcome">Welcome to Justin's Homepage!</h1>
<p class="p1">Where would you like to travel next?</p>
<select class="p1" id="location">
<option value="interlaken">1. Interlaken</option>
<option value="hokkaido" selected>2. Hokkaido</option>
<option value="croatia.html">3. Croatia</option>
</select>
<div id="confirm">
<form>
<button class="p1" type="button" onclick="gotosite(); return false">Confirm!</button>
<script>
var location = document.getElementById("location").value;
function gotosite(){
location.href(location + ".html");
}
</script>
</form>
</div>
</body>
</html>
You need the get the value of the select field when someone clicks on the Submit button not on loading the page so you should keep the value getting logic inside the function.
I have also updated the window.location.href thing, have a look.
This is working snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Justin's Homepage</title>
</head>
<body id="homepage">
<h1 id="welcome">Welcome to Justin's Homepage!</h1>
<p class="p1">Where would you like to travel next?</p>
<select class="p1" id="location">
<option value="interlaken.html">1. Interlaken</option>
<option value="hokkaido.html" selected>2. Hokkaido</option>
<option value="croatia.html">3. Croatia</option>
</select>
<div id="confirm">
<form>
<button class="p1" type="button" onclick="gotosite()">Confirm!</button>
<script>
function gotosite(){
window.location.href = document.getElementById("location").value;
}
</script>
</form>
</div>
</body>
</html>
The button is not being clicked.
<script>
var location = document.getElementById("location").value;
location is a predefined variable in the global scope. You can't redeclare it there. Your assignment is going straight to the existing global location.
Since that line of code is outside of any function, it executes immediately.
It indeed is what Quentin said.
You can fix it by using the code from the example above, or look at my example.
It is a little bit different.
The main difference is that I've placed the script just before the body closes.
And I did not use an onclick attribute on the button.
Instead I used an eventListener attached to your button. I prefer the eventListener as it does not nead to live inside the html.
You can simply create a js file scripts.js (<script src="scripts.js"></script>) and insert this code inside.
The advantage is that you only need to have this code once while you can have the same functionality on multiple pages.
Please note that I've also removed the <form> around the button. The reason for this is that you don't need it. You did add the type="button" which marks this button as simply a button instead of a form submit, so the form won't submit a GET request to itself, but as I've learned years ago; less is more.
Of course there is plenty more to tell and help you with, but I hope this gives you some insight in other ways to fix the same issue.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Justin's Homepage</title>
</head>
<body id="homepage">
<h1 id="welcome">Welcome to Justin's Homepage!</h1>
<p class="p1">Where would you like to travel next?</p>
<select class="p1" id="location">
<option value="interlaken.html">1. Interlaken</option>
<option value="hokkaido.html" selected>2. Hokkaido</option>
<option value="croatia.html">3. Croatia</option>
</select>
<div id="confirm">
<button class="p1" type="button" >Confirm!</button>
</div>
<script>
document.querySelector('button').addEventListener('click', () => {
window.location.href = document.getElementById("location").value
});
</script>
</body>
</html>
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 having a problem getting a dropdown image menu to display properly in my browser.
The code is as follows
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<style>
#webmenu{
width:340px;
}
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() { // makes sure the whole site is loaded
$("body select").msDropDown();
})
</script>
<select name="webmenu" id="webmenu">
<option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option>
<option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option>
<option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option>
</select>
</body>
</html>
I found the original code on github at http://jsfiddle.net/GHzfD/357/ but have not been able to reproduce it - am I making some kind of fundamental mistake?
The page is live at http://www.datatrouble.com/jquery_test.html
Missing msdropdown plugins
msdropdown and css
Include this code befor you call msdropdown
<link rel="stylesheet" href="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/css/msdropdown/dd.css">
<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>
in jsFiddle these external links are included too on the left panel here is snapshot .
Also read What is the difference between $(window).load and $(document).ready?
Update after OP's comment
You are placing msdropdown plugin before you have included jQuery file .
msdropdown is a jQuery plugin so jQuery file must be added before the plugin script is called.
So it should look like this:
put your scripts at bottom of the page and css at the top to improve page load speed.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body select").msDropDown();
});
</script>
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