Solved

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

Posted on 2014-03-13
23
483 Views
Last Modified: 2014-03-14
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
Comment
Question by:lapucca
  • 11
  • 7
  • 4
  • +1
23 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 100 total points
ID: 39927933
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
 

Author Comment

by:lapucca
ID: 39927972
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
 
LVL 5

Expert Comment

by:Joe Jenkins
ID: 39927977
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39927991
you don't have to play with the code, take a look to the HTML, you've two different links.
0
 

Author Comment

by:lapucca
ID: 39928080
So something like this?  


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

Expert Comment

by:leakim971
ID: 39928091
no, the HTML
0
 

Author Comment

by:lapucca
ID: 39928105
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39928108
put back the original code...
you let it with : location.href = http://msn.com;
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39929566
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
 

Author Comment

by:lapucca
ID: 39929691
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39929712
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39929720
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
 

Author Comment

by:lapucca
ID: 39929727
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39929737
1 not compatible jquery UI version
2 miss the jquery lib,

did you see my previous comment?
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 400 total points
ID: 39929782
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
 

Author Comment

by:lapucca
ID: 39929941
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
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39929961
Post up exactly the code you've used. There's clearly something missing.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39930016
and why not using the code from : #a39929712
?
0
 

Author Comment

by:lapucca
ID: 39930084
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
 

Author Comment

by:lapucca
ID: 39930158
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
 

Author Comment

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

Author Comment

by:lapucca
ID: 39930597
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
 

Author Closing Comment

by:lapucca
ID: 39930600
Thank you both for all your help and patience.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now