Mo A Mo A - 7 months ago 17
Javascript Question

Fade in div AFTER page refresh

I have the following code:

function getValues(){
var heat = document.forms["toolSection"]["heatingType"].value;
var meter = document.forms["toolSection"]["meterType"].value;
var beds = document.forms["toolSection"]["noBedrooms"].value;
var property = document.forms["toolSection"]["houseType"].value;
var age = document.forms["toolSection"]["houseAge"].value;

if (heat === null || heat=== ""){
alert ("Please select your heating type.");
return false;
}
if(meter === null || meter=== ""){
alert ("Please select your meter type.");
return false;
}
if(beds === null || beds === ""){
alert ("Please select the number of bedrooms.");
return false;
}
if(property === null || property === ""){
alert ("Please select your property type.");
return false;
}
if(age === null || age === ""){
alert ("Please select the age of your property.");
return false;
} else {
alert("Calculating a typical consumption value for you.");
setTimeout(function () {
window.location.reload();
}, 10);
return true;
}
}


It basically checks if any of my form elements are empty and if they are then to display an alert warning the user to make sure that something is selected. Initially i had an issue where, when i clicked submit i was unable to see the calculate value until i refreshed the form, hence the
setTimeout(function () {
code. Now i was just wondering if its possible to load in a div AFTER the
setTimeout
function?

Code to show the hidden div:

$(document).ready(function(e) {
$("#btn-calcCon").on('click', function() {
$("#conContainer").fadeIn();
});
});


Thanks!

Answer

Now i was just wondering if its possible to load in a div AFTER the setTimeout function? - No you can't.

This is because the page will reload. You can however load in the div within the script of the reloaded page by setting something to trigger it like a variable or parameter as stated by @isherwood.

A solution:

function getValues() {
  var heat = document.forms["toolSection"]["heatingType"].value;
  var meter = document.forms["toolSection"]["meterType"].value;
  var beds = document.forms["toolSection"]["noBedrooms"].value;
  var property = document.forms["toolSection"]["houseType"].value;
  var age = document.forms["toolSection"]["houseAge"].value;

  if (heat === null || heat === "") {
    alert("Please select your heating type.");
    return false;
  }
  if (meter === null || meter === "") {
    alert("Please select your meter type.");
    return false;
  }
  if (beds === null || beds === "") {
    alert("Please select the number of bedrooms.");
    return false;
  }
  if (property === null || property === "") {
    alert("Please select your property type.");
    return false;
  }
  if (age === null || age === "") {
    alert("Please select the age of your property.");
    return false;
  } else {
    alert("Calculating a typical consumption value for you.");
    setTimeout(function() {
      // set a hash
      window.location.hash = "trigger_here";
      window.location.reload();
    }, 10);
    return true;
  }
}

// check if there is ANY hash
if (window.location.hash) {
  // remove the hash
  window.location.hash = "";
  // load your div using code here
  $("#conContainer").fadeIn();
}

This will set the hash on the url e.g. http://yourwebsite.com/example.html#trigger_here. You can check if it has the hash in the url and then load in your div if it does.

Comments