Refer external html file from alertify.dialog implementation

Question

Can we refer an external HTML file inside alertify.dialog() implementation. Currently am using below code, which takes the html code to build my dialog.

alertify.myAlert || alertify.dialog('myAlert',function factory(){
            return {
                main:function(content){
                    this.setContent(content); 
                },
                setup:function(){
                    return {
                        options:{
                            modal:false,
                            basic:true,
                            maximizable:false,
                            resizable:false,
                            padding:false
                        }
                    };
                    },
                    build:function() {                              
                        this.elements.content.innerHTML = "**<html>MY HTML CODE</html>**";
                    },
                     hooks: {
                       onshow: function() {
                         this.elements.dialog.style.height = '50%';
                         this.elements.dialog.style.width = '15%';
                       }
                     }
                };
        });

It looks dirty to have all html code here. I want to put this in a separate .html file and refer that in dialog implementation. Do we have any option for that?

score 0 · Answer 1 · answered Dec 07 '15 at 10:19

No such functionality is built into AlertifyJS, but you can use jQuery to create your own wrapper:

// myAlert dialog 
alertify.myAlert || alertify.dialog('myAlert', function factory() {
  return {
    main: function(content) {
      this.setContent(content);
    },
    setup: function() {
      return {
        options: {
          modal: false,
          basic: true,
          maximizable: false,
          resizable: false,
          padding: false
        }
      };
    }
  };
});

//custom wrapper to load external contents
alertify.ajaxAlert = function(url) {
  $.ajax({
    url: url,
  }).success(function(data) {
    alertify.myAlert(data);
  }).error(function() {
    alertify.error('Errro loading external file.');
  });
}

Sample http://plnkr.co/edit/SuFXMRthGpMKKXoG7Yv2?p=preview

Refer external html file from alertify.dialog implementation

1 Answers1