Button Click: open a new browser tab and call a function

Question

I have a button that calls a function which:

• Performs an AJAX PHP request to a DB

• Displays retrieved data in a div container

• Scrolls to that bookmarked (#) div container

I'd like to have a button doing the same tasks but doing it opening a new tab and scrolling to the div. So it has to:

• Open the new tab
• Call the function that performs the request
• Display retrieved data in a div container
• Scroll to that bookmarked (#) div container

How can I achieve this?

Answer 1

I would recommend working with query strings. After you retrieved your Data in your AJAX callback, urlencode it and append it to the link to your route.

$.ajax({
    url : 'example.com',
    type: 'GET',
    success : (response) => {
        window.open(
            'http://example.com/my-target-route' + '?content=' + encodeURIComponent(response.data) + '#my-div-container',
            '',
            ''
        )
    }
})

On your target page, parse the query parameters like that:

let urlParams = new URLSearchParams(window.location.search);
let myDiv = document.querySelector('#my-div-container');

myDiv.innerHTML = urlParams.get('content');

Alternatively, you might try to run a method in the new tab from local storage.

Answer 2

You can use the default anchor behavior and redirect the user with window.open('http://yoururl/#divContainerToScrollToID', '_blank');