将表单提交给自己后的jQuery移动加载脚本答案

【问题标题】：jQuery mobile loading script after submitting form to self将表单提交给自己后的jQuery移动加载脚本
【发布时间】：2016-02-18 22:17:45
【问题描述】：

我正在编写一个处理脚本，它允许用户在表单的隔间中输入数据并保存每个部分，而不是一次性完成整个页面。它本质上是页面内可扩展元素内的一系列表单。但是，在向自身提交任何表单后，页面无法重新加载任何 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 元素之前和之后包含它。

我没有办法尝试让它加载，是我遗漏了一些简单的东西，还是有一个我还没有遇到过的替代方法？

【问题讨论】：

能否请您创建一个jsfiddle 的问题？
我不能，它不允许我输入任何发送数据的 php 代码。即使省略了 php，由于某种原因，它也不会加载 jquery mobile。我以前从未使用过 jsfiddle，但我可能做错了......

标签： javascript jquery-mobile

【解决方案1】：

尝试将其放入您的 pagecontanershow 事件中，然后根据已加载的页面放置一个开关以运行脚本。请记住，当使用 JQM 仅加载第二个和后续页面的正文的 AJAX 导航时，从标题加载的 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;
}
});

【讨论】：

对不起，我无法很好地遵循上面的语法。我将它作为一个独立的函数输入，但是当我将它输出为未定义时，我不确定如何获得变量“id”。我的代码应始终重定向回自身，对 url 的唯一更改将是最后的 hte ?p= 变量。

【解决方案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>

本质上，我需要将 data-ajax="false" 添加到每个表单中，从我收集的内容中可以使它完全加载页面。它只能与 method="POST" 一起使用，但正如代码所示，这是一个微小的变化。

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

如果这将来会出现问题，请对此发表评论，否则我很高兴它会顺利进行。

【讨论】：

使用 Ajax。无需重复自己。阅读有关 pagecontainer 事件的更多信息，以了解 jQM 函数/方法何时起作用。