Reuse javascript code on client side (node.js, express)

Question

I'm still new to Node.js, but I'll try to explain my problem as good as I can.

So I'm working on a movie site to practice my node.js/express skills a bit and I use the following elements (img) on basically every page of my website:

Header with stats and search input and a navigation bar (will be reused on every page)

The follow JS-code are two examples of actions on the client side that I use to navigate to other web pages, this then activates GET on the client side.

$(function () {

    $('button').click(function (event) {
        event.preventDefault()
        // the value people enter in the search box

        var search = $('.searchInput').val();

        //replace spaces with _
        var res = search.replace(/\s/g, "_");

        //build the URL
        var link = window.location.protocol + '//' + window.location.host + '/search/' + res;

        // redirect to trigger GET in indexjs with specific search value
        window.location.replace(link);

        });

    $('.lists').click(function (event) {
        var link = window.location.protocol + '//' + window.location.host + '/lists/topAll';
        window.location.replace(link);
    })
});

I want this to be the same code on every page. I could type the same code every time, but that would be a waste of time.For HTML and CSS I am able to use templates (HTML) or import other CSS files to save time. Is there something similar for JS on the client side?

Parzibyte · Accepted Answer · 2017-09-21 01:35:36Z

1

Put that code in a file, for example "navigator.js" and then load it in your html header in every page you want to use it

navigator.js:

$(function () {

    $('button').click(function (event) {
        event.preventDefault()
        // the value people enter in the search box

        var search = $('.searchInput').val();

        //replace spaces with _
        var res = search.replace(/\s/g, "_");

        //build the URL
        var link = window.location.protocol + '//' + window.location.host + '/search/' + res;

        // redirect to trigger GET in indexjs with specific search value
        window.location.replace(link);

        });

    $('.lists').click(function (event) {
        var link = window.location.protocol + '//' + window.location.host + '/lists/topAll';
        window.location.replace(link);
    })
});

index.html

<script src="navigator.js"></script>

Finally i suggest you to assign an id to your button, for example "searchButton" instead only "button"

Hope this helps

answered Sep 21, 2017 at 1:35

Parzibyte

1,61616 silver badges21 bronze badges

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

1 Comment

Tijl Declerck Over a year ago

Yes, this certainly helps. Thanks for the quick response. This will save me a lot of time. Have a nice evening.

Collectives™ on Stack Overflow

Reuse javascript code on client side (node.js, express)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related