Pass JS variable from one page to other

Question

I created AJAX auto-complete from a JSON file

function run() {
    field.show();
    field.html('');
    let val = search.val();
    let input = new RegExp(val, "gi");

    $.get("js/pk.json").then(function(city) {
        if (val.trim().length === 0) {
            field.empty();
            field.hide();
        }
        $.each(city, function(key, value) {
            let n = new RegExp(val, 'gi');
            let name = value.city.replace(n, `<span class="me">${val}</span>`);
            if (value.city.search(input) != -1) {
                field.append(`<li class="list-search" data-name='${value.city}'><a href="pages/check.html" class="waves-effect">${name}  ${value.country}<br><br></a></li>`);
            }
        })
    })
});

and I want to pass "data-name" attribute clicked li tag value to div in another page.

That is :

$("#field").on("click", "li", function(e) {
    finalName=$(this).attr('data-name');
});

and the div is <div class="Fname"></div>.

The variable finalName is global but it shows undefined outside this click event.

I am not an expert but I think that is due to AJAX Asynchronous request which loads variable before it is assigned value. Can anyone please explain to me how it will work? I found other answers that were related to this but couldn't understand them. Thank you in advance

Possible duplicate of How do I return the response from an asynchronous call? — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Aug 10, 2018 at 0:51
Put it in the href of the <a> as query param not data attribute of the <li>. Then read the searchParams from url on other page — charlietfl
– charlietfl, Commented Aug 10, 2018 at 1:06

michaelitoh · Accepted Answer · 2018-08-10 01:46:00Z

1

You can do this by saving you data in localStorage o sessionStorage and then retrieve it in the other page. For example:

sessionStorage.setItem(SOME_KEY, VALUE_YOU_WANT_TO_SAVE);

and in the other page just retrieve it by calling:

var data = sessionStorage.getItem("THE_SAME_KEY_USED_BEFORE");

Now, data is has the data you were trying to pass.

I hope this help!

answered Aug 10, 2018 at 1:46

michaelitoh

2,34016 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Pass JS variable from one page to other

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related