Javascript runs on page reload

2 Views

I’m using this javascript to edit a url to sort a list generated by a none editable plugin in wordpress: 

<script type="text/javascript">
var sortRegex = /[sort_by]=w*/;
function priceHighZ() {
  location.href = location.href.replace('[sort_order]=ASC', '[sort_order]=DESC').replace(sortRegex, '[sort_by]=price');
}
function priceLowZ() {
  location.href = location.href.replace('[sort_order]=DESC', '[sort_order]=ASC').replace(sortRegex, '[sort_by]=price');
}
function dateHighZ() {
  location.href = location.href.replace('[sort_order]=ASC', '[sort_order]=DESC').replace(sortRegex, '[sort_by]=date');
}
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('priceHighZ').addEventListener('click', priceHighZ);
  document.getElementById('priceLowZ').addEventListener('click', priceLowZ);
  document.getElementById('dateHighZ').addEventListener('click', dateHighZ);
});
</script>

It only works once the page has loaded for the first time, and you reload the page. It doesn’t work on first load.

Read More

Is there a problem with DOMContentLoaded, that could cause this to work only once the page is reloaded?

I’ve looked at this but not sure how to apply this example to my code above.

Post Views: 2

Related posts

3 comments

  1. You can use the jQuery .ready() event to be sure that DOM is loaded before execution of the script (like in your link example). But with wordpress you use jQuery instead of the alias $. Using the alias $ with wordpress is possible with for example adding var $ = jQuery.noConflict(); :

    <script type="text/javascript">

var $ = jQuery.noConflict();

$(document).ready(function() {

    var sortRegex = /[sort_by]=w*/;
    function priceHighZ() {
        location.href = location.href.replace('[sort_order]=ASC', '[sort_order]=DESC').replace(sortRegex, '[sort_by]=price');
    }
    function priceLowZ() {
        location.href = location.href.replace('[sort_order]=DESC', '[sort_order]=ASC').replace(sortRegex, '[sort_by]=price');
    }
    function dateHighZ() {
        location.href = location.href.replace('[sort_order]=ASC', '[sort_order]=DESC').replace(sortRegex, '[sort_by]=date');
    }
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('priceHighZ').addEventListener('click', priceHighZ);
        document.getElementById('priceLowZ').addEventListener('click', priceLowZ);
        document.getElementById('dateHighZ').addEventListener('click', dateHighZ);
    });

});

</script>

    You could use jQuery syntax instead of pure javascript replacing for example in:
    document.getElementById('dateHighZ')… replacing it by $('#dateHighZ')….

  2. Ensure the Id’s you are binding with click event are not loaded in the DOM in an asynchronous way.

  3. It sounds like that your javascript is running before page is loaded. But when you refresh page is loaded from local and page/element is ready before script. According to MDN:

    The DOMContentLoaded event is fired when the initial HTML document has
    been completely loaded and parsed, without waiting for stylesheets,
    images, and subframes to finish loading. A very different event – load
    – should be used only to detect a fully-loaded page

    Give it a chance like this

    document.addEventListener('load', function () {
  ...
}

Comments are closed.