Close on data success
-
I would like to close the popup/modal if pi-address-form-success is added to the form. Any ideas?
-
Hi,
Add the below code in your theme functions.php file with this it will auto close the popup on successfull insertion of the address
function pisol_custom_20210815() { $js = ' jQuery(document).ready(function($){ $(document).ajaxComplete(function (event, jqxhr, settings) { if (settings.data && settings.data.includes("action=pisol_save_address_form")) { if(jqxhr.responseJSON){ if(jqxhr.responseJSON.success){ setTimeout(function () { jQuery.magnificPopup.close() }, 1000); } } } }); });'; wp_add_inline_script('jquery', $js, 'after'); } add_action( 'wp_print_scripts', 'pisol_custom_20210815', 100 );Wow thank you so much. And what if I use the shortcode inside my own modal like so:
<button id="location_btn">Open Modal</button> <div id="location_modal" class="modal"> <div class="location_modal-content"> <div class="modal-header-2"> <span class="modal-title-2">Locatie</span> <span class="close-2">×</span> </div> [pi_address_form] </div> </div>I understand if this is too much to ask
In that case you can add some extra JS code to hide the Html on sucess event(right now we are closing the popup you can hide html)
see the below new code this will hide the <div id=”location_modal” class=”modal”>
(make sure to remove the old code and then add this new one in this only different is
jQuery(“#location_modal”).fadeOut(); )function pisol_custom_20210815() { $js = ' jQuery(document).ready(function($){ $(document).ajaxComplete(function (event, jqxhr, settings) { if (settings.data && settings.data.includes("action=pisol_save_address_form")) { if(jqxhr.responseJSON){ if(jqxhr.responseJSON.success){ setTimeout(function () { jQuery.magnificPopup.close() }, 1000); jQuery("#location_modal").fadeOut(); } } } }); });'; wp_add_inline_script('jquery', $js, 'after'); } add_action( 'wp_print_scripts', 'pisol_custom_20210815', 100 );Works perfectly thank you! One tiny last thing: I would like to use the user’s input zipcode as the text for the modal button. Preferbly with AJAX, but that is probably not possible. So can I use
if(jqxhr.responseJSON.success){ location.reload();To reload the page after succes, and update the users zip code?
yes you can do that
Thank you!
The topic ‘Close on data success’ is closed to new replies.