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
});
Related
I have a select on my page, for customization I use the selectpicker plugin. When the page loads, the area where the select should appear looks unacceptable for a while. How to display a select only when it has already been rendered by the selectpicker?
Codepen
$(function () {
$('select').selectpicker();
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Barbecue</option>
</select>
Try below code:
<select class="selectpicker" name="selectpicker">
<option value="mustard">Mustard</option>
<option value="ketchup">Ketchup</option>
<option value="barbecue">Barbecue</option>
</select>
$(function () {
var selected=document.getElementsByName('selectpicker');
console.log(selected);
});
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 use Bootsrap-select with Jquery for dynamic Dropdown values,but unable to use the Jquery append with Bootsrap-select. Although it is working perfectly with my Html (without using Bootsrap-select class )
Here is my complete code
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/i18n/defaults-*.min.js"></script>
</head>
<body>
<h5>typeOfGlass</h5>
<select id="typeOfGlass" class="selectpicker">
<option value="15">Standard/Annealed Glass Width</option>
<option value="20">Tempered Glass Width</option>
</select><br>
Glass Width<br>
<select id="glassWidth" class="selectpicker">
<option value="19">Select type of Glass</option>
</select>
<script>$('#typeOfGlass').on('change', function(){
console.log($('#typeOfGlass').val());
$('#glassWidth').html('');
if($('#typeOfGlass').val()==15){
$('#glassWidth').append('<option value="19">Standard</option>');
$('#glassWidth').append('<option value="20">Standard 2</option>');
}else{
$('#glassWidth').append('<option value="6">Tempered</option>');
$('#glassWidth').append('<option value="7">Tempered 2</option>');
}
});</script>
</body></html>
I am stuck at this. Please let me know what am I missing in this.
Thanks in advance
add one line after appending to refresh select box as
$('#glassWidth').selectpicker('refresh');
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/i18n/defaults-*.min.js"></script>
</head>
<body>
<h5>typeOfGlass</h5>
<select id="typeOfGlass" class="selectpicker">
<option value="15">Standard/Annealed Glass Width</option>
<option value="20">Tempered Glass Width</option>
</select><br>
Glass Width<br>
<select id="glassWidth" class="selectpicker">
<option value="19">Select type of Glass</option>
</select>
<script>$('#typeOfGlass').on('change', function(){
console.log($('#typeOfGlass').val());
$('#glassWidth').html('');
if($('#typeOfGlass').val()==15){
$('#glassWidth').append('<option value="19">Standard</option>');
$('#glassWidth').append('<option value="20">Standard 2</option>');
}else{
$('#glassWidth').append('<option value="6">Tempered</option>');
$('#glassWidth').append('<option value="7">Tempered 2</option>');
}
$('#glassWidth').selectpicker('refresh');
});
</script>
</body></html>
I'm trying to use a script I found searching around on SO to add a loading screen to a form submit request. My form submits to a php script that generates a report in an Excel file, and the file takes 20 seconds or so to be generated. I don't want my user submitting again or navigating away from the page in this time.
The script I'm using can be found here.
I think I have everything set up as needed according to the readme and even viewing the author's source, but the javascript isn't being triggered on the form submit event. The form just submits as usual. I know there's something simple I've got to be overlooking.
Here's my code.
<html>
<head>
<meta http-equiv="cache-control" content="no-store" />
<meta http-equiv="pragma" content="no-cache" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery.fileDownload.js" type="text/javascript"></script>
<script type="text/javascript" src="/Scripts/Support/shCore.js"></script>
<script type="text/javascript" src="/Scripts/Support/shBrushJScript.js"></script>
<script type="text/javascript" src="/Scripts/Support/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="/Content/shCoreDefault.css" />
<script type="text/javascript" src="/Scripts/Support/jquery.gritter.min.js"></script>
<link type="text/css" rel="stylesheet" href="/Content/jquery.gritter.css" />
</head>
<body>
<script type="text/javascript">
$(function(){
$(document).on("submit", "form.fileDownloadForm", function (e) {
$.fileDownload($(this).prop('action'), {
preparingMessageHtml: "We are preparing your report, please wait...",
failMessageHtml: "There was a problem generating your report, please try again.",
httpMethod: "POST",
data: $(this).serialize()
});
e.preventDefault(); //otherwise a normal form submit would occur
});
});
</script>
<form action="countsheet.php" method="post" class="fileDownloadForm">
<select name="sheet">
<option value="KeithDriveUnits">Keith Drive Units</option>
<option value="FlooringPg1">Flooring Page 1</option>
<option value="FlooringPg2">Flooring Page 2</option>
<option value="FlooringPg3">Flooring Page 3</option>
<option value="SpiratexCope">Spiratex & Cope</option>
<option value="AxlesTireMaxx">Axles & Tire Maxx</option>
<option value="ElectricalPg1">Electrical Page 1</option>
<option value="ElectricalPg2">Electrical Page 2</option>
<option value="ElectricalPg3">Electrical Page 3</option>
<option value="ElectricalPg4">Electrical Page 4</option>
<option value="ElectricalPg5">Electrical Page 5</option>
<option value="ElectricalPg6">Electrical Page 6</option>
<option value="ElectricalPg7">Electrical Page 7</option>
<input type="submit" value="submit"></input>
</body>
</html>
I want to include this : http://loudev.com/
I followed the steps but the code is not working. I also included jquery scripts because I suspect that might be required. I am not understanding where is the mistake.
Thanks!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<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>
<script src="something\jquery.multi-select.js" type="text/javascript"> </script>
<link href="something\css\multi-select.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript">
$('#my-select').multiSelect();
console.log("why");
</script>
</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_5'>elem 5</option>
<option value='elem_6'>elem 6</option>
<option value='elem_7'>elem 7</option>
<option value='elem_100'>elem 100</option>
</select>
</body>
</html>
on console I do get the "why" and there are no errors , then whats going wrong..why it is not working as it supposed to.
Declare your JavaScript after your select box markup.
Also your source path seperators should be forward slashes "/" and not backslashes "\". e.g.
<script src="something\jquery.multi-select.js" type="text/javascript"> </script>
<link href="something\css\multi-select.css" media="screen" rel="stylesheet" type="text/css">
Should be
<script src="something/jquery.multi-select.js" type="text/javascript"> </script>
<link href="something/css/multi-select.css" media="screen" rel="stylesheet" type="text/css">