CODEWITHSUNDEEP
javascriptnotifyjs
Ishpreet
Ishpreet

Reputation: 667

Complete HTML in notify.js

I am using library Notify js for showing success or error messages on my php web page.
When I use normal text like

$.notify("Changes are made successfully", "success");

Then it works fine.

But sometimes, I need to show message in unordered list like as follows:

var message = '<p> Please correct following errors and then try again </p><ul><li>value1 is wrong</li><li>value 3 is wrong</li><li>value 5 is wrong</li></ul>';
$.notify(message, "error");

Then message is shown as it is, means whole html is displaying, instead I want to display like

Please correct following errors and then try again

 - value1 is wrong
 - value3 is wrong
 - value5 is wrong

Any suggestion would be highly appreciated!

Upvotes: 2

Views: 1959

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206169

Other two ways (beside the utterly noisy addStyle method)

Use \n newline escape character

use \n and expect <br>! Therefore instead of using UL > LI use just some combination of newline escapes \n like:

Store your possible errors inside an Array and than simply use then inside the Notify mesage:

const errors = [ // Or however you can push() errors into this array...
  "value 1 is wrong",
  "value 2 is wrong",
  "value 3 is wrong",
];

// Add dashs "-" to each error and join with newline
const errorsList = errors.map(err => ` - ${err}`).join("\n");
const message = `Please correct following errors and then try again\n\n${errors.join("\n")}`;
$.notify(message, "error");

which will result in:

Please correct following errors and then try again

 - value 1 is wrong
 - value 2 is wrong
 - value 3 is wrong

Modify the plugin source

A simple edit to the source code to allow for HTML is:

at line 205 add to the pluginOptions:

        encode: true,

at line 513 change d = encode(d); to be:

                if (this.options.encode) {
                    d = encode(d);
                }

Finally, when you use the plugin simply set the new Option encode to false:

// Use like:
$.notify("Lorem<br><b>Ipsum</b>", {encode: false});

Here's my pull request related to this Issue#130

Upvotes: 0

Jan Heil
Jan Heil

Reputation: 415

you can add an own Class with the HTML Content like a Template System.

$.notify.addStyle('saved', {
  html: 
    "<p>Saved blabla...</p>"
});

$.notify(..., { 
  style: 'saved'
});

Upvotes: 3

Related Questions