Search code examples
javascriptdatatablexmlhttprequest

Empty response from XHR


I have a table which gets populated by results after the user has filtered them. Each result gets the user to a detail page. I want the user to go back to the search results without resetting the table. The 'back to results' button on the detail page has this JavaScript:

document.getElementById('back').onclick = function(e){
const newpage = window.open("index.html?fromDetail=yes", "_self");
newpage.onload = advancedSearchFromDetail()
}

And this is the JavaScript function which is executed once the destination page is reached:

function advancedSearchFromDetail () {
    event.preventDefault()
                    var table = $('#mainTable').DataTable()

                    table.clear()

        // Get the parameters in the sessionStorage       
        const pe1id = sessionStorage.getItem('pe1id');
        const pe2id = sessionStorage.getItem('pe2id');
        const plid = sessionStorage.getItem('plid');
        const dateFrom = sessionStorage.getItem('dateFrom');
        const dateTo = sessionStorage.getItem('dateTo');
        const includeUndated = sessionStorage.getItem('includeUndated');

        const data = new FormData() 
        data.append('pe1id', pe1id)
        data.append('pe2id', pe2id)
        data.append('plid', plid)
        data.append('dateFrom', dateFrom)
        data.append('dateTo', dateTo)
        data.append('includeUndated',includeUndated)

        const oReq = new XMLHttpRequest();
        oReq.open("post", 'modules/advanced_search.xq', true);
        oReq.send(data);

        oReq.onreadystatechange = function () {
            if (oReq.readyState === XMLHttpRequest.DONE && oReq.status === 200) {
                const result = JSON.parse(oReq.responseText);
                [populate the table]

                }

              } 

The curious thing is that this code works when it is launched from the main page. All the parameters are there and get correctly sent. The response nevertheless is empty, blank. If I double click on the XHR details in my browser's console in order to open the .xq file with the parameters I even get the JSON results in a new page! What am I overlooking? I can't understand why it's not working if the parameters are there, the XHR call is there, I get 200 status and all that.

Edit

If I launch the function in the browser's console it works. Does this have to do something with the fact that I call the function with newpage.onload = advancedSearchFromDetail() then? If yes, how can I work around it?


Solution

  • OK, as I suspected, the issue appears to be how I call the function, i.e. via the .onload instruction. Therefore I appended a parameter to the URL if the user is coming from a 'detail' page, and added this JavaScript in the main page:

    var urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has('fromDetail')) {
    advancedSearchFromDetail()}
    

    And I've delete the .onload instruction in the previous JavaScript. I'm not sure this is the best solution, if anyone has a better one please do comment here.