Question

我正在编写一个处理脚本，允许用户在表单的隔离专区中输入数据并保存每个部分，而不是一次完成整个页面。它本质上是页面内可扩展元素内的一系列表单。但是，在向自己提交任何表单后，页面无法重新加载任何javascript。在jquery mobile的文档中，它确实说这可能有问题，但我无法使其中提供的任何解决方案都有效。

我已将我的代码剥离到一个非常基本的框架进行故障排除：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body onload = myFunction("<?php echo $_GET['p']?>")>
<script>

function myFunction(tab)
{
$('#content_'+tab).collapsible('expand'); 
}
</script>
    <div data-role="collapsibleset" class="ui-content">
        <div id = "content_1" data-role="collapsible">
            <h1>Click me - I'm collapsible!</h1>
            <form action = "<?php echo $_SERVER['PHP_SELF'] . "?p=1"?>" method="GET">
                <div><input type="submit" id="Button1" name="" value="Save"></div>
            </form>
        </div>
        <div id = "content_2" data-role="collapsible">
            <h1>Click me - I'm collapsible!</h1>
            <p>I'm the expanded content.</p>
        </div>
        <div id = "content_3" data-role="collapsible">
            <h1>Click me - I'm collapsible!</h1>
            <p>I'm the expanded content.</p>
        </div>
        <div id = "content_4" data-role="collapsible">
            <h1>Click me - I'm collapsible!</h1>
            <p>I'm the expanded content.</p>
        </div>
        <div id = "content_5" data-role="collapsible">
            <h1>Click me - I'm collapsible!</h1>
            <p>I'm the expanded content.</p>
        </div>
    </div>
</body>
</html>

代码正在尝试完成一项简单的任务。提交表单时，将其发送给自己，其中一些PHP脚本将处理结果，然后页面将更新加载到表单字段中。这一切都很完美，没有按照预期做的部分是myFunction进程，它应该将活动的可扩展内容设置为content_的值（无论数字是在$ _GET ['p']中）。

我认为在正文中使用它会强制更新页面加载，但jquery mobile的行为方式不同。

我也试过在标题中加载单独的.js文件中的js无济于事。

我甚至尝试将所有java脚本包含在div元素中，并在所有可扩展内容元素周围使用该包装，因为jQuery文档说（我认为）只加载了div元素。

提交表单时，会对其进行处理，但不会自动展开任何内容。如果您手动刷新页面，它会按原样展开，但您不需要在单击保存后手动刷新页面。

我也尝试过使用

  <script>
$( document ).on( "pagecreate", function( event ) {
    var tab = <?php echo $_GET['p'];?>;
    alert(tab);
$('#content_'+tab).collapsible('expand');
});

</script>

上面的内容将回显p的正确值，但不会将扩展指定给任何东西。我尝试在可扩展的div元素之前和之后包含它。

我已经没有想法试图让它加载，我错过了一些简单的东西，还是有一种我还没有遇到过的替代方案？

Answer 1

尝试将其放入pagecontanershow事件中，然后根据加载的页面放置一个开关来运行脚本。请记住，当使用AJAX导航时，JQM仅加载第二页和后续页面的主体，从头部加载的JS仅在第一页加载时加载，因此您需要使其全部可用。

$(document).on("pagecontainershow", function(event, ui) {

console.log('pagecontainershow::navigating to page ' + ui.toPage.attr('id'));

page_id = ui.toPage.attr('id');


switch (page_id) {
case 'page-id1':
    //some page specific code here
    break;
case 'page-id2':
    //some more here
    break;
}
});

Answer 2

我不确定这在技术上是否正确，但是它起作用并包含很少的改动。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body onload = myFunction("<?php echo $_POST['p']?>")>
<script>
function myFunction(tab)
{
$('#content_'+tab).collapsible('expand'); 
}
</script>

<div data-role="collapsibleset" class="ui-content">
    <div id = "content_1" data-role="collapsible">
        <h1>Click me - I'm collapsible!</h1>
        <form data-ajax="false" action = "<?php echo $_SERVER['PHP_SELF']?>" method="POST">
            <input type = "hidden" name = "p" value = "1">
            <div><input type="submit" id="Button1" name="" value="Save"></div>
        </form>
    </div>
    <div id = "content_2" data-role="collapsible">
        <h1>Click me - I'm collapsible!</h1>
        <form data-ajax="false" action = "<?php echo $_SERVER['PHP_SELF']?>" method="POST">
            <input type = "hidden" name = "p" value = "2">
            <div><input type="submit" id="Button1" name="" value="Save"></div>
        </form>
    </div>
    <div id = "content_3" data-role="collapsible">
        <h1>Click me - I'm collapsible!</h1>
        <form data-ajax="false" action = "<?php echo $_SERVER['PHP_SELF']?>" method="POST">
            <input type = "hidden" name = "p" value = "3">
            <div><input type="submit" id="Button1" name="" value="Save"></div>
        </form>
    </div>
    <div id = "content_4" data-role="collapsible">
        <h1>Click me - I'm collapsible!</h1>
        <form data-ajax="false" action = "<?php echo $_SERVER['PHP_SELF']?>" method="POST">
            <input type = "hidden" name = "p" value = "4">
            <div><input type="submit" id="Button1" name="" value="Save"></div>
        </form>
    </div>
    <div id = "content_5" data-role="collapsible">
        <h1>Click me - I'm collapsible!</h1>
        <form data-ajax="false" action = "<?php echo $_SERVER['PHP_SELF']?>" method="POST">
            <input type = "hidden" name = "p" value = "5">
            <div><input type="submit" id="Button1" name="" value="Save"></div>
        </form>
    </div>
</div>
</body>
</html>

essentialy我需要添加数据-ajax =＆＃34; false＆＃34;每个表单，从我收集到的内容，使它完全加载页面。它只适用于method =＆＃34; POST＆＃34;，但正如代码所示，它只是一个微小的变化。

此处的代码为表单元素创建了5个可扩展的框，当单击保存按钮时，表单将自动提交，并且发送它的可扩展框将被触发以展开和激活。

如果这将在未来出现问题，请对此发表评论，否则我会喜出望外。

向自己提交表单后的jQuery移动加载脚本

2 个答案: