How to replace javascript alert (which pops up where the event called it) with a jquery dialog box?

Question

Fellows, I'm going to break it down a little clearer. When I look at that JQuery UI stuff, I get absolutely confused as to what I need to download and where to put the files.

What I DID just do successfully was to link to the JQuery website so that I didn't have to download anything and saw that the dialog box works.

However, the dialog box, from the example shown me, is linked to a div. That div is not going to help me if it's at the top of the screen and the input box is at the bottom. I have only one function in the header that is called from a number of textboxes. This function includes a javascript alert() with a message.

PLEASE, tell me the EXACT code I need to type in the function (We'll call it MyFunction() ) that will pop up a message wherever the MyFunction is being envoked..

If it was javascript, in the head section in a script we'd have:

<script type="text/javascript"> function digitsOnly(){ alert("Digits only, please"); } </script>

and in a number of textboxes, we'd have:

<input type="test/javascript" onkeydown="digitsOnly()" />

I need a beautiful pop-up box to replace the javascript alert(); I don't need this do do anything other than pop up a message next to the calling textbox. If it's draggable and resizable, that would be the coolest thing. But for now, I'll be happy with what I mentioned..

I study languages all the time. I know I'll eventually learn JQuery too. But I need this done tonight if possible.

James

The problem is a little unclear. Can you share some code which demonstrates the issue? — David
– David, Commented Oct 9, 2011 at 10:06
sure. Quite simply, i have something like this: <input type="text" onclick="myFunction()" /> Now the script: <script type="text/javascript"> function myFunction(){ alert("Yo, G Dog"); </script> I'm doing a couple of things with the function. But that doesn't matter. My alert box actually tells the client to only type digits and it's linked to an onkeydown. But what I'm asking for is to replace that alert() with something beautiful looking. I need it to be called onkeydown. And I'll need it to pop up, of course, where the textbox is located...just as a javascript alert box would.. — iDevJunkie
– iDevJunkie, Commented Oct 9, 2011 at 10:07
ive just messed with jQuery's dialog(). It's the way forward :) — Christian
– Christian, Commented Oct 9, 2011 at 10:29
@JamesKhouriDevJunkie: JavaScript alert() boxes don't conveniently pop up "where they are called"... perhaps it just seems that way to you in your current project? Generally, they pop up in the centre of the screen. Anyway, it looks like you're after validation specifically, so you might want to check out jquery.bassistance.de/validate/demo. — Andy E
– Andy E, Commented Oct 9, 2011 at 10:32
Everytime I call a javascript alert() inside a function contained inside a script in the head and then call it with some sort of an event tied to a control, when invoked it pops up in sight of where it is called. That's all I need this new alert to do.. — iDevJunkie
– iDevJunkie, Commented Oct 9, 2011 at 11:11

nobody · Accepted Answer · 2011-10-09 10:10:14Z

10

window.alert = function(message) { // put your dialog box launching code here. }

answered Oct 9, 2011 at 10:10

nobody

10.7k4 gold badges29 silver badges43 bronze badges

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

Comments

Andy E · Accepted Answer · 2011-10-09 10:09:00Z

Take a look at jQuery UI's dialog. This won't replace the default alert() either, so you should go through your code and replace calls to alert(...) with dialog instances.

Awesome. I didn't know about the dialog :) Just re-writing my modals :) Cheers~

bricker · Accepted Answer · 2011-10-09 10:08:14Z

Javascript's alert() function runs before anything else, so it's hard (if not impossible) to actually replace its default behavior. However, you can easily make your own function. Instead of:

$('.clickable').click(function() { alert("Clicked."); });

Do this:

$('.clickable').click(function() { $('.dialog').dialog({ // options... }); });

You will have to go through your code and replace each alert with this, however, that shouldn't be too big of a deal, especially if you're using something like Textmate, which has a "Search Project" feature.

JavaScript's alert() doesn't run before anything else. It does block code from executing until it's closed, though.

Community · Accepted Answer · 2011-10-13 20:47:37Z

Timothy's answer was workable. See my comment afterward for the necessary addition. I copied and pasted from Timothy Khouri's answer with my comment attached:

"I'll need it to pop up, of course, where the textbox is located...just as a javascript alert box would."

I think you mean that if you were to scroll down partway through the page, and then call alert, that it would be centered to your current View Port (the stuff you see on the screen)... and that you want this new prettied up dialog box to do the same.

The answer is - "Yes"... Yes, jQuery will center the dialog box right there at your current view port just like an alert box would be.

You need to download and reference the main jQuery library AND ALSO the latest jQueryUI library AND ALSO one jQuery CSS theme.

Then it should be as easy as:
$("<p>Yo, G Dog<p>").dialog({ modal: true }); 

So Timothy's code worked almost perfectly. I had to do some messing around till I found the reason why it was causing two dialogs to open. No answers from Google searching. Just experimentation helped me to see that each HTML tag inserted into the dialog opened its own dialog, for some reason. The way to fix this was to contain all HTML tags within a div. Now not even the blank dialog occurs.

If you don't know what I'm talking about, use your own code and see what occurs. THEN, put more HTML tags within the parentheses. Example:

("<h3>Attention></h3><p>Yo, G Dog</p>").dialog({ modal: true });

Finally, place the h3 and p within a div and see the cool results:

("<div><h3>Attention></h3><p>Yo, G Dog</p></div>").dialog({ modal: true });

This latter piece of code will only display one dialog. :) Thanks for answering!

James

1) Don't completely quote someone's answer. It's OK to quote part of it to help other readers focus in on what helped you, but quoting the whole thing is confusing (everyone can just scroll to it). 2) The reason why your first code sample above caused jQuery to fire off 2 dialogs... is because you had 2 root elements. jQuery runs the commands you specify on ALL matching elements... so $(".blah").hide(); will hide ALL elements with the 'blah' class. and therefore $("<p>1</p><p>2</p>").dialog(); will show 2 dialogs because there are 2 elements being created and matched.

oviniciusfeitosa · Accepted Answer · 2016-03-09 21:26:34Z

Try this:

$.extend({ alert: function (message, title) { $("<div></div>").dialog( { buttons: { "Ok": function () { $(this).dialog("close"); } }, close: function (event, ui) { $(this).remove(); }, resizable: false, title: title, modal: true }).text(message); } });

More information here;

Try to avoid Your answer is in another castle: When is an answer not an answer

Vinzenz · Accepted Answer · 2011-10-09 10:15:00Z

0

alert = function(a){ my_alert(a); }

answered Oct 9, 2011 at 10:15

Vinzenz

2,83918 silver badges24 bronze badges

Comments

Timothy Khouri · Accepted Answer · 2011-10-10 01:16:48Z

It took me reading the question about 100 times to understand what you meant by

"I'll need it to pop up, of course, where the textbox is located...just as a javascript alert box would."

I think you mean that if you were to scroll down partway through the page, and then call alert, that it would be centered to your current View Port (the stuff you see on the screen)... and that you want this new prettied up dialog box to do the same.

The answer is - "Yes"... Yes, jQuery will center the dialog box right there at your current view port just like an alert box would be.

You need to download and reference the main jQuery library AND ALSO the latest jQueryUI library AND ALSO one jQuery CSS theme.

Then it should be as easy as:

$("<p>Yo, G Dog<p>").dialog({ modal: true });

I'll give it a shot. Thanks Timmy...My brother...from the same mother..Sorry :P
Tim, yours was the only code that worked. But for some reason, I'm getting two dialogs, one over the other, and it's the second one (hidden behind the first) that contains the 'Yo, G Dog' message. I can only see it when I close the top dialog. Any suggestions?

Collectives™ on Stack Overflow

How to replace javascript alert (which pops up where the event called it) with a jquery dialog box?

7 Answers 7

Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

2 Comments

Linked

Related