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>
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
});
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 want to disable the no-results-text in jQuerys Chosen 1.1.0.
I have tried some codechanges, but not with the expected results. All I reached is that I disabled the whole search-function or that the no-results-text was "undefined".
Where is the key to disable only this no-results-text like "No results match" and nothing else?
Thanks a lot!
According to the release 1.1.0 documentation, is an option you can set when you first call the chosen function
Example:
$(".my_select_box").chosen(
disable_search_threshold: 10,
no_results_text: "Oops, nothing found!",
width: "95%"
);
or
$(".chosen-select").chosen({no_results_text: "Oops, nothing found!"});
Sample using   entity to disable any text more than the one typed
<!Doctype html>
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/>
</head>
<html>
<body>
<select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
</body>
<script>
$(".chosen-select").chosen({no_results_text: " "});
</script>
</html>
You could also add this css within your head tag after you load jquery chosen plugin and its' css:
<style>
li.no-results {
visibility:hidden;
}
</style>
Or modify the source of the chosen.css and add visibility:hidden to the no-results class that would remove any message/text if there'are no results in the search
Sample adding visibility:hidden to the no-results class to hide any text
<!Doctype html>
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/>
<style>
li.no-results{visibility:hidden;}
</style>
</head>
<html>
<body>
<select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
</select>
</body>
<script>
$(".chosen-select").chosen({no_results_text: "This message is hidden"});
</script>
</html>
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>
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">