overriding the javascript ALERT to jquery dialog

Question

I was trying to do the magic and turn all of my platform javascript alerts to jquery dialog, I followed the following scripts

<div id="overrideAlert"></div>

<script>
window.alert = function(message) {
    $('#overrideAlert').text(message).dialog({
        modal:true,
        title:'Message',
        buttons: {
            'OK':function(){
                $(this).dialog('close');
            }
        }
    });
};
</script>

But no luck.

Is there a clean solution for this? Thanks,

Do you get any messaging in the console? You have loaded jQuery and jQuery UI into the page properly, yes? — Marc
– Marc, Commented May 1, 2013 at 2:56
looks fine to me plnkr.co/edit/mzSKFsjvkSod1oqErdFF?p=preview — Arun P Johny
– Arun P Johny, Commented May 1, 2013 at 2:58
one problem could be the synchronized nature of the alert and async nature of dialog — Arun P Johny
– Arun P Johny, Commented May 1, 2013 at 3:00
Not sure about dialog, but does it auto-open or do you need to manually .open()? — Rick Viscomi
– Rick Viscomi, Commented May 1, 2013 at 3:01

The Alpha · Accepted Answer · 2013-05-01 03:06:09Z

8

I would prefer a dynamic div instead

$('<div />').text(message).dialog({
    modal:true,
    title:'Message',
    buttons: {
        'OK':function(){
            $(this).dialog('close');
        }
    },
    close:function(){ $(this).dialog('destroy').remove(); }
});

DEMO.

answered May 1, 2013 at 3:06

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ComeRun Over a year ago

Thanks man, say I have a link and when click, an alert pops up, does this help that scenario as well?

xdazz · Accepted Answer · 2013-05-01 03:01:56Z

3

It just works.

Check at the jsfiddle demo.

Note: you can't call alert('foo'); directly inside the <head>'s <script> tags, because the div element is not ready on the dom.

answered May 1, 2013 at 3:01

xdazz

161k38 gold badges255 silver badges278 bronze badges

1 Comment

ComeRun Over a year ago

Thanks, does your solution cover the alerts which pop up on click? say u click a link and a confirmation pop up shows up. I want to get the jquery dialog when click on these sorts of link

Arun P Johny · Accepted Answer · 2013-05-01 04:39:23Z

0

Your code looks fine, but make sure that you add jquery and jquery-ui libraries to your page.

Demo: Plunker

answered May 1, 2013 at 4:39

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Ende Neu · Accepted Answer · 2014-08-26 06:27:07Z

-1

If we are submitting page before alert is going automatically. some saved successfully messages there but not asking for "ok". I have done overriding of alert.any suggestion. window.alert = function(message, fallback){

$(document.createElement('div')).attr({title: 'Alert', 'class': 'alert'}).html(message).dialog({
  buttons: {OK: function(){$(this).dialog('close'); callback()}},
  autoOpen: true,
  close:function(){$(this).remove();},
  draggable: true,
  modal: false,
  resizable: false,
  height:'auto',
  width: 'auto'
});

edited Aug 26, 2014 at 6:27

Ende Neu

15.8k5 gold badges61 silver badges72 bronze badges

answered Aug 26, 2014 at 6:06

CodamRanjan

491 silver badge2 bronze badges

Collectives™ on Stack Overflow

overriding the javascript ALERT to jquery dialog

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related