How to pop up a confirm window when this link is clicked?

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Let's say if I want users to be sent to msn.com if they say Go. Where do I set this url? dis? var dis=msn.com?
Thank you.

Joe Jenkins

Replace href and you should be good. The href in the achor tag in the html itself not in the javascript. His code references the object's parent which is the anchor tag.

you don't have to play with the code, take a look to the HTML, you've two different links.

ASKER

So something like this?

"Go ?": function() {
location.href = "http://msn.com";
},

no, the HTML

ASKER

I tried it in HTMl page and it just go straight to the link's href which I set to Amazon.com here. No pop up dialog appear. Attached is html file that I created to test this jQuery code. Please advise what I need to change here. Thank you.
index.html

put back the original code...
you let it with : location.href = http://msn.com;

The code that's been posted relies on the jqueryUI library being loaded (which you're not doing) and also relies on your have an element in your HTML with an ID of dialog-confirm that contains the information you actually want displaying in your pop-up window, which again you don't have.

Include the jQueryUI library and the CSS, and put a DIV in your html with an ID of dialog-confirm and set it to hidden.

In the head of you page, add the UI library and CSS:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" type="text/css" media="screen" charset="utf-8"/>

Open in new window

In your HTML add this:

<div id="dialog-confirm" style="display:none">
   <p>This text will appear in your Dialog Box :)</p>
</div>

Open in new window

ASKER

I thought I did load the jQuery library here


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

What you said make sense so I went ahead and added what you suggested, including another line to ujp the older version of jQuery but now the html page shows up with nothing, just blank. Please see the new html file and advise what I need to change.
index.html

Open the following link in Chrome, Firefox or recent Opera :
view-source:fiddle.jshell.net/HWLAs/show/

You need to remove the useless line 14
The link is line 54 and 56

Don't change update anything else.

The jQuery Library is not the same as the jQueryUI library. You need both (plus the CSS to style the jQueryUI elements) if you want to use dialog (it's part of the jQueryUI library, not jQuery)

ASKER

Hi Leakim,
The original code didn't work either that the pop up dialog never shows up when I clicked on the link text. I'm attached 2 files, index2.htm has your original jQuery code.

Chris, I had to remove "style="display:none"" for the page to display the text.

Thank you both.
index.html
index2.html

1 not compatible jquery UI version
2 miss the jquery lib,

did you see my previous comment?

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Chris,
Thank you and oddly, I tried both in Chrome and FF but both the pop up dialog did not show up for me. I didn't modify any of your code. When I clicked on the link it just went straight to Amazon.

Post up exactly the code you've used. There's clearly something missing.

and why not using the code from : #a39929712
?

ASKER

I think problem is at my end. I don't see any warning message about pop up being blocked but I downloaded the sample code from https://api.jqueryui.com/dialog/ (end of page) and that won't display the pop up dialog either. I tried in both FF and Chrome. Let me check around my browser setting and see if I can find what's blocking this.

ASKER

I unchecked all pop up blocker settings in my browsers and it still goes directly to amazon with no pop up dialog. I'm at a lost here.

ASKER

I already configure all 3 types of browsers, IE, FF and Chrome to allow pop up but none is working for me.

ASKER

Chris your code does work. I uploaded your file to one of our QA web server and access it and it works fine. All other ones I tried and uploaded here before do not work as in no pop up dialog showed up.

Before, i only have the html on my c drive, file:///C:/Temp/index5.html then open it in a browser. The pop up dialog never worked this way. But the same file on a IIS server would work. I wonder why?