Home › Forums › Newsletter Plugin Support › AJAX Subscription?
- This topic has 9 replies, 5 voices, and was last updated 6 years, 8 months ago by
johnpaul86.
-
AuthorPosts
-
February 8, 2016 at 10:50 pm #20598
vincet
ParticipantHello,
I see in several topics you mention that AJAX subscription is coming. What is the status of this?
Thanks!
February 17, 2016 at 6:53 pm #20932vincet
ParticipantAnyone?
February 26, 2016 at 2:27 am #21102vincet
ParticipantHello? Subscription forms with AJAX…. please
March 17, 2016 at 4:45 am #21599TheFace
ParticipantTheyve been saying this since 2013 do I doubt they will do anything now! Im still waiting for my reply. Cant seem to stop the STUPID page reload after clicking subscribe. Such a shame because it’d be perfect otherwise.
March 17, 2016 at 4:24 pm #21621vincet
ParticipantI’ve stopped using the plugin because of this. Too bad.
August 20, 2016 at 5:30 pm #25075jnz
Participant2013? guess thats plenty of time to learn ajax, right? 🙂
so here is how it goes. we’ll use the build in wp-ajax functionality to get this rolling. in functions.php you need
//this populates the ajax url and a security nonce to your js scripts //these variables are then available via js_config, expl: js_config.ajax_url will be the url to wp-ajax.php wp_localize_script( 'whatever', 'js_config', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'ajax_nonce' => wp_create_nonce( 'noncy_nonce' ), )); //this is your subscription form //call it inside your template anywhere via <?php echo email_subscribe_container(); ?> function email_subscribe_container() { echo '<div id="email-subscribe-container"><h4>' . __( 'Subscribe', 'theme_text_domain' ) . '</h4><p>' . __( 'Enter your email address to subscribe to this blog and receive notifications of new posts by email.', 'theme_text_domain' ) . '</p><form id="newsletter_signup"> <input class="newsletter-email" type="email" name="ne" size="30" placeholder="Email" required /> <input type="hidden" name="na" value="S"> <input type="hidden" name="nhr" value="' . get_bloginfo( 'url' ) . '/"> <input class="newsletter-submit" type="submit" value="Subscribe" /> </form> </div>'; } //this is the function, that will get called by ajax function jnz_tnp_ajax_subscribe() { check_ajax_referer( 'noncy_nonce', 'nonce' ); $data = urldecode( $_POST['data'] ); if ( !empty( $data ) ) : $data_array = explode( "&", $data ); $fields = []; foreach ( $data_array as $array ) : $array = explode( "=", $array ); $fields[ $array[0] ] = $array[1]; endforeach; endif; if ( !empty( $fields ) ) : global $wpdb; $wpdb->insert( $wpdb->prefix . 'newsletter', array( 'email' => $fields['ne'], 'status' => $fields['na'], 'http_referer' => $fields['nhr'], ) ); $output = array( 'status' => 'success', 'msg' => __( 'Thank you for your Email. Please check your inbox to confirm your Subscription.', 'theme_text_domain' ) ); else : $output = array( 'status' => 'error', 'msg' => __( 'An Error occurred. Please try again later.', 'theme_text_domain' ) ); endif; wp_send_json( $output ); } add_action( 'wp_ajax_nopriv_ajax_subscribe', 'jnz_tnp_ajax_subscribe' ); add_action( 'wp_ajax_ajax_subscribe', 'jnz_tnp_ajax_subscribe' );
//following stuff needs to be placed inside your js script file. place it inside a jQuery ready function.
var request; $("#newsletter_signup").on("submit", function( event ) { //abort any previous requests if ( request ) { request.abort(); } var $form = $(this), $inputs = $form.find("input, select, button, textarea"), serializedData = $form.serialize(); request = $.ajax({ url: js_config.ajax_url, type: 'post', data: { action: 'ajax_subscribe', nonce: js_config.ajax_nonce, data: serializedData }, beforeSend: function () { //disable the input fields, cause submission will start now $inputs.prop( "disabled", true ); }, success: function ( response ) { //success, we have an answer $form.append( '<p class="newsletter-' + response.status + '">' + response.msg + '</p>' ); //console.log("success", response ); }, error: function ( response, textStatus, errorThrown ) { //failllll //console.log("error", response, textStatus, errorThrown ); }, complete: function() { //reenable the input fields again $inputs.prop( "disabled", false ); } }); event.preventDefault(); });
##OOOPS. sorry for the falsy charracters. maybe an admin knows how to fix this crap..
otherwise i reccomend search&replace..August 21, 2016 at 4:24 pm #25092jnz
Participantif found an issue with my code. the email address might not be valid, the javascript pre-validation isn’t complete, so i now also check the email on the serverside (email@example would work, but thats not valid, email@example.tld is valid..)
new code for inside the jnz_tnp_ajax_subscribe() function:
function jnz_tnp_ajax_subscribe() { //check the nonce check_ajax_referer( 'pn', 'nonce' ); //grab the submitted $_POST data $data = urldecode( $_POST['data'] ); if ( !empty( $data ) ) : $data_array = explode( "&", $data ); $fields = []; foreach ( $data_array as $array ) : $array = explode( "=", $array ); $fields[ $array[0] ] = $array[1]; endforeach; endif; if ( !empty( $fields ) ) : //validate the email if ( filter_var( $fields['ne'], FILTER_VALIDATE_EMAIL ) ) : //write to db global $wpdb; $wpdb->insert( $wpdb->prefix . 'newsletter', array( 'email' => $fields['ne'], 'status' => $fields['na'], 'http_referer' => $fields['nhr'], ) ); //success response $output = array( 'status' => 'success', 'msg' => __( 'Thank you for your Email. Please check your inbox to confirm your Subscription.', 'blank' ) ); else : //email invalid response $output = array( 'status' => 'error', 'msg' => __( 'The Email address is invalid.', 'blank' ) ); endif; else : //error response ( $fields array is empty ) $output = array( 'status' => 'error', 'msg' => __( 'An Error occurred. Please try again later.', 'blank' ) ); endif; //ajax response wp_send_json( $output ); } //add own functions to wp-ajax add_action( 'wp_ajax_nopriv_ajax_subscribe', 'jnz_tnp_ajax_subscribe' ); add_action( 'wp_ajax_ajax_subscribe', 'jnz_tnp_ajax_subscribe' );
November 9, 2016 at 5:00 pm #27057jnz
Participantso one more time step by step.
first of some stuff that needs to be in functions.php its two things: javascript variables (like nonce and path to wp-ajax) and our function that invokes the signup. and we need some javascript (jquery, to be specific)
this is the best solution, since the previous version did not send out the double opt-in emails.. this one does..for javascript variables:
function blank_scripts() { wp_localize_script( 'requireJS', 'js_config', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'ajax_nonce' => wp_create_nonce( 'ajax-nonce' ), )); } add_action( 'wp_enqueue_scripts', 'blank_scripts' );
and the function for signup:
function jnz_tnp_ajax_subscribe() { check_ajax_referer( 'ajax-nonce', 'nonce' ); $data = urldecode( $_POST['data'] ); if ( !empty( $data ) ) : $data_array = explode( "&", $data ); $fields = []; foreach ( $data_array as $array ) : $array = explode( "=", $array ); $fields[ $array[0] ] = $array[1]; endforeach; endif; if ( !empty( $fields ) ) : if ( filter_var( $fields['ne'], FILTER_VALIDATE_EMAIL ) ) : global $wpdb; //check if the email is already in the database $exists = $wpdb->get_var( $wpdb->prepare( "SELECT email FROM " . $wpdb->prefix . "newsletter WHERE email = %s", $fields['ne'] ) ); if ( ! $exists ) { NewsletterSubscription::instance()->subscribe(); $output = array( 'status' => 'success', 'msg' => __( 'Thank you for your Email. Please check your inbox to confirm your subscription.', 'theme_text_domain' ) ); } else { //email is already in the database $output = array( 'status' => 'error', 'msg' => __( 'Your Email is already in our system. Please check your inbox, to confirm your subscription.', 'theme_text_domain' ) ); } else : $output = array( 'status' => 'error', 'msg' => __( 'The Email address is invalid.', 'theme_text_domain' ) ); endif; else : $output = array( 'status' => 'error', 'msg' => __( 'An Error occurred. Please try again later.', 'theme_text_domain' ) ); endif; wp_send_json( $output ); } add_action( 'wp_ajax_nopriv_ajax_subscribe', 'jnz_tnp_ajax_subscribe' ); add_action( 'wp_ajax_ajax_subscribe', 'jnz_tnp_ajax_subscribe' );
and here is the javascript: (post it inside jQuery ready..)
var request; $("#YOUR FORM THAT WILL BE SUBMITTED").on("submit", function( event ) { if ( request ) { request.abort(); } var $form = $(this), $inputs = $form.find("input, select, button, textarea"), serializedData = $form.serialize(); request = $.ajax({ url: js_config.ajax_url, type: 'post', data: { action: 'ajax_subscribe', nonce: js_config.ajax_nonce, ne: $form.find('.newsletter-email').val(), //THIS IS IMPORTANT TO SUBMIT!! ITS REQUIRED BY THE subscribe() METHOD data: serializedData }, beforeSend: function () { //disable all field $inputs.prop( "disabled", true ); }, success: function ( response ) { //we have an answer. it will be placed right after our form var text = $( '<p class="newsletter-' + response.status + '">' + response.msg + '</p>' ).hide(); $form.after( text ).next().slideDown(); }, complete: function() { //we are done, reenable all fields $inputs.prop( "disabled", false ); } }); event.preventDefault(); });
December 21, 2016 at 9:42 pm #28371Claire39
ParticipantHi jnz,
I’m looking for a solution to have a “You have successfully subscribed to the newsletter” message in the same page, and I found your contribution, thank you !
But… can you help me to find what’s wrong ?
I used your last response exactly, changing ‘$(“#YOUR FORM THAT WILL BE SUBMITTED”).on(“submit”, function( event ) {‘ with the id of my form,and I inserted manually this form in my HTML:
<form id="lechatquipete"> <input class="newsletter-email" type="email" name="ne" size="30" placeholder="Email" required /> <input type="hidden" name="na" value="S"> <input type="hidden" name="nhr" value="http://mydomain.com/"> <input class="newsletter-submit" type="submit" value="Subscribe" /> </form>
…exactly the form you suggested to put in the function.php file.
So, when I enter a new email address, the same page is re-loaded, with an awful url :
http://mydomain.com/?ne=email%40adress.com&na=S&nhr=http%3A%2F%2Fmydomain.com%2FNo message in a new paragraph, and no new subscription in the list
What do I wrong ?
Thank you for answer, and merry Christmas !March 15, 2017 at 12:54 pm #30977johnpaul86
ParticipantHere you find the addon plugin which enables the ajax functionality for your ‘thenewsletterplugin’.
-
AuthorPosts
- You must be logged in to reply to this topic.