在Jquery mobile中的一个页面中包含几页

I am working on an application using jquery mobile. I need to include a few pages in one preview page before a final Submit of form.

我正在使用jquery mobile处理应用程序。我需要在最终提交表单之前在一个预览页面中包含几页。

Here is a basic idea about my application. It needs at least 10-15 forms to collect the data from user. And my html looks something like this:

这是关于我的应用程序的基本概念。它需要至少10-15个表单来收集用户的数据。我的HTML看起来像这样：

<html>
    <head>
        <title>Title</title>
    </head>
    <body>    
        <div data-role="page" id="login-page">

        </div>

        <div data-role="page" id="form1-page">
            <!-- CONTENT -->
        </div>

        <div data-role="page" id="form2-page">
            <!-- CONTENT -->
        </div>

        <div data-role="page" id="preview-page">
            <!-- CONTENT -->
        </div>
    </body>
</html>

I have linked my Preview button to preview page. The problem is, I want to include all the forms' page with filled values in preview page dynamically.

我已将“预览”按钮链接到预览页面。问题是，我想动态地在预览页面中包含填充值的所有表单页面。

Can anyone help me with that?

任何人都可以帮助我吗？

P.S: I already tried to google. I found this answer. But may be I misunderstood something as it didn't work in my case.

P.S：我已经尝试过google了。我找到了这个答案。但可能是我误解了一些东西，因为它在我的情况下不起作用。

Note: I am rendering this in android webview.

注意：我在android webview中呈现这个。

2 个解决方案

#1

Finally, I achieved what I wanted. It was not that difficult. I can't get why anyone couldn't give any hint! :(

最后，我实现了我想要的。这并不困难。我无法理解为什么有人不能给出任何暗示！ :(

I am posting my answer here so that it can help someone in future for similar problem.

我在这里发布我的答案，以便它可以帮助将来有类似问题的人。

Firstly, I added following in .js file.

首先，我在.js文件中添加了以下内容。

$("#preview-page").live('pageinit', function() {
    $('#divPage1Preview').html($('#page1-content').clone());
        $('#divPage2Preview').html($('#page2-content').clone());
});

Here, divPage1Preview, divPage2Preview are blank divs defined in preview-page form. And page1-content, page2-content are ids for content div in form1-page and form2-page.

这里，divPage1Preview，divPage2Preview是以预览页面形式定义的空白div。 page1-content，page2-content是form1-page和form2-page中content div的id。

From this, I could get all the fields but not the values inside it. So I changed my html a bit like:

从这里，我可以得到所有的字段，但不是里面的值。所以我改变了我的html有点像：

<div data-role="content" id ="page1-content" data-dom-cache="true">
<div data-role="content" id ="page2-content" data-dom-cache="true">

So now it is working as per my requirement.

所以现在它按照我的要求工作。

Hope this helps someone in future. :)

希望这有助于将来的某些人。 :)

#2

Perhaps breaking the form into smaller pieces would be best. Each page would have a form with an ID of form-part-#. When each form is submitted, it validates the current form, adds the form data to the last form as hidden elements, and then calls $.mobile.changePage();

也许将形式分解成小块是最好的。每个页面都有一个ID为form-part-＃的表单。提交每个表单时，它会验证当前表单，将表单数据作为隐藏元素添加到最后一个表单，然后调用$ .mobile.changePage（）;

#1