How to pass data from one HTML page to another HTML page using JQuery?

Question

I have two HTML pages that work in a parent-child relationship in this way:

The first one has a button which does two things: First it requests data from the database via an AJAX call. Second it directs the user to the next page with the requested data, which will be handled by JavaScript to populate the second page.

I can already obtain the data via an ajax call and put it in a JSON array:

$.ajax({
    type: "POST",
    url: get_data_from_database_url,
    async:false,
    data: params,
    success: function(json)
    {
        json_send_my_data(json);
    }
});

function json_send_my_data(json)
{
    //pass the json object to the other page and load it
}

I assume that on the second page, a "document ready" JavaScript function can easily handle the capture of the passed JSON object with all the data. The best way to test that it works is for me to use alert("My data: " + json.my_data.first_name); within the document ready function to see if the JSON object has been properly passed.

I simply don't know a trusted true way to do this. I have read the forums and I know the basics of using window.location.url to load the second page, but passing the data is another story altogether.

What you should do instead is send the address of the data to be loaded to the next page and not the data itself. — TheZ, Jul 16 '12 at 16:50
@Tyler Cromptom: sorry I have never set up a JSFiddle before.. I will try — AGE, Jul 16 '12 at 16:53
@TheZ: I don't understand what you mean by the 'address of the data' since the data itself is held within the 'json' object. — AGE, Jul 16 '12 at 16:54
You are loading the data via ajax first, then wanting to send it to the next page. Why not instead send `get_game_wall_url` to the next page and have it load the data there? No reason to throw a lot of data around when you don't have to. — TheZ, Jul 16 '12 at 16:55
You will need to deserialize the json variable into traditional request parameters, construct the query string, append it to the redirection url, and in the new page, read back the request parameters using Javascript to parse the url. But this is terrible design. — , Jul 16 '12 at 16:58
@TheZ: So basically from php send the data to the next page, thats a neat idea, I will see how to go about this, any suggestions? — AGE, Jul 16 '12 at 17:01
@AGE: Check the code I have posted. Should work. Also, add handleAs: json to your jQuery ajax call. Otherwise how will jQuery know that the server has sent a string that can be parsed to a json object? — , Jul 16 '12 at 17:16
You generally don't use `document.ready` in a jQuery Mobile website because it doesn't fire when pages are brought into the DOM via AJAX. Read this page of the documentation, the big yellow warnings...: http://jquerymobile.com/demos/1.1.1/docs/api/events.html — Jasper, Jul 16 '12 at 17:38

score 2 · Answer 1 · answered Jul 16 '12 at 16:54

2

session cookie may solve your problem.

On the second page you can print directly within the cookies with Server-Script tag or site document.cookie

And in the following section converting Cookies in Json again

How about?

answered Jul 16 '12 at 16:54

Protomen

9,471
9
57
124

Sounds like a good idea, do you have a short and easy sample of how to go about doing this? – AGE Jul 16 '12 at 17:02
I use php for the server side part of the program – AGE Jul 16 '12 at 17:08
great, wait I'll try to send an example – Protomen Jul 16 '12 at 17:09
I'm sorry, I remembered one more thing the response of the SQL is great? Or is it just a result? Why is more than a 1.5 mega may be that the browser ignores the cookie, in which case you could use a txt file. – Protomen Jul 16 '12 at 17:12

score 1 · Answer 2 · edited Jul 16 '12 at 18:29

1

You have two options I think.

1) Use cookies - But they have size limitations.

2) Use HTML5 web storage.

The next most secure, reliable and feasible way is to use server side code.

edited Jul 16 '12 at 18:29

Jasper

75,717
14
151
146

answered Jul 16 '12 at 17:00

Matt

1,953
1
19
42

1

There are far more than two ways to skin this cat. – Jasper Jul 16 '12 at 17:46
You can also use [window.postMessage()](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) to send data between pages on the client-side. – Anderson Green Jun 10 '21 at 00:10

