• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 530
  • Last Modified:

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

This link in one of the web page is generated.  How can I intercept so when it's clicked, a window will pop up with a Term text and with Accept/Decline button?  Once user click accept then it will proceed to the link below.  If users click Decline then it will close the pop up but will not proceed to the link.



<a class="ms-comm-metalineItemSeparator ms-blog-command-noLeftPadding ms-textSmall" href="https://Mysite.com/Myblog/Lists/Posts/Post.aspx?ID=12#comments">0 comments</a>
0
lapucca
Asked:
lapucca
  • 11
  • 7
  • 4
  • +1
2 Solutions
 
leakim971PluritechnicianCommented:
Test page : http://jsfiddle.net/HWLAs/

jQuery(function($) {
    // $("a.ms-comm-metalineItemSeparator.ms-blog-command-noLeftPadding.ms-textSmall").click(function() {
    $("a").click(function(event) {
        event.preventDefault();
        var dis = this;
            $( "#dialog-confirm" ).dialog({
                  resizable: false,
                  height:140,
                  modal: true,
                  buttons: {
                    "Go ?": function() {
                      location.href = $(dis).attr("href");
                    },
                   "Forget it!": function() {
                      $( this ).dialog( "close" );
                    }
                  }
            });

    });
});

Open in new window

0
 
lapuccaAuthor Commented:
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.
0
 
Joe JenkinsCommented:
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.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
leakim971PluritechnicianCommented:
you don't have to play with the code, take a look to the HTML, you've two different links.
0
 
lapuccaAuthor Commented:
So something like this?  


"Go ?": function() {
                      location.href = "http://msn.com";
                    },
0
 
leakim971PluritechnicianCommented:
no, the HTML
0
 
lapuccaAuthor Commented:
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
0
 
leakim971PluritechnicianCommented:
put back the original code...
you let it with : location.href = http://msn.com;
0
 
Chris StanyonCommented:
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

0
 
lapuccaAuthor Commented:
I thought I did load the jQuery library here
 
<!-- include jQuery library -->
<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
0
 
leakim971PluritechnicianCommented:
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.
0
 
Chris StanyonCommented:
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)
0
 
lapuccaAuthor Commented:
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
0
 
leakim971PluritechnicianCommented:
1 not compatible jquery UI version
2 miss the jquery lib,

did you see my previous comment?
0
 
Chris StanyonCommented:
The reason you're seeing nothing is because you've put the link inside the dialog content and then set it to hidden, so there's nothing to display. Have a look at this quick example to see the moving parts.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Chris Stanyon</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<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"/>
	<script type="text/javascript">
	$(document).ready(function() {
		$('a').click(function(e) {
			e.preventDefault();
			var link = this;
			$('#dialog-confirm').dialog({
				modal: true,
				buttons: {
					'Accept': function() { location.href = $(link).attr('href'); },
					'Decline': function() { $(this).dialog('close'); }
				}
			});
		});
	});
	</script>
</head>
<body>

	<p><a href="http://amazon.com">Amazone</a></p>
	
	<div id="dialog-confirm" style="display:none">
		<p>This text will appear in your Dialog Box</p>
	</div>

</body>
</html>

Open in new window

0
 
lapuccaAuthor Commented:
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.
0
 
Chris StanyonCommented:
Post up exactly the code you've used. There's clearly something missing.
0
 
leakim971PluritechnicianCommented:
and why not using the code from : #a39929712
?
0
 
lapuccaAuthor Commented:
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.
0
 
lapuccaAuthor Commented:
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.
0
 
lapuccaAuthor Commented:
I already configure all 3 types of browsers, IE, FF and Chrome to allow pop up but none is working for me.
0
 
lapuccaAuthor Commented:
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?
0
 
lapuccaAuthor Commented:
Thank you both for all your help and patience.
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 11
  • 7
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now