How can change page with a needed parameter for the next page

Question

Good evening,

On the main page, I have some stations with a link to get the graph of the measures of the station On the graph page I need to get the ID of the station before making a request to the data base.

for example, a link can be as the following

<a href="#graph" data-inline="true">see the graph</a>

But how can I specify the id of the station? Should it be

<a href="#graph?id=2" data-inline="true">see the graph</a>

or should it be a data-id (or somethings similar)

<a href="#graph" data-id="1" data-inline="true">see the graph</a>

Next, of course, I need to get the ID form the #graph page to use it in my MySQL request

$( document).on( "pagebeforecreate", "#graph", function( e ) {
     $('#containerChart').css('height', Charts.resize() +'px');
});

I beleive, Jquerymobile has a fonction for that isn't?

Could you help me this ?

EDIT: In other words with PHP, I would create a link on the source page:

<a id="source" href="target.php&id=3>target page"</a>

and on the target page, I would write this, to get the ID

<?php echo $_GET['id']; ?>

I need to do the same with jquerymobile. Ma source page is #home and ma target page is #graph

Many thanks

Answer 1

Thanks a lot. It's help me a lot, that's was the answer.

I make it simpler and this works well (let I know if we can make better)

On the source page:

<a href="#graph?id=2" data-inline="true">see the graph</a>

The function to parse the URL parameter. It's very nice!!

var processHash = function( url ) {
    var parsed = $.mobile.path.parseUrl( url ),
        queryParameters = {},
        hashQuery = parsed.hash.split( "?" );
    // Create name: value pairs from the query parameters
    $.each( ( hashQuery.length > 1 ? hashQuery[ 1 ] : "" ).split( "&" ), function() {
        var pair = this.split( "=" );
        if ( pair.length > 0 && pair[ 0 ] ) {
            queryParameters[ pair[ 0 ] ] =
                ( pair.length > 1 ? pair[ 1 ] : true );
        }
    });
    return {
        parsed: parsed,
        cleanHash: ( hashQuery.length > 0 ? hashQuery[ 0 ] : "" ),
        queryParameters: queryParameters
    };
};

The handler:

$(document).on( "pagecontainerbeforechange", function( event, data ) {

    // See example: https://demos.jquerymobile.com/1.4.5/navigation-hash-processing/#secondary-page?section=My%20Area
    var processedHash;
    if ( typeof data.toPage === "string" ) {
        processedHash = processHash( data.toPage );
        // Only apply to the #graph page
        if ( processedHash.cleanHash === "#graph" ) {
            // To get the value of st parameter (chage that to the name of your parameter)
            //console.log("HASH: ",processedHash.queryParameters.st);
            if(processedHash.queryParameters.st == undefined || processedHash.queryParameters.st == null || processedHash.queryParameters.st == 0)
            {
                //Load the chart of the station 1
                Charts.load(1);   
            }
            else
            {
                //Load the chart of the station of the id of st
                Charts.load(processedHash.queryParameters.st);
            }
        }
    }
    
});

That works fine. Thanks for your help!!