在jquery mobile中动态创建页面,仅包含来自websql数据库的特定数据

马特·梅多斯(Matt Meadows)

我有一个应用程序,该应用程序的页面从表中选择了所有ID,并且在html中显示了特定的信息位。接下来,我想做的就是将所有这些元素作为一个整体链接到第二层。

此下移页面将显示与该行的ID绑定的所有信息,是否可以动态方式构建它?

我正在使用jQuery mobile构建页面,我想使用1个模板并将相关的html元素附加到其中,并使用ID绑定信息填充每个模板。

我希望这是有道理的,任何指导或建议将不胜感激。

我想要实现的粗略示例

上面的模型代表了我想要实现的目标,左图显示了表中所有行的列表,单击其中的一个行后,您将被带到另一页,仅包含该特定ID的信息。

我可以为列表中的每个项目实现此功能吗?

ga

这是一个很好的导航示例,实现起来并不难。

由于信息是连贯的(每个数据库行都具有相同的列),因此仅创建一个空模板(edit:现在基于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>

PasteBin中的代码无法正常工作,因为您正在使用具有相同ID(即finalDistancefinalDuration)的元素创建多个页面另外,您正在创建许多用户可能永远看不到的页面。

因此,简化您的加载功能:

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;
    }
});

并在显示包含路线详细信息的页面之前延迟内容/地图的创建:

$("#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...
});

您只需要将每条路线链接到此页面,使用以下方式设置clicked_route点击链接的时间:

<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"));
});

...由于必须在两个不同的页面中显示路线图,因此请重构代码,以便轻松创建地图并将其添加到任何页面。

希望它足够清楚地完全实施它。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在jQuery Mobile Change页面上单击动态创建的列表(来自JSON的数据)

从数据库动态创建表单并使用jquery访问元素

sQLite数据库文件的创建位置,存储在jQuery Mobile Application中

SQLite数据库+ Jquery Mobile

jQuery Mobile +动态创建的页面

如何使用jQuery在数据库中创建表

如何使用 JQuery 显示来自 JSON 的特定数据?

如何使用JQuery将值从动态创建的表传递到新的数据库查询中?

在ASP.NET Core中使用jQuery动态创建选择并添加数据库中的选择选项

如何使用JSON数据动态填充jQuery Mobile页面?

将数据存储在jQuery Mobile多页面应用程序中页面的特定实例本地

转换日期格式来自使用jquery / javascript的数据库

来自数据库jQuery的字母手风琴

jquery如果来自foreach数据库的多个值

在jQuery Mobile中创建动态对话框页面

仅显示包含数据库值的数组中的特定数据

如何使用jquery或php在html中显示来自MySql数据库的链接

CodeIgniter用jQuery动态输入并插入数据库

AJAX JQuery数据库

如何使用jQuery动态创建包含数据列表的HTML输入?

不刷新页面如何使用ajax / jQuery显示数据库中的值

jQuery通过select动态显示数据库中的表

将动态生成的html属性保存在数据库中(Asp.Net,Jquery)

使用 jQuery 将数据库中的选择选项填充到动态选择选项

通过javascript和jquery从数据库中检索数据

Jquery 无法调用异步并等待创建索引数据库

用 jquery 按 ID 替换表中的特定数据

使用 jQuery 或 Javascript 从 Cookie 中删除特定数据

在JQuery Mobile,PhoneGap应用程序中动态缓存数据