JavaScript [element].innerHTML = htmlcode is not working

Question

There is a performance time delay in rendering window.navigate(strURL);. Until then I want display a wait message using mainContainer.innerHTML = HTMLwait; but it is not working. Any help is appreciated. Thanks!

var HTMLwait = "<div style='width:300px;height:300px;top:40%;left:45%;position:absolute;overflow:auto;display:inline;'><div style='width:50px;height:50px;top:20%;left:4%;position:absolute;overflow:auto;display:inline;'><img src='../../images/Developer/ajax-loader.gif'></div><div style='width:50px;height:50px;top:35%;left:0%;position:absolute;font-family:arial;font-size:12px;color:#000000;'>Loading...</div></div>";

var strURL = window.location.href;

var mainContainer = $(".mainContainer");
if (mainContainer != null) {
  mainContainer.innerHTML = HTMLwait;
}

window.navigate(strURL);

Rory McCrossan · Accepted Answer · 2017-07-06 09:20:17Z

3

mainContainer is a jQuery object and therefore does not have a innerHTML property. To set the HTML of an element selected via jQuery, use html().

Note that a jQuery object will never be null. To check if it exists, use the length property. You should note though that checking that the element exists is redundant, as jQuery will not throw an error when calling a method on a jQuery object that holds no Elements.

Also you appear to be using window.location.href to reload the page. A much simpler method would be to just use window.location.reload().

With all that said, try this:

var HTMLwait = "<div style='width:300px;height:300px;top:40%;left:45%;position:absolute;overflow:auto;display:inline;'><div style='width:50px;height:50px;top:20%;left:4%;position:absolute;overflow:auto;display:inline;'><img src='../../images/Developer/ajax-loader.gif'></div><div style='width:50px;height:50px;top:35%;left:0%;position:absolute;font-family:arial;font-size:12px;color:#000000;'>Loading...</div></div>";
var mainContainer = $(".mainContainer").html(HTMLwait);
window.location.reload();

Finally, there is a lot of inline styling in the HTML string you're appending to the DOM. You should really avoid inline styles. Instead place a class on the elements you append, then style them via an external stylesheet.

answered Jul 6, 2017 at 9:20

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2082630 Over a year ago

var strURL = window.location.href; is used for getting the URL to redirect( not for reload) and this code does not work.Not showing the HTML wait message

loelsonk · Accepted Answer · 2017-07-11 08:00:57Z

1

For jQuery objects use .html(),

$('.mainContainer').html(HTMLwait);

If you would like to use .innerHTML property:

document.querySelector('.mainContainer').innerHTML = HTMLwait;

var HTMLwait = "<div style='width:300px;height:300px;top:40%;left:45%;position:absolute;overflow:auto;display:inline;'><div style='width:50px;height:50px;top:20%;left:4%;position:absolute;overflow:auto;display:inline;'><img src='../../images/Developer/ajax-loader.gif'></div><div style='width:50px;height:50px;top:35%;left:0%;position:absolute;font-family:arial;font-size:12px;color:#000000;'>Loading...</div></div>";


showMessage(HTMLwait);

function showMessage(message) {

  $('.mainContainer').html(HTMLwait);

  setTimeout(function() {
    console.log('time to reload the page');
    // uncomment line below
    // window.location.reload();
  }, 1000); // executed after one second
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContainer"></div>

edited Jul 11, 2017 at 8:00

answered Jul 6, 2017 at 9:22

loelsonk

3,6082 gold badges18 silver badges23 bronze badges

1 Comment

loelsonk Over a year ago

@user2082630 If you would like to delay reload - to let users see the message first, use setTimeout function. I've updated my answer, please see example how to implement reload. If it helped you, please accept my answer.

Collectives™ on Stack Overflow

JavaScript [element].innerHTML = htmlcode is not working

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related