How to pass value to another page when selected from a listview

Question

html page

<!DOCTYPE html>
<html lang="en">
<head>
  <title>studentDetails</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

   <div class="container">
        <h3>List Of Students</h3>
      <div id="students">
        <ul id="list" class="list-group">        
        </ul>
      </div>
    </div>
    <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type = "text/javascript" src = "app.js"></script>

</body>
</html>

app.js

$.getJSON('data.JSON',function(data){

    for(var i = 0; i < data['students'].length; i++){

        $('#students').append('<li id="' + data['students'][i]['id'] + '"' + 'class="list-group-item"> <a href="details.html">' + data['students'][i]['name'] + " "+ data['students'][i]['surname'] +'</a></li>' ); 
    }    
});

data.json

{"students":[
   {
      "id":"1",
      "name":"Aaa",
      "surname":"Bbb",
      "standard":"7",
      "age":"10"
   },

   {
      "id":"2",
      "name":"ABc",
      "surname":"Pqr",
      "standard":"7",
      "age":"10"
   }
]}

I am trying to pass data which is selected from a listview to another page.

In the first HTML page there is a list of students' names which I had retrieved from JSON.

When a particular student is selected from the listview its corresponding details should be displayed on the next page.

you can do it by `href="//your_next_page_link?varname=student_id"` and on next page you get it by **varname** and retrive student detail from DB and display it. — M Hamza Javed, Feb 03 '17 at 10:17
Your can try in localStorage.setItem("Name", "testName") localStorage.getItem("Name") — Neo Vijay, Feb 03 '17 at 10:27
Possible duplicate of [passing form data to another HTML page](http://stackoverflow.com/questions/14693758/passing-form-data-to-another-html-page) — Alexandre Neukirchen, Feb 03 '17 at 10:28

score 2 · Answer 1 · answered Feb 03 '17 at 11:04

There are multiple ways to pass the data - 1. Pass to server as a url parameter or form data (in either case, it is sent as request parameter). If your select box is under a form and you navigate to next page using form submit, the selected students id is automatically available in next page. If it is not a form and you navigate using a link, attach the selected student id as url parameter of the anchor's href. For example if your page is studentDetails.do , bind a click event to the anchor element and change the href to studentDetails.do?studentId=idof selected student. You can use javascript for this.

Keep in client browser - use window.sessionStorage or window.localStorage for this purpose. Some old browsers dont support local storage and session storage. In that case you can save the data as cookie (if the object you want to pass is a complex object, stringify it using JSON.stringify and then save as cookie), Though using cookie for this purpose (of transferring data from one page to next) not recommended as original usage of cookie is to keep data from server at client for a session or a limited period of time.

In either case , make sure that you clear the localStorage/sessionStorage/cookie when you load the 2nd page, so that it doesnt stay as residue.

Please let me know if you require a detailed code.

Please see answer added below. It is request parameter based approach. Hope this will work for you. — ABHIJITH GM, Feb 04 '17 at 04:52

score 0 · Answer 2 · answered Feb 03 '17 at 10:27

0

Maybe use localStorage for this?

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

localStorage.setItem('myCat', 'Tom');

According to this you will be able to pass some data/objects through several pages. It's super ease too.

answered Feb 03 '17 at 10:27

Lukas

7,384
20
72
127

What would happen if user have several pages open? Selection on one page will mess with selection on another page. – Pavel Morshenyuk Feb 03 '17 at 10:49

score 0 · Accepted Answer · answered Feb 04 '17 at 04:51

From the code you shared above, what I understand is that you are not using a form and html select, instead it is ul-li elements dynamically populated from a rest call json response. Now assume that you want to

Now suppose you want to naviagate to new page when clicking the list element, and retrieve the student id from next page

$(document).on("click" ,"li.list-group-item",function(event){
/// since you are putting the li elements id as student id
window.location.href="new pages url?studentId="+$(this).attr("id"); 
}

This will make the page navigate to next page and in the server side you will get the studentId from request parameter . If your server is j2ee based, eg A jsp , then you can get the student id using request.getParameter() and pass that to buiness layer API of your server side application to retreive full student data from student id.

How to pass value to another page when selected from a listview

3 Answers3