Fetched data not being displayed on a new page (JavaScript/HTML)

Question

I am attempting to get the data fetched from the query to be displayed on a different page, however the data is not being displayed on a new page.

The table was being displayed with the data correctly on the same page as the search, however when I tried to change things around so the data is shown on a new page it doesn't work.

I am using JQuery mobile, so it's a one page structure (all pages under index.html) and I have all my javascript on a separate file.

Can anyone see the issue here?

Fetching data function:

    function fetchEvent()
             {
          db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2*1024*1024);
          db.transaction(foundEvent, errorCB);
         }

          function foundEvent(tx)
            {
            var TitleT = document.getElementById("texttitle").value;
           tx.executeSql("SELECT * FROM SoccerEvents WHERE Title LIKE '%" + TitleT + "%'", [], renderEvent);
                        }

function renderEvent(tx, response) {
   /* var div = document.getElementById("responsediv"); */
    var temp = "<table border=\"1\"><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr>";

    for (var i = 0; i < response.rows.length; i++) {
        temp += "<tr><td>" + response.rows.item(i).Title + "</td><td>" + response.rows.item(i).Location + "</td><td>" + response.rows.item(i).NoPeople + "</td><td>" + response.rows.item(i).Date + "</td><td>" + response.rows.item(i).Description + "</td></tr>";
         /* div.innerHTML = temp; */
    }
    var page6 = window.open("#page20", "mywin", '');
    page6. dataFromParent = temp;
    page6.render();
}
    var dataFromParent;
    function render() {
        $('datadisplay').innerHTML(dataFromParent);
    }

HTML (page 6):

    <div data-role="page" id="page20" data-theme="d">

    <div data-role="content">
        <div id="datadisplay">
        </div>
    </div>
</div>

you need # to select an element by id using jquery => $('#datadisplay') also make sure dataFromParent gets populated from your query soon enough before render() gets clalled. — Mateen Kajabadi
– Mateen Kajabadi, Commented Mar 31, 2016 at 20:28
I changed the elementbyid from responsediv to datadisplay, however no changes. Do you see any other issues? — Mahdi
– Mahdi, Commented Mar 31, 2016 at 21:03
log or alert(dataFromParent) inside render() to see if you get anything — Mateen Kajabadi
– Mateen Kajabadi, Commented Mar 31, 2016 at 21:08
Still nothing. The page is opening up correctly, however no data. So i assume the issue is to do with the data being displayed within the div, maybe? — Mahdi
– Mahdi, Commented Mar 31, 2016 at 21:53
Are you able to show as an answer how it should be structure? — Mahdi
– Mahdi, Commented Mar 31, 2016 at 21:53

IamKarim1992 · Accepted Answer · 2016-04-04 11:51:53Z

1

for (var i = 0; i < response.rows.length; i++) {
        temp += "<tr><td>" + response.rows.item(i).Title + "</td><td>" + response.rows.item(i).Location + "</td><td>" + response.rows.item(i).NoPeople + "</td><td>" + response.rows.item(i).Date + "</td><td>" + response.rows.item(i).Description + "</td></tr>";
         /* div.innerHTML = temp; */
    }

Ok , So u want a different page to show your data , When u move to another page response object which has your data is getting lost . I would suggest you to make a whole new page. Something in this line.

 var formElements = "<table id='resulttable' data-role='table' data-mode='reflow' class='ui-responsive table-stroke table-stripe'><thead><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr></thead><tbody>";
                        for (var i = 0; i < response.rows.length; i++) {
                           formElements += "<tr><td>" + response.rows.item(i).Title + "</td><td>" + response.rows.item(i).Location +"</td><td>" + response.rows.item(i).NoPeople + "</td><td>" + response.rows.item(i).Date +"</td><td>" + response.rows.item(i).Description + "<a href='map.html' rel='external' data-ajax='false' data-role='button' data-mini='true'>View on Map</a></td></tr>";
                        }

                formElements+="</tbody></table>";
                $('#page_body').append('<div data-role="page" data-theme="d" id="' + page_id + '"><div data-role="content">' + formElements + '<a href="#page4" data-role="button" data-mini="true">Return</a></div></div>');
                $.mobile.initializePage();
                $.mobile.changePage("#" + page_id);

page_id is specific id of the dynamic page , which u can set

Now you might need to make a few customization according to you.But the logic is you are making an entire div all from scratch and appending it . Now you need to write a function FORWARD() which would have your logic for navigation and BACK which would have your logic for BACK functionality . Hope it helps.

edited Apr 4, 2016 at 11:51

answered Apr 1, 2016 at 7:49

IamKarim1992

6468 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mahdi Over a year ago

Thanks for this mate. My JavaScript knowledge isn't too great, so the above makes a little sense but not enough for me to be table to put everything together. We could do jsfiddle if you are available?

IamKarim1992 Over a year ago

OK , I am new to stackoverflkow and have never worked with JS fiddle . But surely i would try to help.

Mahdi Over a year ago

Do you have skype? As we would need to instant chat

Mahdi Over a year ago

I have put my code in here, so you just join the session and you can change the code around. I'll also be in the session. jsfiddle.net/xjqvh3qb/1/#&togetherjs=HAo6CqaVv2

Collectives™ on Stack Overflow

Fetched data not being displayed on a new page (JavaScript/HTML)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related