Computer Programming web Web programming Tips



Confirm Delete with noty.js code example

By Sergey Skudaev

This is a demo for confirm delete message. To implement it, I used noty-2.3.8.js JQuery plugin.

When I downloaded noty zip file, I unzipped it to js directory. It includes 3 folders:layouts, packaged, themes and 2 files:jquery.noty.js and promise.js.

noty.js

Figure 1. Noty.js Directory Structure.

Open the themes folder and open default.js file. Here you can customize how your notification looks. You can change colors and more...

On figure 2 you can see a part of the code where you can modify message background color, border color and button color for every message type.

To view the demo, click trash icon on the right of the record in the table below. A message "name + record will be deleted!" will be displayed with Ok and Cancel buttons. Click the Cancel button and the record will not be deleted. Click the trash icon again. Now, click Ok button on the confirmation message and the record will be deleted. The code, to display the message and delete the record, can be downloaded here.

noty.js

Figure 2. How to modify colors

noty.js

On the figure 3, you can see a code that displays message. You can set message type: alert, warning etc. In my example, I use alert type if the message contains exclamation point. Other wise it has success type. (I use exclamation points only for warning or alerts messages)

You can set timeout time in millisecond, after which the message is closed. I use $msg_timeout PHP variable to hold the timeout value. The timeout of 2000-2500 milliseconds is long enough if you message is not long.

noty.js

Figure 3. Code to display message.

You can set message position: layout:'top' layout:'topCenter' layout:'topLeft' layout:'topRight' layout:'bottomCenter' layout:'bottomLeft' layout:'bottomRight' layout:'center' layout:'centerLeft' layout:'centerRight' layout:'bottom'

IDFirst NameLast NameEmailDelete
18BobBramsBobBrams@gmail.com
19JuliaBramsJuliaBrams@gmail.com
16MichaelBearsMichaelBears@gmail.com
13MichelleHorsesMichelleHorses@gmail.com

Confirm delete demo

My eBooks on Amazon.com



Subscribe to our mail list to receive free code examples.

Comments

No comments yet.

Add Comment

* Required information
(never displayed)
 
Smile Sad Huh Laugh Mad Tongue Crying Grin Wink Scared Cool Sleep Blush Unsure Shocked
 
1000
Is ice cream hot or cold?
 
Enter answer:
Captcha
Refresh
 
Enter code:
 
Notify me of new comments via email.
 
Remember my form inputs on this computer.
 
I have read and understand the privacy policy. *
 
I have read and agree to the terms and conditions. *
 
 
Powered by Commentics