How to call a servlet from a nav bar href link , and also call a jquery function for slow scroll down on click

Question

How to call a servlet from nav bar href link and also same time call a jquery function for slow scroll down

I tried to call the servlet from onclick href link, it is calling but not calling jquery function at the same time

   Code for slow scroll down

    $("#apply").click(function() {
        $('html,body').animate({
            scrollTop : $("#applyleave").offset().top
        }, 500);
    });

 Code for calling servlet
function myFunction1() {
        window.location.href = "http://localhost:9091/LeaveManagementProject/ApproveLeave";
    }

No error message, just it is calling only one function not the both enter code here

Answer 1

If you want to fetch data and scroll during the data is fetched, you need to stop the request and do it with XHR.

// this makes an asynchronous request to fetch data and executes the callback function
var sendXHRPost = void 0;
{
    sendXHRPost = function (url, params, callback) {
        var http = new XMLHttpRequest();
        http.open('POST', url, true);
        http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        http.onreadystatechange = function() {
            if (http.readyState === 4) {
                callback(http.status, http.responseText, clickedElement);
            }
        }
        http.send(params);
    }
}
// your scroll function
var scrollFunction = void 0;
{
    scrollFunction = function (status, response, clickedElement) {
        // update your DOM with reponse here
        // Then scroll
        $("#apply").click(function() {
            $('html,body').animate({
                scrollTop : $(clickedElement.href).offset().top
            }, 500);
        });
    }
}
// Handle the click on your element
var clickFunction = void 0;
{
    clickFunction = function (e) {
        e.preventDefault();
        var myURL = "http://localhost:9091/LeaveManagementProject/ApproveLeave";
        sendXHRPost(myURL, null, scrollFunction, e.currentTarget);
    }
}
document.getElementById("apply1").addEventListener("click", clickFunction, false);

Hope this helps.