Question

我正在尝试使用jQuery Mobile构建本机移动应用程序，然后将其包装在PhoneGap中。这是我构建移动应用程序的第一次尝试，我对一个通常很简单的主题感到很沮丧。我的应用程序将允许用户浏览高中橄榄球队的分数，时间表和统计数据。我有一个页面，显示所有团队的下拉列表（#search-schedules）。用户将选择一个团队，团队ID值将被发布，该团队的日程安排将显示在另一个页面上（#schedules）。我包含一个custome.js文件，其中包含整个应用程序所需的所有jQuery。到目前为止我（处理这个问题）的内容如下。我们非常感谢能够实现这一目标的最佳方向。

这是用户选择团队的页面：

<div data-role="page" id="search-schedules">
    <div data-role="header"><h1>Find Schedules</h1></div>
    <div data-role="content">
        <p align="center"><strong>Select a school from the list below to view their schedule</strong></p>
        <form id="schedules-form" data-transition="pop" data-direction="reverse" />
            <div align="center" data-role="fieldcontain">
                <select name="school" id="school-select">
                    <option value="">Select A School</option>
                </select>
                <p><input type="submit" id="submit" name="submit" value="Get Schedule" data-theme="b" /></p>
            </div>
        </form>
    </div>
    <ul data-role="listview" data-dividertheme="e">
        <li><a href="#home" data-transition="slide">Home Page</a></li>
    </ul>
    <div data-role="footer"><h1>Footer</h1></div>
</div>

这是显示日程安排的页面：

<div data-role="page" id="schedules">
    <div data-role="header"><h1>Schedules</h1></div>
    <div data-role="content">
        <h2 align="center"></h2>
        <div id="schedule-div"></div>
    </div>
    <ul data-role="listview" data-dividertheme="e">
        <li><a href="index.php" data-transition="slide">Home Page</a></li>
    </ul>
    <div data-role="footer"><h1>Footer</h1></div>
</div>

这是提交表单的JS：

$('#schedules-form').bind('submit', function (e) {
    e.preventDefault();
    $.post(serviceURL + 'schedules.php', $(this).serialize(), function(response) {
        $.mobile.changePage('#schedules', {
            transition: 'slide'
        });
    });
});

这是显示时间表的JS：

$('#schedules').live('pageshow', function(event) {
    var team = ''; // How do I grab a POST variable?
    $.post(serviceURL + 'schedules.php', team, function(data) {
        var games = data.item;
        $.each(games, function(index, game) {
            $('#schedule-div').append('<p>' + game.game_date + ' - ' + game.visitor_team + ' @ ' + game.home_team + '</p>');
        });
        $('#schedule-div').listview('refresh');
    });
};

Answer 1

根据我的理解，jQuery mobile实际上并没有改变你当前的页面，它只是将后续页面加载到DOM中。让您的团队链接触发页面转换并传递使用'data-teamId'属性检索团队计划所需的ID。使用jQuery移动事件之一，例如'pageload'（我还没有太多关注事件发生的确切时刻），开始通过ajax加载你的团队日程安排，并使用你在链接点击上抓取的数据属性。完成后，显示计划。

jQuery Mobile本机应用程序表单发布到另一个页面

1 个答案: