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

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。使用诸如“pageload”之类的 jQuery 移动事件之一（我还没有过多地研究事件被触发的确切时刻）开始通过 ajax 加载您的团队日程安排，并使用您在链接单击时获取的数据属性。完成后，显示时间表。