Menu
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.
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:
<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.
Note: I am rendering this in android webview.
251
Multiple pages can be included in the single jQuery mobile document which loads together by adding multiple divs with the attribute data-role = "page". The div with data-role = "page" should consist unique id to link internally between the pages.
The team announced that the cross-platform jQuery Mobile project under its umbrella will be fully deprecated as of October 7, 2021. New technologies for mobile app development have evolved since this project was launched in 2010, so we're encouraging developers to plan for this jQuery Mobile transition.
The page is the primary unit of interaction in jQuery Mobile and is used to group content into logical views that can be animated in and out of view with page transitions.
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.
$("#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.
From this, I could get all the fields but not the values inside it. So I changed my html a bit like:
<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. :)
181
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();
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
