Vbnet Alert Widnow With Do Not Show Again

Like pretty much every programming language, the first matter I always learned how to practise with JavaScript was create a "Hello World" program. I followed a tutorial I plant on the Oracle website which looked like this.

JavaScript Hello World

alert("Hello Earth!");          

21 characters to write "Howdy Globe" in JavaScript. You lot could even shave it downwards to xx if your moral compass will allow you to get out off the semicolon, and you drop the exclamation point. If that doesn't speak volumes about how easy it is to write apps with JavaScript, I'thou simply not sure what does.

I learned an important lesson that day: JavaScript alerts are AMAZING!.

Alert Corruption

The ONLY thing I took from that tutorial was that I could create a modal window in JavaScript with most nix effort on my part. What transpired adjacent was several years of flagrant "warning abuse". I put alerts everywhere. Alerts, prompts, confirms - you proper noun it. Debugging, validation, errors, warnings, success; I had an alert for every occasion. I even created alerts to tell you that I was about to alarm y'all. I turned the JavaScript warning into an art grade.

I wasn't the merely one though! Recollect days when you would end upward on a website and you would literally be held hostage by alerts? One right afterwards the other blocking the entire browser UI. They were always oddly phrased questions asking y'all in a opposite way if yous wanted a toolbar extension. No thing how I answered, I always ended upwards with a toolbar extension. I had a lot of toolbar extensions.

Over the years, we've realized that JavaScript alerts actually merely don't have a skilful place in modern applications. Several browser vendors have fifty-fifty gone so far equally to curtail alerts completely. Consider Google Chrome who allows the terminate user to block all alerts after the outset 1.

Alerts can be dangerous if overused. Additionally, they are not going to win you any blueprint awards. Nonetheless, they practice accept a place. There was outrage earlier this year when Apple tree either intentionally or inadvertently removed alerts from Home Screen webapps in iOS 7.

The trouble is that alerts are incredibly obtrusive. They lock the entire browser enervating your attending. You cannot ignore them. If an alert is opened on a an inactive tab, information technology volition immediately come up to the front end and yous will non exist doing anything else until you lot actively dismiss it. This is commonly seen with banking websites which take a session timeout period and is generally referred to equally "stealing the focus". This is one of the nigh confusing things you lot tin can do to a user.

So what practice you do when yous need to give the user an alert? Sometimes you practise need to finish your user and give them a bulletin; allow them know that they have been logged out, or that some other critical action has taken place. It is possible to do it though without being a jerk?

The Get-go Rule Of Alerts Is:

Don't utilize a JavaScript alarm if you can avoid it.

That means that you pick some other method of feedback. For case, if you are a bank and a user's session expires, there is no need to alert them that yous are about to log them out. They have no choice in the matter, so just get on with it already. Information technology would exist nice if you put a bulletin on the login screen explaining that they have been logged out for their ain safe. In that location is no reason to steal their focus. They volition see the message when they come back to the tab to resume their cyberbanking activities.

But If Y'all Must Warning, Remember:

Don't utilise a JavaScript alert if you can avoid it.

If you discover that you must have an alert, there is a however a strong argument to be made that you shouldn't use the born JavaScript one. An culling is to create your own alert using a JavaScript UI framework and modal window.

Modal Windows As Alerts

Most every JavaScript UI framework includes a modal window of some sort. These windows employ div overlays to block interaction with the page. At that place are several reasons why these widgets are improve than the browser's native alert...

1. They practise not lock the entire browser, only preventing interaction with the viewport
2. They are far more customizable
3. They are (by and large) much nicer looking

Many jQuery libraries offering a modal window, including Kendo UI, Telerik HTML5 and JavaScript framework. One fox that you can use with Kendo UI is to create a modal window on the fly. This ways that you don't actually have to have an chemical element in the page to turn into an alert. You can practice this, but you accept to be very careful with information technology, and I'll explain why in a moment.

Disclaimer: Do not exercise this. This is bad. Brand sure y'all read why bad.

On The Wing Kendo UI Window: BAD

