I'm writing a mobile app with PhoneGap and jQuery Mobile. To simplify navigation I want to spread a single form over multiple 'pages' using div data-role="page". The idea is to give the user a wizard like experience for filling in a large form. On completion I need to be able to save the form locally, or submit it, if the mobile is online.
I don't understand how to go about submitting or saving a form using jQuery Mobile if the form is split into multiple 'virtual' pages. I've search the web but can't find any tutorials or examples on solving this problem.
Any help will be appreciated.
UPDATE:
I recently changed the way I worked with multipage forms, and this solution worked nice for me. You basically use a naming convention where fields become part of sections by giving them id's starting with the section name and a dash, e.g: person-name, person-surname. See the answer below.
Ok, I posted my thoughts here: http://www.coldfusionjedi.com/index.cfm/2011/11/18/Demo-of-a-multistep-form-in-jQuery-Mobile
Essentially I ended up using a sever side language to simply include the right part of the form at a time. (I'm using ColdFusion, but any language would work really.) The form self posts and simply displays the right step based on where you are in the process.
A quick help to anyone stuck with the same problem. I did the 'form thing', but it gets sloppy. You basically just embed the page divs inside the form element, but that's not very elegant and has given me some navigation issues.
So I ended up with my own solution that works over huge multipage forms (+/- 1000 elements). Not the most elegant, but it works like a charm:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(function () {
$('#submit_my_form').click(function (e) {
alert(JSON.stringify(readFormData('names')));
alert(JSON.stringify(readFormData('dates')));
});
});
function readFormData(section) {
var sectionData;
var els = $(':input[id|='+section+']');
var sectionData = {};
$.each(els, function() {
if (this.name && !this.disabled && (this.checked
|| /select|textarea/i.test(this.nodeName)
|| /text|hidden|password|date|email/i.test(this.type))) {
sectionData[this.name.substr(section.length+1)] = $(this).val();
console.log(this.name + " -> " + $(this).val());
}
});
return sectionData;
}
</script>
</head>
<body>
<div data-role="page" id="menu" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Menu Page</h1>
</div>
<div data-role="content">
<ul data-role="controlgroup">
<li><a target_id="page1" href="#page1" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right" class=".ui-icon-manditory">Page1</a></li>
<li><a target_id="page2" href="#page2" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right">Page2</a></li>
</ul>
<input id="submit_my_form" type="button" name="send" value="Submit"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
Menu page footer
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 1</h1>
Next
</div>
<div data-role="content">
<label for="names-initials">Name:</label>
<input type="text" name="names-initials" id="names-initials" value=""/>
<label for="names-surname">Surname:</label>
<input type="text" name="names-surname" id="names-surname" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 2</h1>
</div>
<div data-role="content">
<label for="dates-birthday">Birthday:</label>
<input type="date" name="dates-birthday" id="dates-birthday" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Back to Main From</a>
</div>
</div>
</body>
</html>
Related
The Leaf documentation doesn't seem to be working for me I can't figure out why.
child.leaf
#extend("index"):
#export("hello"):
<p>Welcome to Vapor!</p>
#endexport
#endextend
index.leaf
<!-- Backend Projects -->
<div class="seciton-label">
<h3>#(.backendCollection.title)</h3>
</div>
#import("hello")
<!-- Backend Card -->
#for(card in .backendCollection.collection):
<div class="greeting-card">
<a href=#(card.url)>
<h3>#(card.title)</h3>
</a>
<p> #(card.description) </p>
</div>
#endfor
The following image is the result I get in localhost
Request result running the vapor server on localhost
Please help - I can't find solutions to this issue.
No response from forums.swift.org
Tried removing the import key
Removing quotes
I saw individuals using the following format in older versions of Vapor. This did not work for me either.
<!-- I tried the following format for the extend and export blocks -->
#extend("index") {
#export("hello") {
<p>Welcome to Vapor!</p>
}
}
I'm trying to be able to extend the leaf templates and understand why the html does not render.
This works and does something similar to what you want.
This is my 'template' (heavily simplified here), called Base.leaf:
<!DOCTYPE html>
<html>
<head>
<title>#(title)</title>
</head>
<body>
#import("body")
</body>
</html>
#extend("Build/Message")
</body>
</html>
The extend of Build/Message above behaves simply like an include.
Then I use it in a form called Login.leaf here:
#extend("Build/Base"):
#export("body"):
<form method="POST" action="/log-in">
<label for="email">Email</label>
<input type="text" name="email" required>
<label for="password">Password</label>
<input type="password" name="password" required>
<button class="btn-success">Log-in</button>
</form>
#endexport
#endextend
I then use the `Login.leaf' in a render such as:
let context = ["title": "Log in", "version": C.Msg.Version, "message": request.getMessage()]
return try await request.view.render("Form/Login", context)
I have created single page in nextjs, And I taken build file <title> and <meta> working fine. see the title tag in this image
but I uploaded build file this server https://blog.simple.in/ title tag not showing. what I am missing. Could you please let me know server issue or code issue please let me know. Thanks
loyaltycards.js
import React, { Component } from "react";
import { Grid } from "semantic-ui-react";
import $ from "jquery";
import Layout from "../components/layout";
import 'semantic-ui-css/semantic.min.css';
import Head from 'next/head';
class Loyaltycard extends Component {
componentDidMount() {
$(".v2, .v3, .v4").hide();
$(".m1").click(function () {
$(".v1").show();
$(".v2,.v3,.v4").hide();
$(".li-1").addClass("btn-active-1");
$(".btn-active-2").removeClass("btn-active-2");
$(".btn-active-3").removeClass("btn-active-3");
$(".btn-active-4").removeClass("btn-active-4");
});
$(".m2").click(function () {
$(".v2").show();
$(".v1,.v3,.v4").hide();
$(".li-2").addClass("btn-active-2");
$(".btn-active-1").removeClass("btn-active-1");
$(".btn-active-3").removeClass("btn-active-3");
$(".btn-active-4").removeClass("btn-active-4");
});
$(".m3").click(function () {
$(".v3").show();
$(".v1,.v2,.v4").hide();
$(".li-3").addClass("btn-active-3");
$(".btn-active-2").removeClass("btn-active-2");
$(".btn-active-1").removeClass("btn-active-1");
$(".btn-active-4").removeClass("btn-active-4");
});
$(".m4").click(function () {
$(".v4").show();
$(".v1,.v2,.v3").hide();
$(".li-4").addClass("btn-active-4");
$(".btn-active-2").removeClass("btn-active-2");
$(".btn-active-1").removeClass("btn-active-1");
$(".btn-active-3").removeClass("btn-active-3");
});
}
render() {
return (
<Layout>
<Head>
<meta charSet="utf-8" />
<title>Store all your rewards cards on your phone</title>
<meta name="description" content="The smart, easy way to carry all Loyalty, Reward and Club cards on your mobile- link them all in the simple app, checkout as usual and earn points at stores." />
<meta name="google-site-verification" content="rtIRrUNRpgZ_lFtlfS8LJ0-8j_d569BXS9NOGa_nM6Y" />
<link rel="canonical" href="https://simple .cash/loyaltycards"/>
</Head>
<Grid className="static-sections">
<Grid.Column width={1}></Grid.Column>
<Grid.Column width={14} className="promotions">
<h1>Loyalty Cards</h1>
<p>
Got a wallet full of store loyalty cards? Link them all in the
simple app and start earning points at stores you visit all the
time. simple app allows you to store all of your rewards cards on
your phone. Shop and use your loyalty account at checkout as usual
to collect points. Turn your phone into your wallet and redefine
your everyday shopping experience! It is the smart and easy way to
carry all Loyalty cards, Reward cards and Club cards on your
smartphone with simple .
</p>
</Grid.Column>
<Grid.Column width={1}></Grid.Column>
</Grid>
<Grid>
<Grid.Column width={1}></Grid.Column>
<Grid.Column width={14} className="loyalty">
<Grid>
<Grid.Column width={8} className="left-eight">
<div className="m1" onClick={this.m1}>
<div class="media-left">
<p class="li-circle-second-1 li-1">1</p>
</div>
<div class="media-body">
<h4 class="media-heading">Select Card</h4>
<p>
Select a card from the available list. If not available,
add your card by selecting Add New
</p>
</div>
</div>
<div className="m2" onClick={this.m2}>
<div class="media-left">
<p class="li-circle-second-2 li-2">2</p>
</div>
<div class="media-body">
<h4 class="media-heading">Scan barcode</h4>
<p>Scan the barcode from the actual card you carry</p>
</div>
</div>
<div className="m3" onClick={this.m3}>
<div class="media-left">
<p class="li-circle-second-3 li-3">3</p>
</div>
<div class="media-body">
<h4 class="media-heading">Card Photo</h4>
<p>
Click a photo of the front & back of the card. (Optional)
</p>
</div>
</div>
<div className="m4" onClick={this.m4}>
<div class="media-left">
<p class="li-circle-second-4 li-4">4</p>
</div>
<div class="media-body">
<h4 class="media-heading">Use the Card</h4>
<p>
During checkout at the store, select the appropriate card
from the app & show at the counter for scanning
</p>
</div>
</div>
</Grid.Column>
<Grid.Column width={8}>
<div className="v1">
<video
playsinline={"playsinline"}
autoplay={"autoplay"}
muted={"muted"}
loop={"loop"}
>
<source
class="embed-responsive-item"
src="/mp4/loyalty-card/1-loyalty-card.mp4"
type="video/mp4"
></source>
</video>
</div>
<div className="v2">
<video
playsinline={"playsinline"}
autoplay={"autoplay"}
muted={"muted"}
loop={"loop"}
>
<source
class="embed-responsive-item"
src="/mp4/loyalty-card/2-scan-barcode.mp4"
type="video/mp4"
></source>
</video>
</div>
<div className="v3">
<video
playsinline={"playsinline"}
autoplay={"autoplay"}
muted={"muted"}
loop={"loop"}
>
<source
class="embed-responsive-item"
src="/mp4/loyalty-card/3-card-photo.mp4"
type="video/mp4"
></source>
</video>
</div>
<div className="v4">
<video
playsinline={"playsinline"}
autoplay={"autoplay"}
muted={"muted"}
loop={"loop"}
>
<source
class="embed-responsive-item"
src="/mp4/loyalty-card/4-cashback-added.mp4"
type="video/mp4"
></source>
</video>
</div>
</Grid.Column>
</Grid>
</Grid.Column>
<Grid.Column width={1}></Grid.Column>
</Grid>
</Layout>
);
}
}
export default Loyaltycard;
I want to have two mailchimp forms ( linked to the same mailchimp list ) within the same landingpage in a Shopify Store. *it is a long landing page so I want them to be able to subscribe two times along the way.
It seems the second form does not work and the only think it does is refreshing the page. I am pretty sure there is a conflict with their ID´s because the two forms have the same ID ( id="mailchimp" ) but I believe it is neccesary for them to work.
I may have a very easy-to-resolve question but i have been struggling with it for a while. It seems there is no documentation about it ( apart from inserting one of the forms within an iframe -> I am not confortable with this solution because I want to record with GTM ( GA ) customer succesuful submitions etc. ).
The code for the forms ( snippet that it is called two times within the page ):
<!-- Newsletter Section -->
<section id="services" class="small-section bg-gray-lighter">
<div class="container relative">
<form class="form align-center newsdown" id="mailchimp">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="mb-20">
<input placeholder="Introduce tu email" class="newsletter-field form-control input-md round mb-xs-10" type="email" pattern=".{5,100}" required/>
<button type="submit" class="btn btn-mod btn-border-c btn-medium btn-round mb-xs-10">
Suscribe
</button>
</div>
<div id="subscribe-result"></div>
</div>
</div>
</form>
</div>
</section>
<!-- End Newsletter Section -->
What can I do to have these two identical forms working on the same page? Have in mind I don't have access to the javascript ( because mailchimp has Shopify app that makes this connection ).
If you wrap each mailchimp form in a ...., then run this script on the page, it will re-assign all IDs of the non-focused form, and re-bind the submit event. A bit hacky, but it works if you're in a bind.
$(document).ready(function() {
// only execute if confirmed more than 1 mailchimp form on this page
if ( $('.mc-form-instance').length > 1 ) {
$('.mc-field-group > .required').on('focus', function() {
var thisField = $(this);
// backup all mc-form ids on this page
$('.mc-form-instance [id]').each(function() {
var currentID = $(this).attr('id');
if ( currentID.indexOf('-bak') == -1 ) {
$(this).attr('id', currentID + '-bak');
}
});
// change the current form ids back to original state
var thisForm = thisField.closest('.mc-form-instance');
thisForm.find('[id]').each(function() {
var currentID = $(this).attr('id');
if ( currentID.indexOf('-bak') != -1 ) {
$(this).attr('id', currentID.replace('-bak', ''));
}
});
});
// re-bind
$.getScript('//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js');
}
});
As it appeared there were a conflict with two exact forms ( same javascript etc ) so I implemented the second form differently:
<!-- Newsletter Section -->
<section id="services" class="small-section bg-gray-lighter">
<div class="container relative">
<form action="YOURACTION;id=YOURID" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="row">
<div class="col-md-8 col-md-offset-2" style="text-align: center;">
<div class="newsletter-label font-alt">
¿Te interesa? Recibe más noticias y tutoriales exclusivos
</div>
<div class="mb-20">
<input name="EMAIL" id="mce-EMAIL" placeholder="Introduce tu email" class="newsletter-field form-control input-md round mb-xs-10 required email" type="email" pattern=".{5,100}" required/>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-mod btn-border-c btn-medium btn-round mb-xs-10">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_5307a1008b76c5446a7303622_18658ede2a" tabindex="-1" value=""></div>
<div class="form-tip">
<i class="fa fa-info-circle"></i> Pocos emails, pero de calidad. Nunca Spam. Te servirán.
</div>
<div id="subscribe-result"></div>
</div>
</div>
</form>
</div>
</section>
<!-- End Newsletter Section -->
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='dropdown';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[5]='MMERGE5';ftypes[5]='url';fnames[7]='MMERGE7';ftypes[7]='text';fnames[6]='MMERGE6';ftypes[6]='birthday';fnames[8]='MMERGE8';ftypes[8]='text';fnames[9]='MMERGE9';ftypes[9]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
How can I do addthis.toolbox('.addthis_toolbox') multiple times?
I have a list of posts, and each is opened in popup window (jquery ui dialog). So I need to reload AddThis bar for each post.
Now I have:
<div id="addThis_<?=$postID?>" class="addthis_toolbox addthis_default_style" addthis:title="<?=$fullTitle?>" addthis:url="https://<?=$url?>">
<a class="share-button addthis_button_preferred_1"></a>
<a class="share-button addthis_button_preferred_2"></a>
<a class="share-button addthis_button_preferred_3"></a>
<a class="share-button addthis_button_preferred_4"></a>
<a class="share-button addthis_button_twitter" addthis:title="<?=$fullTitle?>" addthis:url="http://lj.is/<?=$postID?>"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
$(function(){
var addthis_config = {
data_track_clickback:true,data_track_addressbar:true,pubid:'...',ui_delay:300
};
var addthis_share = {url:"https://<?=$url?>", title:'<?=$fullTitle?>'};
if (window.addthis) {addthis.toolbox('#addThis_<?=$postID?>'); addthis.button("#addThis_<?=$postID?> .share-button"); addthis.counter("#addThis_<?=$postID?> .addthis_bubble_style");}
else $.getScript('https://s7.addthis.com/js/300/addthis_widget.js#pubid=...&async=1', function(){addthis.init();});
})
</script>
Now first launch is ok. But next - bar is built, but without correct click, anchor title and etc.
You can see that on https://littlejoys.ru/
And additional problem - compact menu has incorrect position when my popup window is scrolled.
You can repeat the div multiple times. But you need to change the URL, title, description using Addthis optional attributes (addthis:url, addthis:title, addthis:description).
<!-- First Post -->
<div class="addthis_toolbox addthis_default_style" addthis:url="http://example.com/1"
addthis:title="My cool first post"
addthis:description="An Example Description 1">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=***"></script>
<!-- Second Post-->
<div class="addthis_toolbox addthis_default_style" addthis:url="http://example.com/2"
addthis:title="My hot second post"
addthis:description="An Example Description 2">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=***"></script>
Therefore you can add it in a loop and it will pick up the correct data.
If Addthis is not getting re-initialized in UI dialog then you need to re-initialize the addthis buttons again using addthis.button(".share-button")
where share-button is the class of the addthis share anchor link.
Check this Addthis article: http://support.addthis.com/customer/portal/articles/1365325-rendering-tools-with-javascript
I must create ModalPopupExtender. for this, I create one simple application and all my expectation wrok. But when i add my popup in master page it doesn't work, How I can fix this problem?
my popup
<asp:Button ID="Button1" runat="server" Text="Click here to show iframe in modalpopup" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"
runat="server" CancelControlID="btnCancel" OkControlID="btnOkay" TargetControlID="Button1"
PopupControlID="Panel1" Drag="true" PopupDragHandleControlID="PopupHeader">
</asp:ModalPopupExtender>
<div id="Panel1" style="display: none;" class="popupConfirmation">
<iframe id="frameeditexpanse" frameborder="0" src="InnerPage.aspx" height="161">
</iframe>
<div class="popup_Buttons" style="display: none">
<input id="btnOkay" value="Done" type="button" />
<input id="btnCancel" value="Cancel" type="button" />
</div>
</div>
my script in InnerPage.aspx
<script language="javascript" type="text/javascript">
function okay() {
window.parent.document.getElementById('btnOkay').click();
}
function cancel() {
window.parent.document.getElementById('btnCancel').click();
}
</script>
place this script on same page with extender
<script type="text/javascript">
function clickOk() {
$get("<%= btnOkay.ClientID %>").click();
}
function clickCancel() {
$get("<%= btnCancel.ClientID %>").click();
}
</script>
and instead of parent.window.document.getElementById().click() use parent.window.clickOk() and parent.window.clickCancel()