JavaScript hash URL with content loader div on click event

Question

I have created the hash load URL function in javascript, everything is perfect expected one issue, that is - I want, If I click on the URL <div class="loader"</div> will append. Is this basically a loader that will represent something loading. I already using this code $("body > div.content").append('<div class="loader"</div>'); but this loader only work when I reload the page. I want when I click on <a href="#page">CLICK HERE</a> types click the i will also show loader.

How I achieve the goal and fix my code. Please help me

function loadcontent(hash) {
  if (hash == "") {
    hash = "./home.html";
  }
  $("html body").animate({
    scrollTop: 0
  }, "600", "swing");
  $("body > div.content").load("directory/" + hash);
}

$(window).on("hashchange", function() {
  loadcontent(location.hash.slice(1));
});

var url = window.location.href;
var hash = url.substring(url.indexOf("#") + 1);
if (hash === url) {
  hash = "./home.html";
}
$("body > div.content").append('<div class="loader"</div>');
$("div.content > div").load("directory/" + hash, function(responseTxt, statusTxt, jqXHR) {
  if (statusTxt == "success") {
    $("div.loader").remove(); return true;
  } else {
    if (statusTxt == "error") {
      $("div.loader").remove();
      alert("Error : " + jqXHR.status + " " + jqXHR.statusText);
      return false;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

0Valt · Accepted Answer · 2021-06-09 06:03:14Z

1

<a href="#page" onclick="loadcontent(hash)">CLICK HERE</a>

You might have to return false in loadcontent() if you don't want to redirect.

edited Jun 9, 2021 at 6:03

0Valt

10.5k9 gold badges41 silver badges66 bronze badges

answered Jun 9, 2021 at 5:45

Bivek Rawat

112 bronze badges

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

2 Comments

Shayam Rae Over a year ago

When I use onclick it not redirect the page, can you please update my script as you want to explain

Bivek Rawat Over a year ago

return true below should solve it if (statusTxt == "success") { $("div.loader").remove(); return true; }

Collectives™ on Stack Overflow

JavaScript hash URL with content loader div on click event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related