Использование SweetAlert.js для вызова функции в отдельном коде javascript. Проблемы с разными областями

Я делаю веб-сайт, и у меня есть функциональность, которая позволяет пользователю перетаскивать файлы определенного типа, а затем получать дополнительную информацию об этом файле. У меня есть код, работающий отлично, за исключением одной вещи. У меня есть окно предупреждения (на самом деле окно SweetAlert), которое появляется с информацией, которую пользователь хотел бы просмотреть. У меня есть код, который обрабатывает файл, затем создает json и, наконец, создает html-код с тремя кнопками, каждая кнопка имеет свою собственную функцию, которая находится в моем javascript. Моя проблема в том, что я хотел бы, чтобы пользователи могли нажимать на три разных типа кнопок, чтобы делать разные вещи, но окно SweetAlert действует как новая html-страница поверх моего веб-сайта и имеет свою собственную область действия. Окно предупреждения не распознает мои функции javascript как существующие и поэтому ничего не делает.

Чтобы вызвать это предупреждение, я использую запрос ajax. Это сообщение об успешном вызове функции. Данные в формате json.

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

Это мой javascript, который печатает форматированный json и кнопки. Я не включил некоторые части для простоты, поэтому дайте мне знать, если что-то непонятно в моем коде.

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;
};

Это мой SweetAlert, он действует как отдельный файл javascript.

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

Я читал примеры того, как в SweetAlerts могут быть функции, и мне нужна помощь в вызове моей. Если кто-то думает, что может помочь мне с этим, я готов объяснить все, что может понадобиться, включая то, что я пробовал и потерпел неудачу. Буду даже признателен за общие идеи, как это исправить. Вот ссылка на документацию SweetAlert http://t4t5.github.io/sweetalert/.


javascript html sweetalert
person Shannon    schedule 29.07.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я не уверен, как устроен ваш код. Вы должны убедиться, что функция видна.

Быстрый и грязный способ таков:

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;
};

Лучше использовать шаблон модуля (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;
};

Я надеюсь, что это помогает.

Изменить:

Еще лучше прикрепить события после рендеринга (пример с 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;
};

Изменить после комментария:

Если это только то, вы можете попробовать это:

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);
};
person Markus    schedule 30.07.2015
comment
Я попробовал это сегодня с несколькими типами вариаций, но безуспешно. Я не могу поместить функции непосредственно в функцию informUser, потому что тогда они также выходят за рамки остальной части моего кода. Я ценю помощь. Я собираюсь провести день, редактируя исходный код sweetAlert для своего использования, и я могу сообщить вам, если найду решение. - person Shannon; 30.07.2015