Pass values from one page to another in dojo

Question

I have a standalone page(page1.htm) designed in dojo which has couple of filters and a grid. On entering the values in filter grid is populated with values. Now i had to develop another page(page2.htm) which has a grid in it. Now when user clicks on a row in the grid I need to pass values(which are same as filters of page1) from here to page1 and populate grid based on passed on values from page2.htm.

please let me know how i can achieve this

The javascript enviroment does not persist across pages. This would be a massive security flaw. You need to do one of the following 1. Stay on the same page. 2. Pass these values back and forth to a server. 3. Store the data in offline storage. — Matt R, Feb 07 '14 at 18:09

score 0 · Answer 1 · edited May 23 '17 at 10:25

There are a number of ways to do this, but I think for the majority of cases, it's easiest to just pass the values as URL parameters.

It's important that you're aware that this doesn't really have anything to do with Dojo. This is standard, fundamental web browser functionality. That said, Dojo does have a module you may find helpful: dojo/io-query (I assume here that you're using a recent version of Dojo).

Let's say your page1.htm has a function called rowClicked which is called when a grid row is clicked. In this function, you grab the values that page2.htm needs, and then tell the browser to open page2.htm with the values appended as URL parameters.

var rowClicked = function() {
    var someValue = getSomeValue(),
        someArray = [ 13, 42 ];

    window.location.replace('./page2.htm?someValue=' + someValue + 
                                       '&someArray=' + someArray[0] + 
                                       '&someArray=' + someArray[1]);
};

That can be a little cumbersome if you have many values though. Let's use Dojo's io-query instead:

require([/*..your other dependencies..,*/ "dojo/io-query"],
    function(/*..other dependencies..,*/ ioQuery) {

    //.. your other code ..
    var rowClicked = function() {
        var values = {
            someValue: getSomeValue(),
            someArray: [ 13, 42 ]
        };

        window.location.replace('./page2.htm?' + 
                                ioQuery.objectToQuery(values));
    };
    // ....

On page2.htm, let's say a function called loadValues is called when the page is loaded. In this function, we take the values from the URL parameters, and do whatever we need with them. Again, we use Dojo's io-query. (But keep in mind that you could easily do this without any libraries too! See this answer for some ideas: How can I get query string values in JavaScript? )

var loadValues = function() {
    var page1Values= ioQuery.queryToObject(window.location.search.slice(1));
    console.log("Here are the values: ", 
                page1Values.someValue,
                page1Values.someArray[0],
                page1Values.someArray[1]);
};

(Again, you must have loaded dojo/io-query earlier in your code, of course.)

In the above example, we've used URL parameters to send values from page1 to page2. URL parameters are sent to the server when page2 is requested, so it's possible that they collide with other parameters in your URL.

A different way to pass the values to page2, while still using the browser location, is to use the "hash" part of it. Spot the tiny difference:

your.site/page2.htm?someValue=abc&someArray=13&someArray=42 // URL parameters
your.site/page2.htm#someValue=abc&someArray=13&someArray=42 // hash part

The parameters in the second line are not sent to the server. As you'd expect, the change to the code above would be quite small. On page1.htm, replace the window.location line with:

window.location.replace('./page2.htm#' +

.. and on page2, change the window.location line with:

var page1Values= ioQuery.queryToObject(window.location.hash);

Pass values from one page to another in dojo

1 Answers1