I am using dojo.js to make dropdown box with scroll functionality, something not native to standard select statement.
I have managed to create the dropdown menu but I am having difficulty getting it to execute a function using the standard onchange attribute of the select statement. onchange = "updateData()" in this case.
Grateful for any help.
<html>
<head>
<title>drop down</title>
<link rel="stylesheet" href="d3/dijit/themes/claro/claro.css">
<script type="text/javascript" src="d3/d3.js"></script>
<script>dojoConfig = {async: true}; </script>
<script src='d3/dojo/dojo.js'></script>
<script src='d3/dijit/dijit.js' ></script>
<script>
var djConfig = {
isDebug: true}; </script>
<script type="text/javascript">
require(["dojo/widget/Select"]);</script>
<script>
require(["dojo/parser"], function(parser) {
parser.parse();});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
#dropdown{
font-size: 22px;
font-family: serif;
color: grey;}
</style>
</head>
<body>
<div class="claro">
<select
id="dropdown" data-dojo-type="dijit/form/Select" data-dojo-props="maxHeight:50"
style="width: 100px" onchange= "updateData()" >
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<script type="text/javascript">
//The following is used to reset the dropdown box to original value on pg refresh
document.getElementById("dropdown").selectedIndex = 0;
function updateData() {alert("hello")}
</script>
</body>
</html>
var dropDown = new Select({
name: "select2",
id: "projectDropDown",
onChange: function (value)
{
//console.log("project Id: ", this.get("value"))
reScopeProjectContext(value,satpcontext);
},
store: projectStore,
labelAttr: "name",
value: projectInContext,
}).placeAt(win.body()).startup();
The updatedata function is defined after the declaration of the select widget. This will not work
Try the below code.
<!DOCTYPE html>
<html>
<head>
<link href="dojo/dojo-release-1.9.3-src/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: true
};
</script>
<script type="text/javascript" src="dojo/dojo-release-1.9.3-src/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dojo/parser", "dijit/form/Select"],function(parser){
parser.parse();
});
function updateData(){
alert("Onchange function called");
}
</script>
</head>
<body class="claro">
<select name="select1" data-dojo-type="dijit/form/Select" onchange="updateData()">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</body>
</html>
Related
I want to load the image picker and hide the drop down select and only display images
I have tried with below code based on https://rvera.github.io/image-picker/
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://rvera.github.io/image-picker/image-picker/image-picker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">
</script>
</head>
<body>
<select multiple="multiple" id="image-picker-select" class="image-picker show-html">
<option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
<option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
<option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
<option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
</select>
<script>
$(document).ready(function() {
$('select').material_select();
$("select").imagepicker({
hide_select: true
})
});
</script>
</body>
</html>
The first issue is that you are getting a CORB blocking error due to your leeching of the raw.github domain for the imagepicker library.
So download the file into your project. To hide the selector you can simple initialize using:
$("select").imagepicker({
hide_select: true
});
var drag = document.getElementById("drag");
drag.onclick = function(e){
e.preventDefault();
}
#drag {
width: 50px;
}
<select id="drag" multiple="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
is it possible with javascript to stop the hold-select effect and make it a drag to change elements order in the list?
i tried to e.preventDefault() and to bind a draggable script in options but did not work
I don't think you can do that with select element :
Trying to change the code you provide making a simple one
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
script.js :
$("ul").on('click', 'li', function (e) {
if (e.ctrlKey || e.metaKey) {
$(this).toggleClass("selected");
} else {
$(this).addClass("selected").siblings().removeClass('selected');
}
}).sortable({
connectWith: "ul",
delay: 150,
revert: 0,
});
However you can use multiselect plugin ,a demo here
EDITED :
If you still want the select tag look you can use dragOptions
$(document).ready(function(){
$("#drag").dragOptions({
onDrag: function(){
console.log('onDrag callback: ', this);
},
onChange: function(){
console.log('onChange callback: ', this);
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>drag</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="form-group">
<select id="drag" size="5" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gitcdn.link/repo/NikitaKA/jquery.dragOptions/master/jquery.dragoptions.min.js" type="text/javascript" language="javascript"></script>
</html>
As you see when you drag an option an error occurs (maybe an issue))
If someone can tell me what's going wrong here i will appreciate that !
Hope that helps someone .
I am using "Bootstrap Select Plugin Jquery". How do I replace it with Select Jquery code.
I would like to choose the value of the example 2.
Desired result:
enter image description here
MY Code:
$(document).ready(function() {
$('select').selectpicker();
});
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
</head>
<body>
<select class="my-select">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Other</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap-select.min.js"></script>
</body>
</html>
$('.my-select').selectpicker('val', '2');
I am trying to develop an Image Picker following these tutorials http://jsfiddle.net/huanlin/mgvrc/ and http://rvera.github.io/image-picker/#
Here is the code I have tried so far
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Try Image Picker</title>
<link rel="stylesheet" type="text/css" href="image-picker.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="image-picker.js"/> </script>
<script type="text/javascript" src="image-picker.min.js"/> </script>
<script>
$(document).ready(function () {
$("#selectImage").imagepicker({
hide_select: true
});
var $container = $('.image_picker_selector');
// initialize
$container.imagesLoaded(function () {
$container.masonry({
columnWidth: 30,
itemSelector: '.thumbnail'
});
});
});
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<select id="selectImage" class="image-picker">
<option value=""></option>
<option data-img-src="o.png" value="1"> Image 1 </option>
<option data-img-src="aa.png" value="2"> Image 2 </option>
<option data-img-src="ee.png" value="3"> Image 3 </option>
</select>
<br>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
But no image is showing in the browser. All CSS, JS scripts and images have been linked properly. Can you suggest what am I doing wrong here?
This is jQuery plugin. I see it's missing in your html head.
How to check if select2.js has at least one option selected?
The code bellow shows the message 'Please select at least one item in the list.' even after selecting one item.
$('form.validate-form').validator({
disable: false
});
$( "select.validate" ).each(function() {
$(this).validator();
$(this).get(0).setCustomValidity('Please select at least one item in the list.');
});
How can I make the message 'Please select at least one item in the list.' disappear after selecting at least one option?
I am using Bootstrap validator plugin.
jsfiddle
SOMETHING LIKE THIS
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>
<style>
.mySelect {
width: 300px;
}
</style>
</head>
<body>
<form id="myform">
<select multiple="true" class="mySelect" name="item" required>
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<input type="submit" name='submit' value="Submit">
</form>
<script>
$(document).ready(function() {
$(".mySelect").select2();
$("#myform").validate(
{
rules:
{
item:
{
required: true
}
}
});
});
</script>
</body>
</html>