CODEWITHSUNDEEP
javascripthtmljquery-mobilelocal-storageweb-sql
Matt Meadows
Matt Meadows

Reputation: 157

Dynamically create page in jquery mobile, only to include specific data from websql database

I have an application that has a page where all id's are selected from the table and specific bits of information are shown in html. What i would like to do next is to make each of these elements as a whole a link to essentially, a 2nd level down.

This level down page will reveal all information bound to that row's id, is it possible to build this in a way that is dynamic?

I am using jQuery mobile to build pages, and i'd like to use 1 template and append the relevant html elements into it, and populate each with the id bound information.

I hope this makes some sense, and any guidance or suggestions would be greatly appreciated.

Crude Example of what i want to achieve

The above mockups represent what i would like to achieve, the left image displays a list of all rows in the table, upon clicking one of them, you are taken to another page, with only information for that particular id.

Can i achieve this for each item within the list?

Upvotes: 0

Views: 192

Answers (1)

Sga
Sga

Reputation: 3658

It's a good navigation example and it's not difficult to implement.

Since the information is coherent (every DB row has the same columns), create just one empty template (edit: it's now based on your PasteBin):

<div data-role="page" id="route_details">
    <div data-role="header">
        <a data-rel="back"><i class="fa fa-arrow-left"></i></a>
        <h1 id="walkTitle"></h1>
    </div>
    <div data-role="main" class="ui-content">
        <div class="finishedRouteInfo">
            <div class="mapDetails" style="width: 100%; height: 150px;"></div>
                <div class="ui-grid-a">
                    <div class="ui-block-a home_btns no_border">
                        <div class="ui-block-a finishedDistance"><i class="fa fa-map-marker"></i></div>
                    <div class="ui-block-b"><p>Distance <br/><span id="finalDistance" class="value"></span></p></div>
                </div>
                <div class="ui-block-b home_btns">
                    <div class="ui-block-a finishedDistance"><i class="fa fa-clock-o"></i></div>
                    <div class="ui-block-b finishedDuration"><p>Duration <br/><span class="value" id="finalDuration"></span></p></div>
                </div>
                <span class="horizontalSplitter"></span>
                <div class="walkDescription"></div>
            </div>
    </div>
</div>

The code in your PasteBin cannot work because you are creating multiple pages with elements having the same IDs (i.e.: finalDistance, finalDuration). Also, you are creating many pages which probably the user will never see.

So, simplify your loading function:

var last_results = [];
$(document).on("pageinit", "#my-routes", function() {

    db.transaction(function(t){
            t.executeSql('SELECT * FROM WALKS', [], querySuccess, errorCB);
    });

    function querySuccess(t, results, Element) {
        last_results = results;
    }
});

and delay the content/map creation just before showing the page with route details:

$("#route_details").on("pagecontainerbeforeshow", function()
{
    // use your DB data
    var data = last_results.rows.item(clicked_route);
    $("#walkTitle).html(data.WalkTitle);
    $(".walkDescription").html(data.WalkDescription);
    // ...create the map and fill the rest...
});

You just have to link each route to this page, setting clicked_route when the link is clicked using something like this:

<a class="walkPage" href="#route_details" data-route="0">Route 0</a>
<a class="walkPage" href="#route_details" data-route="1">Route 1</a>
<a class="walkPage" href="#route_details" data-route="2">Route 2</a>

JavaScript:

$(document).on("click", ".walkPage") {
    clicked_route = parseInt($(this).attr("data-route"));
});

...Since you have to show the route map in two different pages, refactor your code so that you can easily create a map and add it to any page.

Hope it's sufficiently clear to fully implement it.

Upvotes: 1

Related Questions