score 1 · Answer 3 · answered Jul 16 '12 at 17:12

Disclaimer: This is terrible, but here goes:

First, you will need this function (I coded this a while back). Details here: http://refactor.blog.com/2012/07/13/porting-javas-getparametermap-functionality-to-pure-javascript/

It converts request parameters to a json representation.

function getParameterMap () {
    if (window.location.href.indexOf('?') === (-1)) {
        return {};
    }
    var qparts = window.location.href.split('?')[1].split('&'),
        qmap   = {};
    qparts.map(function (part) {
        var kvPair = part.split('='),
            key    = decodeURIComponent(kvPair[0]),
            value  = kvPair[1];

        //handle params that lack a value: e.g. &delayed=
        qmap[key] = (!value) ? '' : decodeURIComponent(value);
    });
    return qmap;
}

Next, inside your success handler function:

success: function(json) {
    //please really convert the server response to a json
    //I don't see you instructing jQuery to do that yet!
    //handleAs: 'json'

    var qstring = '?';
    for(key in json) {
        qstring += '&' + key + '=' + json[key];
        qstring = qstring.substr(1); //removing the first redundant &
    }
    var urlTarget = 'abc.html';
    var urlTargetWithParams = urlTarget + qstring;

    //will go to abc.html?key1=value1&key2=value2&key2=value2...
    window.location.href = urlTargetWithParams;
}

On the next page, call getParameterMap.

var jsonRebuilt = getParameterMap();
//use jsonRebuilt

Hope this helps (some extra statements are there to make things very obvious). (And remember, this is most likely a wrong way of doing it, as people have pointed out).

Thank you for your response! I will give this a try but it concerns me that you say this is the wrong way to go about it. What is the way which you would recommend? perhaps this is what I should do instead — AGE, Jul 16 '12 at 17:30
Once on the second page, make an ajax call and get the json. But then, your usecase may be something which I don't understand. All the best! — , Jul 16 '12 at 17:34

score 1 · Answer 4 · edited May 23 '17 at 12:04

1

Here is my post about communicating between two html pages, it is pure javascript and it uses cookies: Javascript communication between browser tabs/windows

you could reuse the code there to send messages from one page to another.

The code uses polling to get the data, you could set the polling time for your needs.

edited May 23 '17 at 12:04

Community

1
1

answered Jul 16 '12 at 17:41

Roman Goyenko

6,965
5
48
81

score 1 · Accepted Answer · edited May 23 '17 at 12:15

Warning: This will only work for single-page-templates, where each pseudo-page has it's own HTML document.

You can pass data between pages by using the $.mobile.changePage() function manually instead of letting jQuery Mobile call it for your links:

$(document).delegate('.ui-page', 'pageinit', function () {
    $(this).find('a').bind('click', function () {
        $.mobile.changePage(this.href, {
            reloadPage : true,
            type       : 'post',
            data       : { myKey : 'myVal' }
        });
        return false;
    });
});

Here is the documentation for this: http://jquerymobile.com/demos/1.1.1/docs/api/methods.html

You can simply store your data in a variable for the next page as well. This is possible because jQuery Mobile pages exist in the same DOM since they are brought into the DOM via AJAX. Here is an answer I posted about this not too long ago: jQuery Moblie: passing parameters and dynamically load the content of a page

Jasper, do you know of any way that works for multiple-page-templates? Even though this answers my question, do you know what can be done about the multiple template element here? — AGE, Jul 16 '12 at 18:13
The link I posted in the second part of my answer will work for you: http://stackoverflow.com/questions/11296156/jquery-moblie-passing-parameters-and-dynamically-load-the-content-of-a-page/11297238#11297238. The demo in my linked answer was made using a multi-page template: http://jsfiddle.net/jasper/wFdet/. — Jasper, Jul 16 '12 at 18:27

How to pass data from one HTML page to another HTML page using JQuery?

5 Answers5

Linked