Using SweetAlert.js to call a function in separate javascript code. Trouble with different scopes

Question

I am making a website and I have a functionality that allows a user to drag and drop a specific type of file and then get more information about that file. I have code working perfectly except for one thing. I have an alert box (actually a SweetAlert box) that appears with the information that the user would like to view. I have code that processes the file, then makes a json, and finally makes html code that has three buttons, each button has its own function that resides in my javascript. My problem is, I would like users to be able to click on the three different types of buttons to do various things, but the SweetAlert box acts as a new html page on top of my website and has its own scope. The alert box does not recognize my javascript functions as existing and so it does nothing.

To call this alert, I use an ajax request. This is the success message that calls the function. Data is the json formatted.

    success: function(data) {
        informUser(printData(data))
    },

This is my javascript that prints the json formatted and the buttons. I didn't include some parts for simplisity so let me know if things do not make sense in my code.

function printData(data) {
    var str = ""
    str += '<p>Your file was added!</p>';
    str += "<p>You can access it at these locations: </p>";
    str += "<button onclick='changeView()'/>View all files</button>";
    str += "<button onclick='downloadCurrent()'/>Download the current file</button>";
    str += '<p>To upload this, click here: </p>';
    str +='<button onclick="addAsNewButton()">Add As New</button>';
    return str;
};

This is my SweetAlert, it acts as its own javascript file in a way.

var informUser = function(message){
    swal({title: "Congrats on uploading a file!", html: true, text: message, type: "info" });
}; 

I was reading examples about how SweetAlerts can have functions in them and I need help calling mine. If anyone thinks they can help me with this I am willing to explain anything else that might be needed, including things that I have tried and have failed. I would even be grateful for general ideas on how to fix this. Here is a link to the SweetAlert documentation http://t4t5.github.io/sweetalert/ .

Answer 1

I'm not sure how your code is structured. You have to make sure that the function is visible.

A quick and dirty way is this:

window.changeView = function(){
    // your code
};
window.downloadCurrent = function(){
    // your code
};
window.addAsNewButton = function(){
    // your code
};

// ...

function printData(data) {
    var str = ""
    str += '<p>Your file was added!</p>';
    str += "<p>You can access it at these locations: </p>";
    str += "<button onclick='window.changeView()'/>View all files</button>";
    str += "<button onclick='window.downloadCurrent()'/>Download the current file</button>";
    str += '<p>To upload this, click here: </p>';
    str +='<button onclick="window.addAsNewButton()">Add As New</button>';
    return str;
};

A better way is to use a module pattern (http://toddmotto.com/mastering-the-module-pattern/):

var yourModule = (function () {

  return {
    changeView : function(){
    };
    downloadCurrent : function(){
    };
    addAsNewButton : function(){
    };
  };

})();

// ...

function printData(data) {
    var str = ""
    str += '<p>Your file was added!</p>';
    str += "<p>You can access it at these locations: </p>";
    str += "<button onclick='window.yourModule.changeView()'/>View all files</button>";
    str += "<button onclick='window.yourModule.downloadCurrent()'/>Download the current file</button>";
    str += '<p>To upload this, click here: </p>';
    str +='<button onclick="window.yourModule.addAsNewButton()">Add As New</button>';
    return str;
};

I hope it helps.

Edit:

An even better way is to attach the events after the rendering (an example with jQuery):

var informUser = function(message){
    swal({title: "Congrats on uploading a file!", html: true, text: message, type: "info" });
    $(".btn-change-view").click(function(){   });
    $(".btn-download-current").click(function(){   });
    $(".btn-add-as-new").click(function(){   });
}; 

// ...

function printData(data) {
    var str = ""
    str += '<p>Your file was added!</p>';
    str += "<p>You can access it at these locations: </p>";
    str += "<button class="btn-change-view"/>View all files</button>";
    str += "<button class="btn-download-current"/>Download the current file</button>";
    str += '<p>To upload this, click here: </p>';
    str +='<button class="btn-add-as-new">Add As New</button>';
    return str;
};

Edit after comment:

If it is only that, you can try this:

var informUser = function(message){
    swal({title: "Congrats on uploading a file!", html: true, text: message, type: "info" });
    $(".btn-change-view").click(changeView);
    $(".btn-download-current").click(downloadCurrent);
    $(".btn-add-as-new").click(addAsNewButton);
};