// adhere kendoAlert to the window window.kendoAlert = role(msg) {    // create modal window on the fly   var win = $("<div>").kendoWindow({     modal: truthful    }).getKendoWindow();    // set the content   win.content(msg);    // heart information technology and open up it   win.middle().open up(); };  $(role() {   // call the warning on button click   $("#open").on("click", function() {     kendoAlert("Hey Now!");   }); });          

View Demo

This will give you a modal window on the fly with your message as the content. That div is created past jQuery, appended to the body and then the modal window is displayed. It all sounds wonderful until yous realize that everytime y'all click the button, a new <div> with markup gets added to the page. Yikes! You lot don't need a new window everytime, yous just desire to reuse the aforementioned one.

Window Re-use With Closures

You should instead create the window once and and then utilise the same ane over and over again. This can be done by using a closure. The concept of closures tin easily go you lot super confused. A closure is when yous apply an outer function to lock in the state for an inner office. To avoid sending you down the rabbit hole and for the sake of what we're going to do here, allow's put information technology like this: Let's say function A creates function B – function B has access to all the variables/state that were around when role A created B… even if function A returns role B to something else and that something else invokes it afterward.

What we'll do is create that outer function which executes itself (IIFE). When it executes it will create the modal window and store a reference to it. It will then return a office which sets the content, and and so opens the window. This inner/outer function human relationship is the closure.

Closure

// adhere kendoAlert to the window window.kendoAlert = (function() {    // this function is executed equally presently as   // it is loaded into the browser    // create modal window on the wing and    // store it in a variable   var win = $("<div>").kendoWindow({     modal: true    }).getKendoWindow();    // returning a function will gear up kendoAlert to a function   return part(msg) {      // anything within this function has access to the `win`     // variable which contains the Kendo UI Window.  Fifty-fifty Way     // after the outer role was run and this object was created      // set the content     win.content(msg);      // center it and open it     win.center().open();   };  }());  $(office() {   // open the window on push button click   $("#open").on("click", function() {     kendoAlert("Hey Now!");   }); });          

If you're rather new to JavaScript and the to a higher place concept is incredibly confusing, don't for ane second experience bad. It IS incredibly confusing, but after y'all become used to leveraging closures to encapsulate your code, it will start to feel very natural. It'due south actually quite a powerful concept, only it's a brain bender the offset time you lot attempt and soak information technology in.

Asynchronous-icity

Ane of the prissy things virtually the built-in JavaScript alarm is that - unlike near annihilation else in JavaScript - it'due south synchronous. It'southward completely blocking, and no other code will execute until it's been dismissed. Once you brainstorm to use a JavaScript modal window replacement, yous lose this incredibly valuable intermission in execution.

In our current implementation of the Kendo UI Window, any lawmaking that occurs later on a call to kendoAlert will get executed immediately. The browser could intendance less if our custom modal window is open or closed, expressionless or live. It's going to execute the code to open the window and then become right on processing any subsequent JavaScript. If nosotros want some action to occur after the user has dismissed the alert, we demand to handle that ourselves.

But how on earth practise you lot turn asynchronous code into a syncronous operation? We accept two options hither...

1. Callbacks
2. Promises

Callbacks

Callbacks are the oldest flim-flam in the book for making two operations synchronous. The concept plays out like this...

1. You lot call Operation 1 and send it a function you want executed on completion of Operation ane
2. Operation one fires an event when it is finished
3. Performance i finished outcome calls the function you lot passed in - the callback

In the case of the modal window, Kendo UI Windows will call a conciliate event when they have been dismissed and take finished their endmost animation. What we want to exercise is specify a part for that Kendo UI Window to call when it'south deactivated upshot is fired. Since we are reusing the same window over and once more, we take to bind to the deactivate result at the fourth dimension we phone call kendoAlert.

// attach kendoAlert to the window window.kendoAlert = (function() {    // create modal window on the fly   var win = $("<div>").kendoWindow({     modal: true    }).getKendoWindow();    return function(msg, deactivate) {      // set the content     win.content(msg);      // if a deactivate function was passed     if (conciliate) {       win.bind("deactivate", deactivate);     }     // otherwise unbind the deactivate upshot     else {       win.unbind("deactivate", deactivate);     }      // center it and open up it     win.eye().open();   };  }());  $(part() {   $("#open").on("click", function() {     // open the alert     kendoAlert("Hey Now!", function() {       // modify the body background color afterwards       // the warning is dismissed       $("body").css("background-color", "salmon");     });   }); });          

