Forum
Ajax submission with mail chimp app doesn't appear to be working
Hi
I've integrated the mail chimp app into my website: masteringionic2.com and have been getting subscriber sign-ups through the app which is great.
I decided to additionally implement this app in a modal window using jQuery Ajax post method to "submit" the form. This is on first visit to the site as an attempt to drive further sign-ups before getting to the content.
With the jQuery modal implementation I can retrieve the data from the form, post the data and return a success value in the jQuery ajax handler BUT I never receive any sign-ups in mail chimp through this method.
My modal template (saved in perch/template/mailchimp/forms/modal-subscribe.html) is as follows:
`<perch:form class="modal-form" id="modal-subscribe" app="perch_mailchimp" double-optin="true">
<div class="introduction">
<h1>I would love to send you 1 - 2 e-mail newsletters each month</h1>
<p>
I promise I won't spam you<br>
or share your details (except with mailchimp.com)<br>
and you can unsubscribe whenever you want :)
</p>
</div>
<div class="input">
<perch:label for="firstname">First name *</perch:label>
<perch:input
id="firstname"
required="true"
placeholder="First name"
type="text"
mailer="FNAME"
aria-describedby="fname-tip" />
<perch:error type="required" for="firstname">
<span class="error" role="tooltip" id="fname-tip">
Required
</span>
</perch:error>
</div>
<div class="input">
<perch:label for="lastname">Last name *</perch:label>
<perch:input
id="lastname"
required="true"
placeholder="Surname"
type="text"
mailer="LNAME"
aria-describedby="lname-tip" />
<perch:error type="required" for="lastname">
<span class="error" role="tooltip" id="lname-tip">
Required
</span>
</perch:error>
</div>
<div class="input">
<perch:label for="email">Email *</perch:label>
<perch:input
id="email"
required="true"
placeholder="Your email address..."
type="email"
mailer="email"
aria-describedby="email-tip" />
<perch:error type="required" for="email">
<span class="error" role="tooltip" id="email-tip">
Required
</span>
</perch:error>
<div class="small-input">
<perch:label for="confirm">Opt-in to receive emails?</perch:label>
<perch:input type="checkbox" required="false" value="1" id="confirm" mailer="confirm_subscribe" />
</div>
</div>
<perch:input class="perch-hp" type="text" id="banana" antispam="honeypot" />
<div class="button-input">
<perch:input type="submit" value="Sign Me Up!" id="btnsubmit" class="submit" />
<perch:input type="hidden" id="list" value="MAILCHIMP_LIST_ID_EMBEDDED_HERE" mailer="list" />
</div>
</perch:form>
<div id="form-error"></div>
<div id="signup-success"> <h2>Thank you for signing up to the mailing list!</h2> <p>A newsletter will be sent out shortly.</p> </div>
<div id="signup-error"> <h2>Error!</h2> <p>You weren't able to be signed up to the mailing list at this time.</p> </div>`
My JS for the form is as follows:
`$('.modal-form').on('submit', function(e) { e.preventDefault();
var warningStr = '',
formErrors = [],
firstName = $(this).find('input[name="firstname"]'),
lastName = $(this).find('input[name="lastname"]'),
yourEmail = $(this).find('input[name="email"]');
// Valid first name?
if(!VALIDATE.validateString($(firstName).val()) || $(firstName).val().length < 2)
{
$(firstName).addClass('field-error');
warningStr += "<p>Please enter your first name</p>";
formErrors.push("your-name");
}
else
{
VALIDATE.removeArrayElement(formErrors, "your-name");
}
if(!VALIDATE.validateString($(lastName).val()) || $(lastName).val().length < 2)
{
$(lastName).addClass('field-error');
warningStr += "<p>Please enter your surname</p>";
formErrors.push("your-surname");
}
else
{
VALIDATE.removeArrayElement(formErrors, "your-surname");
}
// Valid Email?
if(!VALIDATE.validateEmail($(yourEmail).val()))
{
$(yourEmail).addClass('field-error');
warningStr += "<p>Please enter your e-mail address</p>";
formErrors.push("your-email");
}
else
{
VALIDATE.removeArrayElement(formErrors, "your-email");
}
// If we have errors
if(formErrors.length > 0)
{
$('#form-error').html(warningStr).show();
}
else
{
$('#form-error').html('').hide();
var formData = $(this).serialize(),
formUri = $('.modal-form').prop('action');
$('.modal-form').hide();
$('.modal-preloader').show();
$.post('/', formData)
.done(function(data)
{
$('.modal-preloader').hide();
$("#signup-success").show();
})
.fail(function(err)
{
$('.modal-preloader').hide();
$("#signup-error").show();
});
return false;
}
});`
I just can't figure out what is going wrong here as the data is definitely being submitted when I console log the form values in the form submit function.
I've tested the network calls in FF and I'm getting a 200 with the response header/content able to be accessed.
Can anyone provide any assistance/suggestions with what I may be doing wrong/have overlooked?
Have you turned on debug to check for any error messages?
Hi Drew
Thanks for the prompt reply.
Have only run the
<?php PerchUtil::output_debug(); ?>on a local MAMP server and not on the remote Heart Internet server yet. Will do so now and paste the output in a follow up reply.I have run the following diagnostic report on the Heart Internet server though - don't know if this is helpful:
`Perch: 2.8.32 Production mode: Production (100) Installed apps: content (2.8.32), assets (2.8.32), categories (2.8.32), perch_blog (5.0), perch_forms (1.8.3), perch_shop_orders (PERCH_SHOP_VERSION), perch_shop_products (PERCH_SHOP_VERSION), perch_shop (1.0.9), perch_comments (1.2), perch_members (1.5), perch_backup (1.2), perch_mailchimp (3.0.1) DB driver: PDO DB tables: perch2_blog_authors (1), perch2_blog_comments (151), perch2_blog_index (704), perch2_blog_posts (12), perch2_blog_posts_to_tags (40), perch2_blog_sections (1), perch2_blog_tags (30), perch2_blogs (1), perch2_categories (17), perch2_category_counts (16), perch2_category_sets (2), perch2_comments (0), perch2_comments_votes (0), perch2_content_index (323), perch2_content_items (85), perch2_content_regions (38), perch2_forms (1), perch2_forms_responses (1), perch2_mailchimp_campaigns (9), perch2_mailchimp_imports (0), perch2_mailchimp_lists (2), perch2_mailchimp_subscribers (18), perch2_mailchimp_subscriptions (21), perch2_mailchimp_webhooks (2), perch2_members (0), perch2_members_forms (0), perch2_members_member_tags (0), perch2_members_sessions (0), perch2_members_tags (0), perch2_navigation (0), perch2_navigation_pages (0), perch2_page_templates (10), perch2_pages (11), perch2_resource_log (118), perch2_resource_tags (31), perch2_resources (257), perch2_resources_to_tags (81), perch2_settings (38), perch2_shop_addresses (0), perch2_shop_admin_index (0), perch2_shop_brands (0), perch2_shop_cart (0), perch2_shop_cart_data (0), perch2_shop_cart_items (0), perch2_shop_countries (250), perch2_shop_currencies (152), perch2_shop_customers (0), perch2_shop_emails (1), perch2_shop_index (0), perch2_shop_option_values (0), perch2_shop_options (0), perch2_shop_order_items (0), perch2_shop_order_promotions (0), perch2_shop_order_statuses (9), perch2_shop_orders (0), perch2_shop_orders_meta (1), perch2_shop_product_files (0), perch2_shop_product_option_values (0), perch2_shop_product_options (0), perch2_shop_product_tags (0), perch2_shop_products (0), perch2_shop_promotions (0), perch2_shop_search (0), perch2_shop_shipping_zone_countries (0), perch2_shop_shipping_zones (0), perch2_shop_shippings (0), perch2_shop_tax_exhibits (0), perch2_shop_tax_group_rates (0), perch2_shop_tax_groups (0), perch2_shop_tax_locations (0), perch2_shop_tax_rates (0), perch2_shop_variants (0), perch2_user_passwords (0), perch2_user_privileges (82), perch2_user_role_privileges (16), perch2_user_roles (2), perch2_users (1) Users: 1 App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_blog', 'perch_forms', 'perch_mailchimp', 'perch_comments' ); Scheduled tasks for perch_blog: delete_spam_comments (1440 mins) Scheduled tasks for perch_mailchimp: import_data (1 mins) Scheduled tasks for perch_comments: delete_spam_comments (1440 mins) Editor plug-ins: ckeditor, tinymce, markitup H1: c0491332ccee53bf750a6c043926ee59 L1: 8e790f08fd84da897568e47ba17c54b4 F1: 2edba60ed1f613d6dd804feb202456a2 headerColour: #ffffff content_singlePageEdit: 1 helpURL: siteURL: / hideBranding: 0 content_collapseList: 1 lang: en-gb update_2.8.32: done latest_version: 2.8.15 on_sale_version: 2.8.34 perch_blog_update: 5.0.1 perch_blog_post_url: /blog/{postSlug}/ perch_members_update: 1.4 headerScheme: light perch_blog_site_name: perch_blog_slug_format: %Y-%m-%d-{postTitle} perch_blog_akismet_key: perch_blog_max_spam_days: 1 perch_comments_akismet_key: perch_comments_max_spam_days: 1 perch_mailchimp_api_key: 3456789012e94b2709db2a4c6db9186a-us1 perch_mailchimp_campaign_url: /mailchimp/campaign/{campaignSlug} perch_members_login_page: /members/login.php?r={returnURL} perch_shop_price_tax_mode: exc perch_shop_site_url: https:// perch_shop_product_url: /shop/products/{slug} perch_shop_default_currency: perch_shop_reporting_currency: perch_shop_invoice_number_format: Invoice%d dashboard: 1 hide_pwd_reset: 0 content_hideNonEditableRegions: 0 content_frontend_edit: 0 perch_blog_comment_notify: 1 perch_mailchimp_secret: aab51d9 perch_backup_mysqldump_path: perch_shop_update: 1.0.9 PERCH_DEVELOPMENT: 10 PERCH_STAGING: 50 PERCH_PRODUCTION: 100 PERCH_DB_USERNAME: db-alM!on PERCH_DB_SERVER: localhost PERCH_DB_DATABASE: db-alM!on PERCH_DB_PREFIX: perch2_ PERCH_TZ: UTC PERCH_EMAIL_FROM: info@secret.com PERCH_EMAIL_FROM_NAME: Secret name Admin PERCH_LOGINPATH: /perch PERCH_PATH: /home/sites/masteringionic2.com/public_html/perch PERCH_CORE: /home/sites/masteringionic2.com/public_html/perch/core PERCH_RESFILEPATH: /home/sites/masteringionic2.com/public_html/perch/resources PERCH_RESPATH: /perch/resources PERCH_HTML5: 1 PERCH_RUNWAY: PERCH_ERROR_MODE: DIE PERCH_DATE_LONG: %d %B %Y PERCH_DATE_SHORT: %d %b %Y PERCH_TIME_SHORT: %H:%M PERCH_TIME_LONG: %H:%M:%S PERCH_RUNWAY_ROUTED: PERCH_STRONG_PASSWORDS: PERCH_DEBUG: PERCH_PREVIEW_ARG: preview PERCH_TEMPLATE_PATH: /home/sites/masteringionic2.com/public_html/perch/templates PERCH_DEFAULT_DOC: index.php PERCH_DEFAULT_EXT: .php PERCH_PRODUCTION_MODE: 100 PERCH_RWD: PERCH_HTML_ENTITIES: PERCH_SSL: PERCH_STRIPSLASHES: PERCH_PROGRESSIVE_FLUSH: 1 PERCH_PARANOID: PERCH_FORCE_SECURE_COOKIES: PERCH_PASSWORD_MIN_LENGTH: 6 PERCH_MAX_FAILED_LOGINS: 10 PERCH_AUTH_LOCKOUT_DURATION: 1 HOUR PERCH_VERIFY_UPLOADS: PERCH_AUTH_PLUGIN: PERCH_DB_CHARSET: utf8 PERCH_DB_PORT: PERCH_DB_SOCKET: PERCH_SESSION_TIMEOUT_MINS: 20 PERCH_SHOP_VERSION: 1.0.9 PERCH_APPS_EDITOR_PLUGIN: markitup PERCH_APPS_EDITOR_MARKUP_LANGUAGE: textile HOSTING SETTINGS
PHP: 5.5.38 Zend: 2.5.0 OS: Linux SAPI: cgi-fcgi Safe mode: not detected MySQL client: mysqlnd 5.0.11-dev - 20120503 - $Id: 15d5c781cfcad91193dceae1d2cdd127674ddb3e $ MySQL server: 5.5.53 Free disk space: 7.54 TB Extensions: Core, date, ereg, libxml, openssl, pcre, zlib, bz2, calendar, ctype, hash, filter, ftp, gettext, gmp, SPL, iconv, pcntl, readline, Reflection, session, standard, shmop, SimpleXML, sockets, mbstring, tokenizer, xml, cgi-fcgi, bcmath, curl, dom, enchant, fileinfo, gd, imap, intl, json, ldap, exif, mcrypt, mssql, mysqlnd, mysql, mysqli, odbc, PDO, pdo_dblib, pdo_mysql, PDO_ODBC, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, pspell, recode, soap, sqlite3, sysvmsg, sysvsem, sysvshm, tidy, wddx, xmlreader, xmlrpc, xmlwriter, xsl, zip, mhash, ionCube Loader, Zend Guard Loader GD: Yes ImageMagick: No PHP max upload size: 64M PHP max form post size: 64M PHP memory limit: 128M Total max uploadable file size: 64M Resource folder writeable: Yes Session timeout: 24 minutes Native JSON: Yes Filter functions: Yes Transliteration functions: Yes PATH: /usr/local/bin:/usr/bin:/bin UNIQUE_ID: WHZSdn8AAAEAAMtbHHoAAAAI SCRIPT_URL: /perch/core/settings/diagnostics/ SCRIPT_URI: https://masteringionic2.com/perch/core/settings/diagnostics/ HTTP_HOST: masteringionic2.com HTTP_ACCEPT_ENCODING: gzip, deflate HTTP_COOKIE: PHPSESSID=fc0qid8p2tkeuu89j0pu3m6js2; cmsa=1 HTTP_ACCEPT: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8 HTTP_USER_AGENT: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/601.6.17 (KHTML, like Gecko) Version/9.1.1 Safari/601.6.17 HTTP_ACCEPT_LANGUAGE: en-us HTTP_REFERER: https://masteringionic2.com/perch/core/settings/diagnostics/ HTTP_DNT: 1 HTTP_CONNECTION: close SERVER_SIGNATURE: <address>Apache/2.4.23 (Unix) Server at masteringionic2.com Port 80</address> SERVER_SOFTWARE: Apache/2.4.23 (Unix) SERVER_NAME: masteringionic2.com SERVER_ADDR: 10.0.1.178 SERVER_PORT: 80 REMOTE_ADDR: 86.138.244.139 DOCUMENT_ROOT: /home/sites/masteringionic2.com/public_html REQUEST_SCHEME: http CONTEXT_DOCUMENT_ROOT: /home/sites/masteringionic2.com/public_html SERVER_ADMIN: root@localhost SCRIPT_FILENAME: /home/sites/masteringionic2.com/public_html/perch/core/settings/diagnostics/index.php REMOTE_PORT: 33455 GATEWAY_INTERFACE: CGI/1.1 SERVER_PROTOCOL: HTTP/1.1 REQUEST_METHOD: GET QUERY_STRING: extended REQUEST_URI: /perch/core/settings/diagnostics/?extended SCRIPT_NAME: /perch/core/settings/diagnostics/index.php PHP_SELF: /perch/core/settings/diagnostics/index.php REQUEST_TIME_FLOAT: 1484149366.8403 REQUEST_TIME: 1484149366`
Page debug information is as follows:
SELECT * FROM perch2_pages WHERE pagePath='/index.php' LIMIT 1 Using template: /templates/pages/attributes/default.html Using sub-template: /templates/pages/attributes/seo.html Using template: /templates/pages/attributes/default.html Using sub-template: /templates/pages/attributes/seo.html [37] SELECT DISTINCT settingID, settingValue FROM perch2_settings WHERE userID=0 Using template: /templates/mailchimp/forms/modal-subscribe.html [7] SELECT regionKey, regionHTML FROM perch2_content_regions WHERE regionPage='/index.php' OR regionPage='*' ORDER BY regionPage DESC [1] SELECT regionID, regionTemplate, regionPage, regionRev AS rev FROM perch2_content_regions WHERE (regionKey='Products') AND (regionPage='/products/index.php' OR regionPage='*') [1] SELECT * FROM ( SELECT idx.itemID, c.regionID, idx.pageID, c.itemJSON, idx2.indexValue as sortval FROM perch2_content_index idx JOIN perch2_content_items c ON idx.itemID=c.itemID AND idx.itemRev=c.itemRev AND idx.regionID=c.regionID JOIN perch2_content_index idx2 ON idx.itemID=idx2.itemID AND idx.itemRev=idx2.itemRev AND idx2.indexKey='date' WHERE ((idx.regionID=69 AND idx.itemRev=23)) AND idx.itemID=idx2.itemID AND idx.itemRev=idx2.itemRev ) as tbl GROUP BY itemID, pageID, itemJSON, sortval ORDER BY sortval DESC LIMIT 0, 3 [1] Using template: /templates/content/product-listing.html [5] SELECT SQL_CALC_FOUND_ROWS DISTINCT tbl.* FROM ( SELECT idx.itemID, main.*, idx2.indexValue as sortval FROM perch2_blog_index idx JOIN perch2_blog_posts main ON idx.itemID=main.postID AND idx.itemKey='postID' JOIN perch2_blog_index idx2 ON idx.itemID=idx2.itemID AND idx.itemKey='postID' AND idx2.indexKey='postDateTime' WHERE 1=1 AND idx.itemID=idx2.itemID AND idx.itemKey=idx2.itemKey ) as tbl WHERE (postStatus='Published' AND postDateTime<='2017-01-11 16:23:00' ) GROUP BY itemID, sortval ORDER BY sortval DESC LIMIT 0, 5 [1] SELECT FOUND_ROWS() AScount[5] Using template: /templates/blog/homepage_post_in_list.html [1] SELECT * FROM perch2_blog_sections ORDER BY sectionTitle ASC [1] SELECT * FROM perch2_blogs ORDER BY blogTitle ASC Using template: /templates/mailchimp/forms/subscribe.htmlIs it working on one server and not the other?
Hi Drew.
No - on both the local MAMP installation and the Heart Internet server the form data is successfully retrieved and submitted, the success message is displayed but the mailing list is never updated with the new sign-up.
But that does work as expected with a basic form without the added JavaScript?
If so, it sounds like you need to be debugging the JavaScript rather than troubleshooting with Perch.