1

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?

filb
  • 99
  • 1
  • 8

2 Answers2

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.

Tom M
  • 2,815
  • 2
  • 20
  • 47
1

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

Velimir Tchatchevsky
  • 2,812
  • 1
  • 16
  • 21
  • I have to open the new tab, perform the request inside it, and then scroll to the div, so it's not the correct answer, sorry. – filb Sep 17 '18 at 16:09