I have been looking around and I cannot seem to figure out how to do this, although it seems like it would be very simple.(mobile development)
What I am trying to do is display a message (kind of like an alert, but not an alert, more like a dialog) while a calculation is being made. Simply like a Loading please wait. I want the message to appear and stay there while the calculation is being done and then be removed. I just cannot seem to find a proper way of doing this.
The submit button is pressed and first checks to make sure all the forms are filled out then it should show the message, it does the calculation, then hides the message.
Here is the Calculation function.
function scpdResults(form) {
//call all of the "choice" functions here
//otherwise, when the page is refreshed, the pulldown might not match the variable
//this shouldn't be a problem, but this is the defensive way to code it
choiceVoltage(form);
choiceMotorRatingVal(form);
getMotorRatingType();
getProduct();
getConnection();
getDisconnect();
getDisclaimer();
getMotorType();
//restore these fields to their default values every time submit is clicked
//this puts the results table into a known state
//it is also used in error checking in the populateResults function
document.getElementById('results').innerHTML = "Results:";
document.getElementById('fuse_cb_sel').innerHTML = "Fuse/CB 1:";
document.getElementById('fuse_cb_sel_2').innerHTML = "Fuse/CB 2:";
document.getElementById('fuse_cb_result').innerHTML = "(result1)";
document.getElementById('fuse_cb_res_2').innerHTML = "(result2)";
document.getElementById('sccr_2').innerHTML = "<b>Fault Rating:</b>";
document.getElementById('sccr_result').innerHTML = "(result)";
document.getElementById('sccr_result_2').innerHTML = "(result)";
document.getElementById('contactor_result').innerHTML = "(result)";
document.getElementById('controller_result').innerHTML = "(result)";
//Make sure something has been selected for each variable
if (product === "Choose an Option." || product === "") {
alert("You must select a value for every field. Select a Value for Product");
**************BLAH************
} else {
//valid entries, so jump to results table
document.location.href = '#results_a';
******This is where the message should start being displayed***********
document.getElementById('motor_result').innerHTML = motorRatingVal + " " + motorRatingType;
document.getElementById('voltage_res_2').innerHTML = voltage + " V";
document.getElementById('product_res_2').innerHTML = product;
document.getElementById('connection_res_2').innerHTML = connection;
document.getElementById('disconnect_res_2').innerHTML = disconnect;
if (BLAH) {
}
else {
}
populateResults();
document.getElementById('CalculatedResults').style.display = "block";
} //end massive else statement that ensures all fields have values
*****Close out of the Loading message********
} //scpd results
Thank you all for your time, it is greatly appreciated
It is a good idea to separate your display code from the calculation code. It should roughly look like this
displayDialog();
makeCalculation();
closeDialog();
If you are having trouble with any of those steps, please add it to your question.
Computers are fast. Really fast. Most modern computers can do several billion instructions per second. Therefore, I'm fairly certain you can rely on a a setTimeout function to fire around 1000ms to be sufficient to show a loading message.
if (product === "Choose an Option." || product === "") {
/* ... */
} else {
/* ... */
var loader = document.getElementById('loader');
loader.style.display = 'block';
window.setTimeout(function() {
loader.style.display = 'none';
document.getElementById('CalculatedResults').style.display = "block";
}, 1000);
}
<div id="loader" style="display: none;">Please wait while we calculate.</div>
You need to give the UI main thread a chance to render your message before starting your calculation.
This is often done like this:
showMessage();
setTimeout(function() {
doCalculation();
cleanUp()
}, 0);
Using the timer allows the code to fall through into the event loop, update the UI, and then start up the calculation.
You're already using a section to pop up a "results" page -- why not pop up a "calculating" page?
Really, there are 4,000,000 different ways of tackling this problem, but why not try writing a "displayCalculatingMessage" function and a "removeCalculatingMessage" function, if you don't want to get all object-oriented on such a simple thing.
function displayCalculatingMessage () {
var submit_button = getSubmitButton();
submit_button.disabled = true;
// optionally get all inputs and disable those, as well
// now, you can either do something like pop up another hidden div,
// that has the loading message in it...
// or you could do something like:
var loading_span = document.createElement("span");
loading_span.id = "loading-message";
loading_span.innerText = "working...";
submit_button.parentElement.replaceChild(loading_span, submit_button);
}
function removeCalculatingMessage () {
var submit_button = getSubmitButton(),
loading_span = document.getElementById("loading-message");
submit_button.disabled = false;
loading_span.parentElement.replaceChild(submit_button, loading_span);
// and then reenable any other disabled elements, et cetera.
// then bring up your results div...
// ...or bring up your results div and do this after
}
There are a billion ways of accomplishing this, it all comes down to how you want it to appear to the user -- WHAT you want to have happen.
Related
I'm writing a choose your own adventure program where If a specific option is chosen (example to wait) the user gets a random number between 1-10 to do push ups(the push-ups would be the user clicking on the prompt "ok" button however many times the random number is equal to) here's my code so far but I keep getting errors. I'm a complete noob so go easy on me.
var count = Math.floor((Math.random() * 10) + 1);
var setsOf10 = false;
function pushUps() {
alert("Nice! Lets see you crank out " + pushUps + "!");
}
if (setsOf10 == pushUp) {
alert("Nice! Lets see you crank out " + pushUp + "!");
setsOf10 = true;
}
for (var i=0; i<count; i++){
pushUps();
}
else {
alert("Really, thats it? Try again");
}
while ( setsOf10 == false);
}
After playing with this some more I can tell i'm close but still don't have it. and again, I'M NOT ASKING YOU TO SOLVE THIS FOR ME JUST NEED POINTERS AS TO WHAT IM DOING WRONG OR MISSING. Here's what I have, Its giving me my random number I just need it to allow me to click the "ok" button however many times the random number has assigned me.
var pushUpSets = Math.floor((Math.random() * 10) + 1);
function pushUps(){
alert(pushUpSets);
if (pushUpSets < 3){
var weak = "Thats it? Weak sauce!";
alert(weak);
}
else{
alert("Sweet lets get some reps in!");
}
for (i=0; i>3; i++){
pushUps(pushUpSets);
}
}
Here, the make a choice button is just dummy to allow us to go to do push ups. Each click decrements our count.
// This is important, we use this event to wait and let the HTML (DOM) load
// before we go ahead and code.
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#choice').addEventListener('click', makeChoice);
});
function makeChoice() {
// Call a method to set random pushups and setup the click event
setUpPushUp();
// Here we change the display style of the push up section so that it shows to the player.
document.querySelector('.activity').style.display = 'block';
}
// The pushups variable is declared at the document level
// This way our setUpPushUp and doPushUp functions have easy access.
let pushUps = 0;
function setUpPushUp() {
// Create a random number of pushups, in sets of 10.
// We add an extra 1 so we can call the doPushUp method to initialize.
pushUps = (Math.floor((Math.random() * 10)+1)*10)+1 ;
// Add a click event to the push up button and call our doPushUp method on each click.
document.querySelector('#push').addEventListener('click', doPushUp);
// This is just an init call, it will use the extra 1 we added and place test in our P tag.
doPushUp();
}
function doPushUp() {
// Get a reference to our output element, we will put text to player here.
let result = document.querySelector('p');
// They have clicked, so remove a push up.
pushUps--;
// See if the player has done all the required push ups (i.e. pushUps is 0 or less.)
if (pushUps > 0) {
result.innerText = `You need to crank out ${pushUps} pushUps`;
} else {
result.innerText = 'Nice work!';
}
}
.activity {
display: none;
}
<button id="choice">Make a choice !</button>
<div class="activity">
<p></p>
<button id="push">Push</button>
</div>
I am a beginner with all coding. Here is my general goal. I am running something relatively simple where I have 8 superheroes on the screen. I would like the user to eliminate the 4 DC superheroes from the screen and after all 4 of them are eliminated from the screen I want the system to alert the user that they have won the game. They don't have to do it in any order so I ran the superHero function each time a DC character was clicked to check if all four DC superheroes had been eliminated yet. Somebody please help me. I feel like it is something very simple I am messing up on. Thanks a ton in advance.
/*This is my jquery that shows all 8 of my superheroes*/
$('#heroes').show();
var flashHidden = !$('#greenlantern').is(':visible');
var greenHidden = !$('#greenlantern').is(':visible');
var batmanHidden = !$('#batman').is(':visible');
var supermanHidden = !$('#superman').is(':visible');
function superHero() {
if(flashHidden && batmanHidden && supermanHidden && greenHidden) {
alert ("Congratulations!!! You have won the game!! Please proceed forward and fill out a quick survey for the developers");
}
}
$('#flash').click(function(){
$('#flash').hide('slow',function(){
superHero();
});
});
$('#greenlantern').click(function(){
$('#greenlantern').hide('slow',function(){
superHero();
});
});
$('#batman').click(function(){
$('#batman').hide('slow',function(){
superHero();
});
});
$('#superman').click(function(){
$('#superman').hide('slow',function(){
superHero();
});
});
});
Right now the current thing that is happening is I will eliminate all of the correct superheroes and it will not alert me that the user has won. I've tried a lot of different things and the only other result I've gotten is to have the system alert the user every time they click on a superhero that they've won which is also incorrect.
EDIT
This has been solved by changing the scope of the variables to inside the function.
You should declare your variables i.e. flashHidden in your function. Currently you are setting then at the start.
function superHero() {
var flashHidden = !$('#flash').is(':visible');
var greenHidden = !$('#greenlantern').is(':visible');
var batmanHidden = !$('#batman').is(':visible');
var supermanHidden = !$('#superman').is(':visible');
if(flashHidden && batmanHidden && supermanHidden && greenHidden) {
alert ("Congratulations!!! You have won the game!! Please proceed forward and fill out a quick survey for the developers");
}
}
Additionally your click handler can be condensed into
$('#flash, #greenlantern, #batman, #superman').click(function(){
$(this).hide('slow',function(){
superHero();
});
});
You're setting...
var flashHidden = !$('#greenlantern').is(':visible');
...to start with. But you're not updating that variable later on when it gets hidden. So according to your check of:
if(flashHidden && batmanHidden && supermanHidden && greenHidden) {
...Flash is still visible. Even though, yes, on the page he's gone.
Try adding this:
$('#flash').click(function(){
$('#flash').hide('slow',function(){
flashHidden=true;
superHero();
});
});
guys. I am trying to create a web-based calculator with basic operations using jQuery. I already have implemented the addition operation. Now, I am hooked in subtraction.
Here is a code snippet when you click on the minus button:
$("#btnSub").click(function () {
holdValue = $("#result").val();
currentValue = $("#result").val("0");
flagSub = "1";
flagNotEmpty = "0";
flagDecimal = "0";
});
Here is a code snippet when you click the equals button:
$("#btnEquals").click(function () {
if (flagNotEmpty == "0") {
alert("Missing Value.");
} else {
if (flagAdd == "1") {
currentValue = $("#result").val();
var output = parseFloat(holdValue) + parseFloat(currentValue);
$("#result").val(parseFloat(output));
} else if (flagSub == "1") {
currentValue = $("#result").val();
var output2 = parseFloat(holdValue) - parseFloat(currentValue);
$("#result").val(parseFloat(output2));
}
}
flagSub = "0";
flagAdd = "0";
flagNotEmpty = "0";
flagDecimal = "0";
});
Variables functions:
flagSub: used to determine that the operation choosen is subtraction
flagNotEmpty: used to determine if a number is pressed after selecting an operator. Displays error message if equal sign is clicked on right after the operator button.
flagDecimal: used to tell the program that a decimal has already been entered. Display error message for decimal point duplication.
Problem with this program is that it cannot perform subtraction when it is the first operation you do. That is, when the browser loads the UI and you do subtraction, nothing happens. BUT, when you do, for example, click 1 + 2 = then the program displays 3 in the textbox. Without refreshing the page, click - 10 =. Difference is displayed.
To start from the beginning, please refresh the page; will just add the CLEAR button after I am done with all the operations.
Just want to know what is wrong with my algorithm. For the complete code with html and css, here is its fiddle.
By the way, I have just started learning jQuery so please forgive me for the kind of messy and might be inefficient way of coding. Help is really much appreciated. Thanks in advance.
flagAdd needs to be initialized, you can alter the btnSub handler to do that
$("#btnSub").click(function () {
holdValue = $("#result").val();
currentValue = $("#result").val("0");
flagAdd = "0";
flagSub = "1";
flagNotEmpty = "0";
flagDecimal = "0";
});
alternatively you could initialize it in the document ready handler Fiddle
On one of our pages the user has the option to print a selected list of html pages. This is how it is at the moment
var rowcount = FrmMain.RowCount;
var frame = FrmMain.Frame;
for(i=1;i<=rowcount;i++)
{
var obj = FrmMain.elements("chk_" + i);
if(obj.checked)
{
frame.src = FrmMain.elements("hpath" + i).value;
window.frames[frame.id].focus();
window.frames[frame.id].print();
}
}
Now this works fine. The problem is that on each loop the print dialog box is displayed and the user has to click print.
Basically, what I'm asking is whether that is a way to supress this dialog. It must appear at the first time but hide thereafter. Some thing like below
var show = true;
...
{
...
{
...
if(show)
{
window.frames[frame.id].focus();
window.frames[frame.id].print();
show = false;
}
else
{
window.frames[frame.id].focus();
window.frames[frame.id].printwithoutdialog();
}
}
}
I hope I've been clear. Thanks in advance.
For security / privacy reasons, this is impossible.
Otherwise, ads would automatically print their brochures.
Instead, you can combine all of the pages into a single frame.
Some browsers have an option bypass the dialog, but it can't be done in javascript.
I need to change the shipping carrier drop-down and shipping method radio button once via a javascript function, not forever.
However, when I use this function, which executes when on the Review and Submit page when the order is < $5, it goes into an endless loop:
function setFreeSampShipping(){
var options = document.forms['checkout'].shippingcarrierselect.getElementsByTagName('option');
for (i=0;i<options.length;i++){
if (options[i].value == 'nonups'){
document.forms['checkout'].shippingcarrierselect.value='nonups';
document.forms['checkout'].shippingcarrierselect.onchange();
document.location.href='/app/site/backend/setshipmeth.nl?c=659197&n=1&sc=4&sShipMeth=2035';
}
}
}
It gets called from within this part of the function setSampPolicyElems() which you can see I've commented out to stop the loop:
if (carTotl < 5 && hasSampp == 1) {
/*
if (document.forms['checkout'].shippingcarrierselect.value =='ups'){
setFreeSampShipping();
}
*/
document.getElementById('sampAdd').style.display="none";
document.getElementById("custbody_ava_webshiptype").value = "7";//no charge free freight
if (document.getElementById("applycoupon")) {
document.location.href='/app/site/backend/setpromocode.nl?c=659197&n=1&sc=4&kReferralCode=SAMPLE'
}
document.write("<div id='msg'><strong>Sample & Shipping:</strong></span> No Charge. (Your sample order is < $5.)</div>");
}
To see the issue, go to the order review and submit page here:
https://checkout.netsuite.com/s.nl?c=659197&sc=4&n=1 (or go to http://www.avaline.com, hit "checkout", and login)
You can log in with these credentials:
Email : test2#gmail.com
Pass : test03
My solution so far was to swap out the onchange() event trigger line with this, since then I'm not running document.location.href twice: instead, I'm passing the two variables in the one URL query string:
var dropdown = document.getElementById('shippingcarrierselect');
document.body.style.cursor = 'wait';
document.location.href='/app/site/backend/setshipmeth.nl?c=659197&n=1&sc=4&sShipMeth=2035&sShipCarrier='+dropdown.value;
Your variable "i" is global. Also, you should store options.length in the variable.
"i" might be set by some scripts which cause infinite loop.
This was my solution:
var dropdown = document.getElementById('shippingcarrierselect'); document.body.style.cursor = 'wait'; document.location.href='/app/site/backend/setshipmeth.nl?c=659197&n=1&sc=4&sShipMeth=2035&sShipCarrier='+dropdown.value;