Maintaining temporary data across pages in phonegap using jquery mobile

Question

I am learning to develop mobile app using Phonegap and jquery mobile.

I have the main page with a list (index.html).
If user taps on an item, it should go on the next page.
Now this next page takes the id of the item, and the next page (a separate html file, second.html) contains the details related to this item.

So I need to know the id of the item tapped on the main page, and this second.html should display data accordingly.

What I want to know is, what do I use to pass the id from main page to second page? I am currently trying to pass data by using GET parameter (second.html?id=xyz), but don't know how to catch it on the second page.

I also read a method using localstorage, But i am not sure if that is a good idea, considering this will go on with the user going to third page, fourth page, and so on. so there'll be a lot of data saving into the local storage.

First page:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <link rel="stylesheet" type="text/css" href="js/Jquery/jquery.mobile-1.4.5.css" />
  <title>Restaurant App</title>
  <script type="text/javascript" src="js/configs/server.js"></script>
  <script type="text/javascript" src="js/Jquery/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="js/Jquery/jquery.mobile-1.4.5.js"></script>
</head>

<body>

  <div data-role="page" id="local">
    <div data-role="main" class="ui-content">
      <h2> Nearby Restaurants</h2>

      <ul data-role="listview" data-inset="true" id="nearbyrestaurs">
      </ul>
      <script type="text/javascript">
        var li = "";
        $.getJSON(hostname + "/restaurants/?format=json", function(data) {
          $.each(data, function(item, value) {
            li = "<li><a rel=external  href='menu.html?restid=" + value["id"] + "'>";
            li += "<img  src='";
            li += hostname;
            li += value["dp"];
            li += "' class='ui-li-icon'>";
            li += value["name"]
            li += "</a></li>";
            $("#nearbyrestaurs").append(li).listview('refresh');
          });
        })
      </script>
    </div>
  </div>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <link rel="stylesheet" type="text/css" href="js/Jquery/jquery.mobile-1.4.5.css" />
  <title>Restaurant Menu</title>
  <script type="text/javascript" src="js/configs/server.js"></script>

  <script type="text/javascript" src="js/Jquery/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="js/Jquery/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div data-role="page" id="menupage">
    <script type="text/javascript">
    </script>
    <div data-role="main" class="ui-content">
      <h2> Menu</h2>
      <ul data-role="listview" data-inset="true" id="Menus">
      </ul>
      <script type="text/javascript">
        $.urlParam = function(name) {
          var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(location.search);
          if (results == null) {
            return null;
          } else {
            return results[1] || 0;
          }
        }
        var li = "";
        restid = $.urlParam('restid');
        $.getJSON(hostname + "/menus/?format=json&restid=" + restid, function(data) {
          $.each(data, function(item, value) {
            li = "<li><a href='";
            li += "#"
            li += "' class='ui-li-icon'>";
            li += value["name"];
            li += "</a></li>";
            $("#Menus").append(li).listview('refresh');
          });
        })
      </script>
    </div>
  </div>
</body>

</html>

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

You can use location.search:

var params = location.search;

Params will have ?id=xyz. After that you can parse the string to obtain what you want.

Here is a related question :

Passing Data between pages with JQuery Mobile

edited May 23 '17 at 11:58

Community

1
1

answered May 08 '15 at 17:11

Juan Marcos Armella

737
6
13

But this is working only if the anchor tag on the source page has "rel=external" .. Any other option? – Kartik May 08 '15 at 17:29
Can you include some of the code? Maybe i can help you more with that. Sry for bad english. – Juan Marcos Armella May 08 '15 at 17:37

Steve Kennedy · Answer 2 · 2015-05-08T21:17:29.180

You have a function like this already:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Usage:

var yourId = getParameterByName('Id');

Maybe, your specific case could be:

$.getJSON(hostname + "/menus/?format=json&restid=" + $.urlParam('restid'), function(data) {

Or possibly:

$.getJSON(hostname + "/menus/?format=json&restid=" + getParameterByName('restid'), function(data) {

Maintaining temporary data across pages in phonegap using jquery mobile

2 Answers2