I have an MVC4 Razor page and jQuery validation methods on it. I want to show a Loading spinner and I can show it when pressing Submit Button. However, if the form is not valid the spinner does not work due to not checking the validity of the form properly.
To achieve this I think 2 different approach can be used:
Scenario I: After user presses Submit button, the Spinner method is called. If the form is valid, the Spinner will be shown and the form will be submitted. If not, the spinner will not be shown and the form will not be submitted. After the user validate the form and presses the Submit button, it will work as the first stage.
<script type="text/javascript">
$(function () {
$("#submitbtn").click(function () {
if ($('#myform').valid()) { //If there is no validation error
//Show "Loading..." spinner
$("#loading").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var target = document.getElementById('loading');
var spinner = new Spinner(opts).spin(target);
}
});
});
<input id="submitbtn" type="submit" value="Send" />
Scenario II: The Form will be validated with jQuery validation method as the other controls. In that case, if the Form is valid, showSpinner() method will be called. If not, the Form will not be submitted and the showSpinner() will not be called. Here is the method like above just a little changes and jQuery validation method.
<script type="text/javascript">
function showSpinner() {
//if ($('#myform').valid()) { //As the Form is checked already, there is no need to check again.
//Show "Loading..." spinner if all the components on the Form are valid
$("#loading").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var target = document.getElementById('loading');
var spinner = new Spinner(opts).spin(target);
//}
}
<script type="text/javascript">
/* <![CDATA[ */
jQuery(function () {
//...
jQuery("#myform").validate({
expression: "if (VAL) {showSpinner(); return true;} else {return false;}",
message: "Form is not valid!.."
});
});
/* ]]> */
How can I apply this properly by using one of this approach?
Related
I'm using ([mdbassit/Coloris][1]) as my website's color picker. I'm trying to change any div or elements color by using that color picker using JavaScript but it's not working.
I thing the problem is with my JavaScript Code.
My Code:
Coloris({
// The default behavior is to append the color picker's dialog to the end of the document's
// body. but it is possible to append it to a custom parent instead. This is especially useful
// if the color fields are in a scrollable container and you want color picker' dialog to stay
// anchored to them. You will need to set the position of the container to relative or absolute.
// Note: This should be a scrollable container with enough space to display the picker.
parent: '.container',
// A custom selector to bind the color picker to. This must point to input fields.
el: '.color-field',
// The bound input fields are wrapped in a div that adds a thumbnail showing the current color
// and a button to open the color picker (for accessibility only). If you wish to keep your
// fields unaltered, set this to false, in which case you will lose the color thumbnail and
// the accessible button (not recommended).
wrap: true,
// Available themes: default, large, polaroid.
// More themes might be added in the future.
theme: 'default',
// Set the theme to light or dark mode:
// * light: light mode (default).
// * dark: dark mode.
// * auto: automatically enables dark mode when the user prefers a dark color scheme.
themeMode: 'light',
// The margin in pixels between the input fields and the color picker's dialog.
margin: 2,
// Set the preferred color string format:
// * hex: outputs #RRGGBB or #RRGGBBAA (default).
// * rgb: outputs rgb(R, G, B) or rgba(R, G, B, A).
// * hsl: outputs hsl(H, S, L) or hsla(H, S, L, A).
// * auto: guesses the format from the active input field. Defaults to hex if it fails.
// * mixed: outputs #RRGGBB when alpha is 1; otherwise rgba(R, G, B, A).
format: 'hex',
// Set to true to enable format toggle buttons in the color picker dialog.
// This will also force the format (above) to auto.
formatToggle: true,
// Enable or disable alpha support.
// When disabled, it will strip the alpha value from the existing color value in all formats.
alpha: true,
// Show an optional clear button and set its label
clearButton: {
show: true,
label: 'Done'
},
// An array of the desired color swatches to display. If omitted or the array is empty,
// the color swatches will be disabled.
swatches: [
'#264653',
'#2a9d8f',
'#e9c46a',
'rgb(244,162,97)',
'#e76f51',
'#d62828',
'navy',
'#07b',
'#0096c7',
'#00b4d880',
'rgba(0,119,182,0.8)'
]
});
var inputBox = document.getElementById('colorBackground');
inputBox.onkeyup = function(){
document.body.style.backgroundColor = inputBox.value;
}
body{
background-color: black;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris#latest/dist/coloris.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris#latest/dist/coloris.min.js"></script>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input class="color-field" type='text' id='colorBackground'>
</body>
Please tell me the correct JavaScript code, by which I can change the background color or any color property of any element or div.
Thank You
[1]: https://github.com/mdbassit/Coloris
If i understood your problem correctly, to fix this you need to use the addEventListener method and get the value from the target directly.
const inputBox = document.getElementById('colorBackground');
inputBox.addEventListener('change', ev => {
document.body.style.backgroundColor = ev.target.value;
});
inputBox.addEventListener('keyup', ev => {
document.body.style.backgroundColor = ev.target.value;
});
// inputBox.onkeyup = function () {
// document.body.style.backgroundColor = inputBox.value;
// };
Coloris({
// The default behavior is to append the color picker's dialog to the end of the document's
// body. but it is possible to append it to a custom parent instead. This is especially useful
// if the color fields are in a scrollable container and you want color picker' dialog to stay
// anchored to them. You will need to set the position of the container to relative or absolute.
// Note: This should be a scrollable container with enough space to display the picker.
parent: '.container',
// A custom selector to bind the color picker to. This must point to input fields.
el: '.color-field',
// The bound input fields are wrapped in a div that adds a thumbnail showing the current color
// and a button to open the color picker (for accessibility only). If you wish to keep your
// fields unaltered, set this to false, in which case you will lose the color thumbnail and
// the accessible button (not recommended).
wrap: true,
// Available themes: default, large, polaroid.
// More themes might be added in the future.
theme: 'default',
// Set the theme to light or dark mode:
// * light: light mode (default).
// * dark: dark mode.
// * auto: automatically enables dark mode when the user prefers a dark color scheme.
themeMode: 'light',
// The margin in pixels between the input fields and the color picker's dialog.
margin: 2,
// Set the preferred color string format:
// * hex: outputs #RRGGBB or #RRGGBBAA (default).
// * rgb: outputs rgb(R, G, B) or rgba(R, G, B, A).
// * hsl: outputs hsl(H, S, L) or hsla(H, S, L, A).
// * auto: guesses the format from the active input field. Defaults to hex if it fails.
// * mixed: outputs #RRGGBB when alpha is 1; otherwise rgba(R, G, B, A).
format: 'hex',
// Set to true to enable format toggle buttons in the color picker dialog.
// This will also force the format (above) to auto.
formatToggle: true,
// Enable or disable alpha support.
// When disabled, it will strip the alpha value from the existing color value in all formats.
alpha: true,
// Show an optional clear button and set its label
clearButton: {
show: true,
label: 'Done',
},
// An array of the desired color swatches to display. If omitted or the array is empty,
// the color swatches will be disabled.
swatches: [
'#264653',
'#2a9d8f',
'#e9c46a',
'rgb(244,162,97)',
'#e76f51',
'#d62828',
'navy',
'#07b',
'#0096c7',
'#00b4d880',
'rgba(0,119,182,0.8)',
],
});
const inputBox = document.getElementById('colorBackground');
inputBox.addEventListener('change', ev => {
document.body.style.backgroundColor = ev.target.value;
});
inputBox.addEventListener('keyup', ev => {
document.body.style.backgroundColor = ev.target.value;
});
// inputBox.onkeyup = function () {
// document.body.style.backgroundColor = inputBox.value;
// };
body {
background-color: black;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris#latest/dist/coloris.min.css" />
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris#latest/dist/coloris.min.js"></script>
<br /><br /><br /><br /><br /><br /><br />
<input class="color-field" type="text" id="colorBackground" />
I’m looking to build a script thats open a spinner on form submit or select change.
I’d like to use spin.js, (this is a working example from the developer):
var opts = {
lines: 11, // The number of lines to draw
length: 15, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb
speed: 0.6, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var spinner = null;
var spinner_div = 0;
$(document).ready(function() {
spinner_div = $('#spinner').get(0);
$("#btn-spin").click(function(e) {
e.preventDefault();
if(spinner == null) {
spinner = new Spinner(opts).spin(spinner_div);
} else {
spinner.spin(spinner_div);
}
});
});
so.. when i click on my submit button
<input id="btn-spin" type="submit" name="next" value="Continua" class="button-big"/>
or when i change a value on my select
<select name="billing_country" onChange="this.form.submit();">
{billing_country_options}
</select>
I’d like to:
add “lightbox-is-open” and “lightbox-is-fixed” classes to HTML
remove “hidden” class from my glasspane div
start (or show) the spinner
wait 500ms
submit the button or the select (and then other page will be loaded)
someone can help me please?
it’s too hard, a very difficult puzzle for me, (i’m a sound engineer, not a web developer)
thanks so much
Assuming that you have initialized your spinner correctly, we can listen to either the form submit or select change events using jQuery, and avoid using inline JS. For your <select>, just remove the inline JS.
$(function() {
// Remember to use 'var'
var spinner_div = $('#spinner').get(0),
spinner,
opts = {
// Opts go here
},
showSpinner = function() {
// Add 'lightbox-is-open' and 'lightbox-is-fixed' classes to HTML
$('html').addClass('lightbox-is-open lightbox-is-fixed');
// Remove 'hidden' class from '.glasspane'
$('.glasspane').removeClass('hidden');
// Show spinner
if(spinner == null) {
spinner = new Spinner(opts).spin(spinner_div);
} else {
spinner.spin(spinner_div);
}
// Submit form after 500ms
var timer = window.setTimeout(function() {
$('form').submit();
}, 500);
};
// Bind events
$('form').on('submit', function(e) {
e.preventDefault();
showSpinner();
});
$('#btn-spin').on('click', function(e) {
e.preventDefault();
showSpinner();
});
$('select').on('change', showSpinner);
});
i need help
Actually in my work i need to implement spin.js and block UI in a jqgrid. This is ok when i put the code in the same file and function, but i want to call a method from other JS file, and hear is where my problem. The spin.js and block UI start, then block UI stop with unblock but the spin.js still running.
Here is my code:
In BeforeRequest() in jqgrid i call one method
$.pui.common.loaderAnimationON("pane-content");
this method have this code
loaderAnimationON: function (div) {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent in px
left: '50%' // Left position relative to parent in px
};
var target = document.getElementById(div);
var spinner = new Spinner(opts).spin(target);
$.blockUI({
blockMsgClass: "gridProjectsLoader",
message: null
});
return spinner;
},
in gridComplete() i call other method
$.pui.common.loaderAnimationOFF("pane-content");
this method have this code
loaderAnimationOFF: function (div) {
var target = document.getElementById(div);
var spinner = $.pui.common.loaderAnimationON();
spinner.stop(target);
$.unblockUI();
}
Anyone can help me?
Thanks guys
You should use the same object to start and stop it. You can use global variables anywhere (just another .js)
Check this jsFiddle. It's stop spinner after 3 secs.
http://jsfiddle.net/YX7dy/8/
spinner=loaderAnimationON('Spin');
setInterval(function(){spinner.stop();},3000);
I have a readonly jQuery Knob. I have been able to add units to the numeric display (as per How to display units with Jquery Knob ), but the foreground (ie. graphical value indicator) of the dial is no longer displayed when the page is reloaded.
Here's my HTML:
<input class="knob" id="workload" data-angleoffset=-125 data-anglearc=250 value="{{ workload }}" >
( {{ workload }} is a floating point Django template value - it is being substituted correctly )
Inside my jQuery ready function, I have:
if (jQuery().knob && ! App.isIE8()) {
// Workload Indicator
$(".knob").knob({
'dynamicDraw': true,
'min': 0, 'max':100,
'thickness': 0.2,
'tickColorizeValues': true,
'readOnly': true,
'skin': 'tron',
'fgColor': '#F00',
'inputColor':'#3D3D3D',
'bgColor': '#3D3D3D',
'width' : 150,
'draw' : function () {
$(this.i).val( parseInt(this.cv) + '%');
}
});
}
fgColor was originally set from the template value, but the above code with a hard-coded fgColor produces the same result.
Commenting out the draw callback works as expected: The knob is drawn complete with a numeric value in the middle and a red colored indicator on the outside arc.
Uncommenting the draw fixes the numeric formatting (no decimal points + a percentage sign). The numeric formatting remains correct for initial display and on re-load.
However the red arc only appears on the initial display - it disappears when the page is re-loaded!
So what is going on? Is draw over-riding jquery-knob's own canvas draw method? If so, how can I call the graphical draw part?
I was able to use this:
$('.knob').val(0).trigger('change').trigger('draw');
Here is the solution, sent to me by Sally Maughan (not of this parish):
$(".knob").each( function () {
this.value = Math.round( this.getAttribute('value') );
}).knob({
'dynamicDraw': true,
'min': 0, 'max':100,
'thickness': 0.2,
'tickColorizeValues': true,
'readOnly': true,
'skin': 'tron',
'fgColor': wcol,
'inputColor':'#3D3D3D',
'bgColor': '#3D3D3D',
'width' : 150,
'draw' : function () {
this.i.val( this.cv + '%');
}
});
The above version uses a new value from the HTML with each reload.
If you want to keep the same value through the reload, then Sally suggests replacing the this.value assignment with:
this.value = Math.round( this.value.replace('%','') );
Hello guys,
I am new at JavaScript and after tons of research on the Internet and failed attempts on implementing a spinner I decided to ask you.
I am using Spin.js ( http://fgnass.github.com/spin.js/#v1.2.6 ). It seems to be an great tool, but I simply cannot make it work. My question is what I doing wrong? I cannot really figure it out. Any help will be much appreciated. Thank you so much.
Here is my piece of code:
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
function spinnerInit() {
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto', // Left position relative to parent in px
visibility: true
};
var target = document.getElementById('spinnerContainer');
//target.style.display = "block";
var spinner = new Spinner(opts).spin(target);
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnPerformSave').click(function () {
spinnerInit();
});
});
</script>
<div id="spinnerContainer" class="spinner" style="width: 100%; height: 150%;
position: absolute; z-index: 100; background-color: Gray;
left: 0; top: 0; bottom: 0;right: 0">
</div>
Try replacing
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
with
$('#spinnerContainer').after(new Spinner(opts).spin().el);
You need to append the html element the spin method creates to the dom
Here is an example to get you started http://jsfiddle.net/5CQJP/1/
I am not sure if this question ever got answered, but for those who are still looking for an answer:
I found out that I needed to move the javascript underneath the spinnerContainer div. I believe this would also work if you put the javascript in an onload event. Here is what I did:
<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray;">
</div>
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
</script>
Here is my answer. Works great.
//Declare Script
<script src="Scripts/spin.js" type="text/javascript"></script>
<button id="btnSearchClick">Search</button>
//Displays Loading Spinner
<div id="loading">
<div id="loadingcont">
<p id="loadingspinr">
</p>
</div>
</div>
<script type="text/javascript">
//On button click load spinner and go to another page
$("#btnSearchClick").click(function () {
//Loads Spinner
$("#loading").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var trget = document.getElementById('loading');
var spnr = new Spinner(opts).spin(trget);
//Go another page.
window.location.href = "http://www.example.com/";
});
</script>
Try this:
var target = document.getElementById('spinnerContainer');
//target.style.display = "block";
var spinner = new Spinner(opts);
If you use jQuery:
$(target).html(spinner.el);
If not, as in the documentation:
target.innerHtml = '';
target.appendChild(spinner.el);
I didn't try this but it should work. If a problem occurs, just let me know.
I know this is way late but I am curious if you ever got this to work. I'll tell you one dumb thing I was doing for a bit and didn't realize it. I was making the spinner the same color as the background it would be showing up against and that's why I couldn't see it. Also I used JQuery as seen here https://gist.github.com/its-florida/1290439
Worked like a charm