Today I needed to implement an unobstrusive replacement for native alert and confirm functions for a client’s project. I searched a lot of libs and solutions but none of them worked as I wanted. So I decided to at least try to implement one real unosbtrusive replacement.
Here we go. First we need jQuery, jQuery UI Core (core, widget, position) and widget (dialog), choose any theme and we are set.
Take a look at the code below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function ($) { $.each($('a'), function() { // for each <a> tag on the page e = $(this).attr("onclick"); if(e!=undefined) { // checking if the attribute "onclick" exists string = $(this).attr("onclick").toString(); // retrieving the value of onclick attribute if (string.indexOf('return confirm(')!=-1) { // and if value contains "return confirm(" piece of code target = $(this).attr("href"); // get the target url of the <a> tag $(this).click(function (e) { e.preventDefault(); // blocking default behaviour confirm(null, function () { // calling confirm function with a callback implementation window.location.href = target; }); }); } } }); }); |
After that i need to overload the native confirm function. Check the next code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
function confirm(message, callback) { $('body').append('<div id="confirm" style="display:none">'+message+'</div>'); // dont forget to hide this! $( "#confirm" ).dialog({ resizable: false, title: 'Please Confirm', modal: true, buttons: [ { text: "Yes", click: function() { $(this).dialog("close"); if ($.isFunction(callback)) { callback.apply(); } } },{ text: "No", click: function() { $(this).dialog("close");} } ], close: function(event, ui) { $('#confirm').remove(); } }); } |
Note that this function you can customize whatever you want, but here I’m using jQuery UI Dialog. You can try your own if you want, just pay attention on line 13, when I throw the callback. Of course, this is the first draft of workaround, maybe someone can increment the idea.
Heres the full code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unobtrusive Confirm Javascript Replacement with jquery UI Dialog</title> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script> <script> $(function ($) { $.each($('a'), function() { e = $(this).attr("onclick"); if(e!=undefined) { string = $(this).attr("onclick").toString(); if (string.indexOf('return confirm(')!=-1) { target = $(this).attr("href"); $(this).click(function (e) { e.preventDefault(); confirm(null, function () { window.location.href = target; }); }); } } }); }); function confirm(message, callback) { $('body').append('<div id="confirm" style="display:none">'+message+'</div>'); $( "#confirm" ).dialog({ resizable: false, title: 'Confirm', modal: true, buttons: [ { text: "Yes", click: function() { $(this).dialog("close"); if ($.isFunction(callback)) { callback.apply(); } } },{ text: "No", click: function() { $(this).dialog("close");} } ], close: function(event, ui) { $('#confirm').remove(); } }); } </script> </head> <body> <a href="http://www.google.com" onclick="return confirm('Are you sure?');">Send me to google!</a> </body> </html> |