Callbacks have been around for a very long fourth dimension. Since JavaScript is rather functional in nature, we can pass functions around like this and it's perfectly acceptable. That is at least, until it's not.

There are a few implementation problems with callbacks in our paticular scenario. For starters, we have to cheque each and every time kendoAlert gets called. Then we have to bind or unbind to the Kendo UI Window deactivate event each and every fourth dimension based on whether or not we passed a function for the deactivate parameter. And really, we should be checking for whether or non deactivate even IS a function before we endeavor and execute it. This is very manual and kind of gross. We can make this better by using a concept that jQuery already has implemented for u.s..

Promises

A new specification has emerged in the past few years and has been implemented nearly everywhere, including Windows viii HTML/JS apps. Promises. The whole indicate of promises is to make dealing with callbacks cleaner, easier, safer, and more than reliable.

The theory works similar this...

• You call a function and in return you get back a hope which represents the operation you just requested via your function phone call.
• That promise gives you lot several methods that you can employ to handle the event of the otherwise asynchronous operation.

Promises are not magic or new language functionality, they are simply a design for helping usa get out of "callback hell". jQuery implements promises in the form of something called a "Deferred". There is a lot of statement and fence about whether or not jQuery implements the promises specification correctly. I am not here to weigh in on that debate in any course. Rather, nosotros are going to employ Deferred's every bit jQuery implements them (right or incorrect) to employ a promise instead of dealing with a callback and all the manual logic that comes with it.

Promise In Lieu Of Callback

// attach kendoAlert to the window window.kendoAlert = (office() {    var dfrd;    // create modal window on the wing   var win = $("<div>").kendoWindow({     modal: true,     deactivate: role() {       // when the conciliate event fires,       // resolve the promise       dfrd.resolve();     }   }).getKendoWindow();    return function(msg) {      // create a new deferred     dfrd = $.Deferred();      // set the content     win.content(msg);      // middle it and open up information technology     win.center().open();      // render the deferred object     return dfrd;   };  }());  $(role() {   $("#open").on("click", office() {     // open the warning     kendoAlert("Hey Now!").and then(function() {       // change the torso background color after       // the warning is dismissed       $("body").css("groundwork-color", "salmon");     });   }); });          

You can run into from the in a higher place code what the Deferred buys the states here. We still accept to pass a callback, but nosotros no longer have to babysit that callback all the way through to it's execution. Instead, our kendoAlert call returns the Deferred object which has a and so method. We simply phone call this method and laissez passer in the office we want executed. The window will resolve the Deferred promise in the deactivated event, which I specified in the window initialization code. And what happens if we don't specify an action to occur on deactivate? Nothing. No checking or logic required on our part.

Whatsoever subsequent kendoAlert calls are ignored if they are made while a kendoAlert is nevertheless open up. That'due south why you would want to use the and then method to brand certain your alerts aren't stepping on each other.

Customization

I mentioned before that we could customize these modal windows much much more than than a standard JavaScript alert. Here is an example of one I created that alllow yous to set the championship, gives information technology a flake of manner, replicates the "ok" button in a standard alert, and alters the animation some too.

It'south remarkable how many concepts a uncomplicated UI chemical element like an alert can combine. In that last example you will notice closures, templating, promises and result delegation. Information technology's fun to build these unproblematic reusable components since yous larn then much in the process!

Make Information technology Better!

Encounter anything I missed? Tin can you meliorate on this code? What most adding "OK" and "Cancel" buttons and handling those events every bit well? What about collecting user input? JavaScript provides us with the alarm, confirm and prompt to handle all of these scenarios. Download your copy of Kendo UI and see if you can't expand on this sample to create a reusable and robust alert/confirm/prompt component that won't steal your user'southward sunshine.

rodriguezconiefor.blogspot.com

Source: https://www.telerik.com/blogs/how-to-do-javascript-alerts-without-being-a-jerk

Share this post