SOE : Ajax confirm

SOW plugins are part of Smarty Core, written from scratch!

src/js/sow.core/sow.ajax_confirm.js

Overview:

full ajax confirmation (or regular link as submit type)
identifiable header color (success/warning/danger/etc)
uses bootstrap modal
callback support
lightweight, 6Kb minified (2.2Kb gzipped)

Clean Primary Secondary Success Danger Warning Info

                  
                    <!--
                      
                      Change confirm layout: 
                      data-ajax-confirm-type="" (clean)
                      data-ajax-confirm-type="primary"
                      data-ajax-confirm-type="secondary"
                      data-ajax-confirm-type="success"
                      data-ajax-confirm-type="danger"
                      data-ajax-confirm-type="warning"
                      data-ajax-confirm-type="info"

                      Icons (Smarty icons)
                      documentation/icons-smarty.html
                      
                      data-href instead of href 
                      to avoid "open in new tab"

                    -->
                    <a href="#" data-href="plugins-sow-ajax-confirm.html" 
                      class="js-ajax-confirm btn btn-primary" 

                      data-ajax-confirm-mode="ajax" 
                      data-ajax-confirm-type="secondary" 

                      data-ajax-confirm-title="Please Confirm" 
                      data-ajax-confirm-body="Are you sure you want to delete?" 

                      data-ajax-confirm-btn-yes-class="btn-sm btn-primary" 
                      data-ajax-confirm-btn-yes-text="Confirm" 
                      data-ajax-confirm-btn-yes-icon="fi fi-check" 

                      data-ajax-confirm-btn-no-class="btn-sm btn-light" 
                      data-ajax-confirm-btn-no-text="Cancel" 
                      data-ajax-confirm-btn-no-icon="fi fi-close" 
                      data-ajax-confirm-callback-function="">
                      Confirm me
                    </a>

Optional callback function

                  
                    <script>
                      var my_confirm_callback = function(el, data) {
                        
                        // el = confirm modal element
                        // data = data sent by the server (html content)
                        alert('I am a callback!');

                      }
                    </script>

Confirm Full ajax

Preview
HTML

Confirmation request is sent via ajax, without page refresh!

Please confirm

                  
                    <!--

                      data-href is the confirmation url and should contains 
                      the backend required params, like in this example.

                      If confirmation URL is added to href, the plugin will remove it 
                      and will automatically create data-href with it!
                      Reason: people should not be able to "open link in new tab"
                      skipping the confirmation window.

                    -->
                    <a href="#"
                      data-href="plugins-sow-ajax-confirm.html?action=delete&amp;item_id=1" 
                      class="js-ajax-confirm btn btn-primary" 

                      data-ajax-confirm-mode="ajax" 
                      data-ajax-confirm-method="GET" 

                      data-ajax-confirm-size="modal-md" 
                      data-ajax-confirm-centered="false" 

                      data-ajax-confirm-title="Please Confirm" 
                      data-ajax-confirm-body="Please confirm now or later!" 

                      data-ajax-confirm-btn-yes-class="btn-sm btn-primary" 
                      data-ajax-confirm-btn-yes-text="Confirm" 
                      data-ajax-confirm-btn-yes-icon="fi fi-check" 

                      data-ajax-confirm-btn-no-class="btn-sm btn-light" 
                      data-ajax-confirm-btn-no-text="Cancel" 
                      data-ajax-confirm-btn-no-icon="fi fi-close"

                      data-ajax-confirm-callback-function="">
                      Please confirm
                    </a>

Confirm Url redirect

Preview
HTML

User is redirected to specified Url!

Please confirm

                  
                    <!--

                      data-href is the confirmation url and should contains 
                      the backend required params, like in this example.

                      If confirmation URL is added to href, the plugin will remove it 
                      and will automatically create data-href with it!
                      Reason: people should not be able to "open link in new tab"
                      skipping the confirmation window.

                    -->
                    <a href="#"
                      data-href="plugins-sow-ajax-confirm.html?action=delete&item_id=1" 
                      class="js-ajax-confirm btn btn-primary" 

                      data-ajax-confirm-mode="regular" 

                      data-ajax-confirm-size="modal-md" 
                      data-ajax-confirm-centered="false" 

                      data-ajax-confirm-title="Please Confirm" 
                      data-ajax-confirm-body="Please confirm me now or later!" 

                      data-ajax-confirm-btn-yes-class="btn-primary" 
                      data-ajax-confirm-btn-yes-text="Confirm" 
                      data-ajax-confirm-btn-yes-icon="fi fi-check" 

                      data-ajax-confirm-btn-no-class="btn-light" 
                      data-ajax-confirm-btn-no-text="Cancel" 
                      data-ajax-confirm-btn-no-icon="fi fi-close">
                        Please confirm
                    </a>