Can newsletter signups use AJAX to complete?
Posted
#5460
(In Topic #1265)

Standard member

BLOCK_MAIN_NEWSLETTER_SIGNUP
I put the BLOCK_MAIN_NEWSLETTER_SIGNUP block at my footer. I've noticed once someone completes the form and clicks "subscribe", the page is reloaded and the template BLOCK_MAIN_NEWSLETTER_SIGNUP_DONE is loaded. However, my users would have to scroll back down to the bottom to verify the subscribe was successful.Is it possible, maybe via AJAX, that I can remove the page reload and display a success message right there on the page where the block is located? (in this case, in my footer).
I don't know much about AJAX or JS to be able to accomplish this, but hopefully it's not too complicated to achieve this.
Posted

Standard member

Code
{$FACILITATE_AJAX_BLOCK_CALL,block=main_newsletter_signup,param=1,subject=Thanks for signing up to our newsletter!,path=uploads/website_specific/newsletter-welcome-email.txt,to=Subscriber}
This just displays a link to Composr's snippet.php script, which seems to just mirror the contents of BLOCK_MAIN_NEWSLETTER_SIGNUP.
I inspected the use of {$FACILITATE_AJAX_BLOCK_CALL} in other templates, but I can't make sense of the syntax.
Posted

Site director

Code (diff)
diff --git a/sources/blocks/main_newsletter_signup.php b/sources/blocks/main_newsletter_signup.php
index e3004f574..d2801e369 100644
--- a/sources/blocks/main_newsletter_signup.php
+++ b/sources/blocks/main_newsletter_signup.php
@@ -81,7 +81,7 @@ class Block_main_newsletter_signup
require_code('type_sanitisation');
if (!is_email_address($address)) {
$msg = do_template('INLINE_WIP_MESSAGE', array('_GUID' => '9ce849d0d2dc879acba609b907317c74', 'MESSAGE' => do_lang_tempcode('INVALID_EMAIL_ADDRESS')));
- return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => '3759e07077d74e6537cab04c897e76d2', 'URL' => get_self_url(), 'MSG' => $msg));
+ return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => '3759e07077d74e6537cab04c897e76d2', 'BLOCK_PARAMS' => block_params_arr_to_str($map), 'URL' => get_self_url(), 'MSG' => $msg));
}
if (!array_key_exists('path', $map)) {
@@ -116,7 +116,7 @@ class Block_main_newsletter_signup
return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP_DONE', array('_GUID' => '9953c83685df4970de8f23fcd5dd15bb', 'NEWSLETTER_TITLE' => $newsletter_title, 'NID' => strval($newsletter_id), 'PASSWORD' => $password, 'PATH_EXISTS' => $path_exists));
} else {
- return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => 'c0e6f9cdab3d624bf3d27b745e3de38f', 'NEWSLETTER_TITLE' => $newsletter_title, 'NID' => strval($newsletter_id), 'URL' => get_self_url()));
+ return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => 'c0e6f9cdab3d624bf3d27b745e3de38f', 'BLOCK_PARAMS' => block_params_arr_to_str($map), 'NEWSLETTER_TITLE' => $newsletter_title, 'NID' => strval($newsletter_id), 'URL' => get_self_url()));
}
}
}
diff --git a/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl b/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl
index eeae684ec..0498a47c0 100644
--- a/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl
+++ b/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl
@@ -1,23 +1,36 @@
-{+START,IF_PASSED,MSG}
- <p>
- {MSG}
- </p>
-{+END}
+{$SET,ajax_block_main_newsletter_signup_wrapper,ajax_block_main_newsletter_signup_wrapper_{$RAND%}}
-<section class="box box___block_main_newsletter_signup"><div class="box_inner">
- <h3>{!NEWSLETTER}{$?,{$NEQ,{NEWSLETTER_TITLE},{!GENERAL}},: {NEWSLETTER_TITLE*}}</h3>
+<div id="{$GET*,ajax_block_main_newsletter_signup_wrapper}" class="box_wrapper">
+ {+START,IF_PASSED,MSG}
+ <p>
+ {MSG}
+ </p>
+ {+END}
- <form title="{!NEWSLETTER}" onsubmit="if (!check_field_for_blankness(this.elements['address{NID;*}'],event)) return false; if (!this.elements['address{NID*}'].value.match(/^[a-zA-Z0-9\._\-\+]+@[a-zA-Z0-9\._\-]+$/)) { window.fauxmodal_alert('{!javascript:NOT_A_EMAIL;=*}'); return false; } disable_button_just_clicked(this); return true;" action="{URL*}" method="post" autocomplete="off">
- {$INSERT_SPAMMER_BLACKHOLE}
+ <section class="box box___block_main_newsletter_signup"><div class="box_inner">
+ <h3>{!NEWSLETTER}{$?,{$NEQ,{NEWSLETTER_TITLE},{!GENERAL}},: {NEWSLETTER_TITLE*}}</h3>
- <p class="accessibility_hidden"><label for="baddress">{!EMAIL_ADDRESS}</label></p>
+ <form title="{!NEWSLETTER}" onsubmit="if (!check_field_for_blankness(this.elements['address{NID;*}'],event)) return false; if (!this.elements['address{NID*}'].value.match(/^[a-zA-Z0-9\._\-\+]+@[a-zA-Z0-9\._\-]+$/)) { window.fauxmodal_alert('{!javascript:NOT_A_EMAIL;=*}'); return false; } disable_button_just_clicked(this); return true;" action="{URL*}" method="post" autocomplete="off" target="_self">
+ {$INSERT_SPAMMER_BLACKHOLE}
- <div class="constrain_field">
- <input class="wide_field field_input_non_filled" id="baddress" name="address{NID*}" onfocus="placeholder_focus(this);" onblur="placeholder_blur(this);" alt="{!EMAIL_ADDRESS}" value="{!EMAIL_ADDRESS}" />
- </div>
+ <p class="accessibility_hidden"><label for="baddress">{!EMAIL_ADDRESS}</label></p>
- <p class="proceed_button">
- <input class="button_screen_item menu__site_meta__newsletters" type="submit" value="{!SUBSCRIBE}" />
- </p>
- </form>
-</div></section>
+ <div class="constrain_field">
+ <input class="wide_field field_input_non_filled" id="baddress" name="address{NID*}" onfocus="placeholder_focus(this);" onblur="placeholder_blur(this);" alt="{!EMAIL_ADDRESS}" value="{!EMAIL_ADDRESS}" />
+ </div>
+
+ <p class="proceed_button">
+ <input class="button_screen_item menu__site_meta__newsletters" type="submit" value="{!SUBSCRIBE}" />
+ </p>
+ </form>
+ </div></section>
+
+ {$REQUIRE_JAVASCRIPT,ajax}
+ {$REQUIRE_JAVASCRIPT,checking}
+
+ <script>// <![CDATA[
+ add_event_listener_abstract(window,'load',function() {
+ internalise_ajax_block_wrapper_links('{$FACILITATE_AJAX_BLOCK_CALL;,{BLOCK_PARAMS}}',document.getElementById('{$GET;,ajax_block_main_newsletter_signup_wrapper}'),[],{ },false,true);
+ });
+ //]]></script>
+</div>
index e3004f574..d2801e369 100644
--- a/sources/blocks/main_newsletter_signup.php
+++ b/sources/blocks/main_newsletter_signup.php
@@ -81,7 +81,7 @@ class Block_main_newsletter_signup
require_code('type_sanitisation');
if (!is_email_address($address)) {
$msg = do_template('INLINE_WIP_MESSAGE', array('_GUID' => '9ce849d0d2dc879acba609b907317c74', 'MESSAGE' => do_lang_tempcode('INVALID_EMAIL_ADDRESS')));
- return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => '3759e07077d74e6537cab04c897e76d2', 'URL' => get_self_url(), 'MSG' => $msg));
+ return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => '3759e07077d74e6537cab04c897e76d2', 'BLOCK_PARAMS' => block_params_arr_to_str($map), 'URL' => get_self_url(), 'MSG' => $msg));
}
if (!array_key_exists('path', $map)) {
@@ -116,7 +116,7 @@ class Block_main_newsletter_signup
return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP_DONE', array('_GUID' => '9953c83685df4970de8f23fcd5dd15bb', 'NEWSLETTER_TITLE' => $newsletter_title, 'NID' => strval($newsletter_id), 'PASSWORD' => $password, 'PATH_EXISTS' => $path_exists));
} else {
- return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => 'c0e6f9cdab3d624bf3d27b745e3de38f', 'NEWSLETTER_TITLE' => $newsletter_title, 'NID' => strval($newsletter_id), 'URL' => get_self_url()));
+ return do_template('BLOCK_MAIN_NEWSLETTER_SIGNUP', array('_GUID' => 'c0e6f9cdab3d624bf3d27b745e3de38f', 'BLOCK_PARAMS' => block_params_arr_to_str($map), 'NEWSLETTER_TITLE' => $newsletter_title, 'NID' => strval($newsletter_id), 'URL' => get_self_url()));
}
}
}
diff --git a/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl b/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl
index eeae684ec..0498a47c0 100644
--- a/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl
+++ b/themes/default/templates/BLOCK_MAIN_NEWSLETTER_SIGNUP.tpl
@@ -1,23 +1,36 @@
-{+START,IF_PASSED,MSG}
- <p>
- {MSG}
- </p>
-{+END}
+{$SET,ajax_block_main_newsletter_signup_wrapper,ajax_block_main_newsletter_signup_wrapper_{$RAND%}}
-<section class="box box___block_main_newsletter_signup"><div class="box_inner">
- <h3>{!NEWSLETTER}{$?,{$NEQ,{NEWSLETTER_TITLE},{!GENERAL}},: {NEWSLETTER_TITLE*}}</h3>
+<div id="{$GET*,ajax_block_main_newsletter_signup_wrapper}" class="box_wrapper">
+ {+START,IF_PASSED,MSG}
+ <p>
+ {MSG}
+ </p>
+ {+END}
- <form title="{!NEWSLETTER}" onsubmit="if (!check_field_for_blankness(this.elements['address{NID;*}'],event)) return false; if (!this.elements['address{NID*}'].value.match(/^[a-zA-Z0-9\._\-\+]+@[a-zA-Z0-9\._\-]+$/)) { window.fauxmodal_alert('{!javascript:NOT_A_EMAIL;=*}'); return false; } disable_button_just_clicked(this); return true;" action="{URL*}" method="post" autocomplete="off">
- {$INSERT_SPAMMER_BLACKHOLE}
+ <section class="box box___block_main_newsletter_signup"><div class="box_inner">
+ <h3>{!NEWSLETTER}{$?,{$NEQ,{NEWSLETTER_TITLE},{!GENERAL}},: {NEWSLETTER_TITLE*}}</h3>
- <p class="accessibility_hidden"><label for="baddress">{!EMAIL_ADDRESS}</label></p>
+ <form title="{!NEWSLETTER}" onsubmit="if (!check_field_for_blankness(this.elements['address{NID;*}'],event)) return false; if (!this.elements['address{NID*}'].value.match(/^[a-zA-Z0-9\._\-\+]+@[a-zA-Z0-9\._\-]+$/)) { window.fauxmodal_alert('{!javascript:NOT_A_EMAIL;=*}'); return false; } disable_button_just_clicked(this); return true;" action="{URL*}" method="post" autocomplete="off" target="_self">
+ {$INSERT_SPAMMER_BLACKHOLE}
- <div class="constrain_field">
- <input class="wide_field field_input_non_filled" id="baddress" name="address{NID*}" onfocus="placeholder_focus(this);" onblur="placeholder_blur(this);" alt="{!EMAIL_ADDRESS}" value="{!EMAIL_ADDRESS}" />
- </div>
+ <p class="accessibility_hidden"><label for="baddress">{!EMAIL_ADDRESS}</label></p>
- <p class="proceed_button">
- <input class="button_screen_item menu__site_meta__newsletters" type="submit" value="{!SUBSCRIBE}" />
- </p>
- </form>
-</div></section>
+ <div class="constrain_field">
+ <input class="wide_field field_input_non_filled" id="baddress" name="address{NID*}" onfocus="placeholder_focus(this);" onblur="placeholder_blur(this);" alt="{!EMAIL_ADDRESS}" value="{!EMAIL_ADDRESS}" />
+ </div>
+
+ <p class="proceed_button">
+ <input class="button_screen_item menu__site_meta__newsletters" type="submit" value="{!SUBSCRIBE}" />
+ </p>
+ </form>
+ </div></section>
+
+ {$REQUIRE_JAVASCRIPT,ajax}
+ {$REQUIRE_JAVASCRIPT,checking}
+
+ <script>// <![CDATA[
+ add_event_listener_abstract(window,'load',function() {
+ internalise_ajax_block_wrapper_links('{$FACILITATE_AJAX_BLOCK_CALL;,{BLOCK_PARAMS}}',document.getElementById('{$GET;,ajax_block_main_newsletter_signup_wrapper}'),[],{ },false,true);
+ });
+ //]]></script>
+</div>
The 2 changed files from the latest patch release of v10 are zipped:
newsletter-block-ajax.zip
I also created a tracker issue for it:
0003764: AJAX support for main_newsletter_signup block - Composr CMS feature tracker
We can merge at some point in the future if it proves to be stable. It seems so for me.
Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Posted

Site director

Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Posted

Standard member

Posted

Standard member


———–
Publisher of IronFeather Journal since 1987. Host of KGNU Colorado Radio for 20 years.
Currently in Japan & decided to focus on Composr as my number one CMS.
Composr site for community of Hokkaido: Nandalow.com
Composr site for my freelance work: Futurecode.jp
My Compsr edits : http://ironfeather.com/bbs/viewtopic.php?f=12&t=2862
Twitter: https://twitter.com/futurecodejp
Publisher of IronFeather Journal since 1987. Host of KGNU Colorado Radio for 20 years.
Currently in Japan & decided to focus on Composr as my number one CMS.
Composr site for community of Hokkaido: Nandalow.com
Composr site for my freelance work: Futurecode.jp
My Compsr edits : http://ironfeather.com/bbs/viewtopic.php?f=12&t=2862
Twitter: https://twitter.com/futurecodejp
1 guest and 0 members have just viewed this.