Cloudsponge asynchronous javascript

Question

Please can someone assist, I am trying to integrate the Cloudsponge email widget into a Bootstrap modal.

The HTML for the modal is as follows:

<div class="modal fade" id="invite">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <i class="fa fa-warning"></i> Invite friends </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Select how you would like to send an invitation</p>
            </div>
            <div class="modal-footer">
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

The javascript functions are as follows:

$(document).on("hidden.bs.modal", function (e) {
    var activeElement=$(document.activeElement);

    if(activeElement.is(".invite")){
        excludeCloudSponge();
        $("#invite .modal-footer").empty();
    }
});

function includeCloudSponge() {
        first_script = document.getElementsByTagName("script")[0];
        s=\'<script type="text/javascript" src="//api.cloudsponge.com/widget/2xxxxxxxxxxxxxxxxxxxxxxx.js">\';
        $(s).insertBefore(first_script);
}

function excludeCloudSponge() {
    //var script=\'script[src="//api.cloudsponge.com/widget/2xxxxxxxxxxx.js"]\';
    //$(script).remove();

}

function email(){
    var wrapper= document.createElement("div");
    var ea = document.createElement("a");
    ea.setAttribute("class", "cloudsponge-launch");
    ea.innerHTML="Add from Address Book";
    var et=document.createElement("textarea");
    et.setAttribute("class", "cloudsponge-contacts");
    wrapper.append(ea);
    wrapper.append(et);
    return wrapper;
}

$(".invite").click(includeCloudSponge);

The issue is everytime a user clicks on the button the first time, the script is included and the widget works however when i close the modal and reopen the widget no longer opens.

Answer 1

When the CloudSponge widget script is added to the page, it attaches the click handler to any matching elements that it finds after the initial page loads. It doesn't have any knowledge of elements added after this initialization so your application code needs to account for this in one of two ways.

Firstly and most simply, you could let the cloudsponge object know that you've added new elements by calling cloudsponge.init() (passing in no arguments will leave the options untouched). Part of the widget initialization attaches a click handler to all the .cloudsponge-launch elements it finds. This is the simplest approach; it's just a one-liner after you create the new element(s).

// ... add a new .cloudsponge-launch element, then let the cloudsponge object attach
//  the click handler to the new element(s)
cloudsponge.init()

Alternatively, you can apply the launch functionality yourself by attaching to the click event of the newly created elements. You may choose to do this if you need to add your own application logic around the same click event. Here's a basic example using jQuery:

// ... add a new element that is meant to launch the cloudsponge widget,
//  then attach a click handler to launch the widget
$('.new-link-to-launch-cloudsponge').click(function(e) {
  cloudsponge.launch();
  // insert your own application logic here
  e.preventDefault();
});