I'm trying to replace the standard javascript confirm with a twitter bootstrap modal window. Everything is almost working (the modal is shown with its confirm text), but I'm stuck trying to catch the caller href, which I need to bind the "ok" button.
Here's my code (almost working example: http://jsfiddle.net/k5uDw/):
jQuery.altConfirm = function (options) {
var box = '<div class="modal fade static" id="confirm" data-backdrop="static" tabindex="-1" role="dialog">';
box += '<div class="modal-dialog">';
box += '<div class="modal-content">';
box += '<div class="modal-body"> </div>';
box += '<div class="modal-footer">';
box += '<button type="button" class="btn btn-default" data-dismiss="modal">No</button>';
box += '<button type="button" class="btn btn-primary">Ok</button>';
box += '</div>';
box += '</div>';
box += '</div>';
box += '</div>';
$("body").append(box);
window.confirm = function () {
$(".modal-body").html( arguments[0].replace(/\n/, "<br />") );
$('.modal').modal();
$(".btn-default").on('click', function() {
$(this).modal('hide');
});
$(".btn-primary").on('click', function() {
return true; // this is where I need the caller's HREF,
// to make it actually proceed.
// Return true, obviously, does nothing.
});
};
};
$(document).ready(function() {
$.altConfirm();
});
Any hint? Please note that I would like this to be a drop-in replacement for standard javascript confirm, so modifying the way the confirm itself is called it is not a possibility (if this plugin is active -> then the modal is shown, if this plugin is not active -> then the standard confirm is fired).
I've updated your fiddle with a solution that rewrites the code on the fly; useful solution if your code is generated by a framework and you can't/don't want to change the framework's function that writes it:
on document ready(), it looks up for tags and if finds a "confirm" call, then update the parameter passed to it in order to store some other informations (link to open or action to execute when ok is pressed on the modal); then the function that overrides the standard confirm(), returns always false (to stop execution) and handles what has to be done when user press ok on the modal:
$(document).ready(function() {
console.log('loading done');
jQuery.each($('body').find('a'), function(i, val) {
var hrefAttr = ($(val).attr('href'));
$(val).attr('href', '');
$(val).attr('onClick', function(index, value) {
if (value != undefined) {
var att = '-';
if (hrefAttr == '#') {
att = $(this).attr('onclick');
//att = att.match(/{ (.*) }/);
att = att.substring(att.indexOf('{') + 1, att.indexOf('}'));
}
if (value.indexOf("confirm('") >= 0) {
return value.replace("confirm('", "confirm('" + hrefAttr + '||| ' + att + '||| ');
}
if (value.indexOf('confirm("') >= 0) {
return value.replace('confirm("', 'confirm("' + hrefAttr + '||| ' + att + '||| ');
}
}
});
});
$.altConfirm();
});
I have updated your fiddle so that it now works:
I added an id to your button and made a copy with a different id. I then passed the anchor object to the function by adding this
in the parameters:
<a target='_blank' href="#" onclick="return confirm('Are you sure?', this)" id="clicky2">Or me</a>
Then, when you have the javascript object, you can get any attributes from it to find out which link triggered it.
button.getAttribute('id')
I also added the following code to fix a bug where it would create multiple events on click of the ok button. You need to remove previous "on" instances before adding a new one.
$(".btn-primary").off('click');
I'm trying to intercept web requests and redirect them to a url I have saved on local storage but it isn't working. My code is as follows: chrome.webRequest.onBeforeRequest.addListener( function ...
I'm trying to intercept web requests and redirect them to a url I have saved on local storage but it isn't working. My code is as follows: chrome.webRequest.onBeforeRequest.addListener( function ...
I want to display a hidden field when I make a particular selection using the radio button. Currently I have wriiten the code with onClick. But somehow it doesnt seem to be working for me. <td ...
I want to display a hidden field when I make a particular selection using the radio button. Currently I have wriiten the code with onClick. But somehow it doesnt seem to be working for me. <td ...
We used to use Exchange 2007 and the HTML + JavaScript below to log into OWA 2007 automatically. But we've now upgraded to Exchange 2013 and the script no longer works. It displays 404 - File or ...
We used to use Exchange 2007 and the HTML + JavaScript below to log into OWA 2007 automatically. But we've now upgraded to Exchange 2013 and the script no longer works. It displays 404 - File or ...
I am using socket.io.Some users sending message to me 'I can't send a message why ?'.I researched this problem,guess firewall or antivirus blocking websocket.If browser doesn't support the websocket,...
I am using socket.io.Some users sending message to me 'I can't send a message why ?'.I researched this problem,guess firewall or antivirus blocking websocket.If browser doesn't support the websocket,...