Link to home
Create AccountLog in
Avatar of Hemanth Kumar
Hemanth KumarFlag for India

asked on

Running javascrpt function Once for a list in html page

Dear Team,

Need little help in html and javascript.

Plz refer to the attached file.

Its a vertical menu, on click of each link it shows non disclosure agreement. On accept it opens the specific internal pages.
Each link calls respective function and number of functions are same as number of links.

My Requirements:  ---

1. Can it be achieved by writing just one javascript function to redirect it to respective links instead of multiple times.

2. In script can it be handled in such a way that the popup will show just once for first access per link per session. If the user click on the same link again, popup should not load.
Please note I would not be able to use server site cookies. Need to manage it from client computer only.

Also Plz note this menu list is mapped in one of the sharepoint side in a such a way that, it load it again everytime each link is clicked.

Plz let me know If you need more info.
Verttab---Copy.html
Avatar of robertark
robertark

Can you use jQuery? If so, I'd suggest something like:

$("#mymenu li a").on("click", function(e) {
  return prompt('Do you agree to terms and conditions?');
});

Open in new window


On click, this will cause a prompt to pop up. If you click OK, it will continue. If you click cancel, it will do nothing.
Avatar of Hemanth Kumar

ASKER

Have not tested jquery though, but we can try, plz suggest.

We need to make sure each link have different url paths. and I want popup to come once per link per session.
Avatar of Gary
In your onclick event add the link for the page to be opened.
One function to rule them all

agreement=0
function popitup(url) {
if(agreement==0){
agreement=1
      newwindow2=window.open('','name','height=200,width=600');
      var tmp = newwindow2.document;
      tmp.write('<html><head><title>Non - Disclosure Agreement</title>');
      tmp.write('<link rel="stylesheet" href="js.css">');
      tmp.write('<script language="javascript" type="text/javascript">');      
      tmp.write('function toNewPage() {');            
      tmp.write('window.open(url)');      
      tmp.write('}');      
      
      tmp.write('</script>');
      
      tmp.write('<style type="text/css">.style1{text-align: center;text-decoration: underline}.style2{color: #000099;}</style>');
      tmp.write('<div class="style1"><span class="style3"><b><span class="style2">Non - Disclosure Agreement<br /></div>');
      tmp.write('<p><b>&nbsp;&nbsp;&nbsp;&nbspThis is a pop up screen</b></p>');
      tmp.write('<input  type="button"  onclick="toNewPage();self.close()"  value="Accept" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
      tmp.write('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<input  type="button"  onclick="self.close();"  value="Decline" />');      
      tmp.write('</body></html>');
      tmp.close();


}else
{
// add code to open window directly
// using url as the link
}
}

Edit
You should just use the function popitup for every onclick
Hello Gary,

Sorry I didnt get, Where do I add the url for each link ? Currently the script is written 10 times to handle 10 links.
An example link (html should be lower case) and your style tag was wrong.

<a href="" onclick="return popitup('http://www.internal.net/Smp/Ams/default.aspx')" style="color:white">AMS</a>

Then take this function

agreement=0
function popitup(url) {
if(agreement==0){
      newwindow2=window.open('','name','height=200,width=600');
      var tmp = newwindow2.document;
      tmp.write('<html><head><title>Non - Disclosure Agreement</title>');
      tmp.write('<link rel="stylesheet" href="js.css">');
      tmp.write('<script language="javascript" type="text/javascript">');      
      tmp.write('function toNewPage() {');            
      tmp.write('window.open(url)');      
      tmp.write('}');      
     
      tmp.write('</script>');
     
      tmp.write('<style type="text/css">.style1{text-align: center;text-decoration: underline}.style2{color: #000099;}</style>');
      tmp.write('<div class="style1"><span class="style3"><b><span class="style2">Non - Disclosure Agreement<br /></div>');
      tmp.write('<p><b>&nbsp;&nbsp;&nbsp;&nbspThis is a pop up screen</b></p>');
      tmp.write('<input  type="button"  onclick="toNewPage();self.close()"  value="Accept" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
      tmp.write('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<input  type="button"  onclick="self.close();"  value="Decline" />');      
      tmp.write('</body></html>');
      tmp.close();

}else
{
window.open(url)  
}
}


Then for reference we need to set a cookie in the popup and add code to check the cookie in the function above but first just get the links working correctly.
http://www.w3schools.com/js/js_cookies.asp

Though it would be easier to just have the disclosure popup pre filled with the code you have in the function and just pass it the url
Whats to stop me going to the link directly?
Any way to stop the menu reloading?
It doesnt do anything. I am testing by taking one link, as attached.

the popup should show me once when I open the page and click. on the same session if I click again it should not show.
If i close and reopen the page then it should show again

As of now menu loads everytime we click on any link.
Verttab---Copy.html
The script should be as below, js cookies are the only way to maintain a flag if the non-disclosure has been agreed to, referenced in the link above. The idea is to get the links working in one function first then add in the code for the cookie.

<script language="javascript" type="text/javascript">
<!--
agreement=0
function popitup1(url) {
if(agreement==0){
      newwindow2=window.open('','name','height=200,width=600');
      var tmp = newwindow2.document;
      tmp.write('<html><head><title>Non - Disclosure Agreement</title>');
      tmp.write('<link rel="stylesheet" href="js.css">');
      tmp.write('<script language="javascript" type="text/javascript">');      
      tmp.write('function toNewPage() {');            
      tmp.write('window.open(url)');      
      tmp.write('}');      
      
      tmp.write('</script>');
      
      tmp.write('<style type="text/css">.style1{text-align: center;text-decoration: underline}.style2{color: #000099;}</style>');
      tmp.write('<div class="style1"><span class="style3"><b><span class="style2">Non - Disclosure Agreement<br /></div>');
      tmp.write('<p><b>&nbsp;&nbsp;&nbsp;&nbspThis is a pop up screen</b></p>');
      tmp.write('<input  type="button"  onclick="toNewPage();self.close()"  value="Accept" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
      tmp.write('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<input  type="button"  onclick="self.close();"  value="Decline" />');      
      tmp.write('</body></html>');
      tmp.close();

}else
{
window.open(url)   
}
}
// -->
</script>

Open in new window

Yes, Trying to achieve the first one to use one function. Plz can you check in the below code for the mistake Im doing

<html>
<head>
<script language="javascript" type="text/javascript">
<!--
agreement=0
function popitup(url) {
if(agreement==0){
      newwindow2=window.open('','name','height=200,width=600');
      var tmp = newwindow2.document;
      tmp.write('<html><head><title>Non - Disclosure Agreement</title>');
      tmp.write('<link rel="stylesheet" href="js.css">');
      tmp.write('<script language="javascript" type="text/javascript">');      
      tmp.write('function toNewPage() {');            
      tmp.write('window.open(url)');      
      tmp.write('}');      
      
      tmp.write('</script>');
      
      tmp.write('<style type="text/css">.style1{text-align: center;text-decoration: underline}.style2{color: #000099;}</style>');
      tmp.write('<div class="style1"><span class="style3"><b><span class="style2">Non - Disclosure Agreement<br /></div>');
      tmp.write('<p><b>&nbsp;&nbsp;&nbsp;&nbspThis is a pop up screen</b></p>');
      tmp.write('<input  type="button"  onclick="toNewPage();self.close()"  value="Accept" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
      tmp.write('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<input  type="button"  onclick="self.close();"  value="Decline" />');      
      tmp.write('</body></html>');
      tmp.close();

}else
{
window.open(url)   
}
}
// -->

</script>

<style type="text/css">

.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 250px;
}


.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 8px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0; /*light dark dark light*/
background-color: #704968;
text-decoration:none;
allign: Center
}


.buttonmenu li a:visited{
color: white;
}

.buttonmenu li a:hover, .buttonmenu li a:active{
color: black;
background-color: #CDB4C8;
}

</style>

</head>
<body>
<ul class="buttonmenu">
<li><a href="" onclick="return popitup('http://www.google.com')" style="color:white">AMS</a>  	
</ul>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Yes, that seems working.

Working on the 2nd Question.

This menu is mapped to all the different pages mentioned in the html code.
By clicking on any link the page loads and the menu also loads again along with that.


Hence for each load all the links should work once

This is a sharepoint server, hence any server site program like deploying cookie functionality,
hence looking for a
Sorry , popup should come once per session per link. No matter how many times it loads.

If the window is completely closed, it should refresh to start again
With the menu refreshing each time and not being able to set a cookie then there is no way to track if the disclosure has been agreed to
Or add a flag to the menu page being reloaded

Why does the menu page have to reload? I'm confused by this.
Hello Gary,

The menu is a customized one created in html. In sharepoint we can create a site where we can add the webparts, but those are in default format. If we want to create our own format, we can create in html/aspx and upload it in one of the share point folder.

Then the folder link can be given to load your customized code.
Since we have 10 web pages here and in all pages we need the menu, We have given the link in all the pages, that means when a page loads, menu load again from the same link.


Plz can you help me with cookies ? Want to give a try.

The w3school link you have given above, I have closed the window and reloaded but cookie is still there
Can we create a permanent popup html page to achieve this, by sending the cookie to each page accessed by the user ?
But the menu is only reloading because you are not preventing the default behaviour of the link - I cannot see a reason to just prevent the menu links from reloading the page if you see what I mean.
Just add an # in the href like so
href="#"
Or use return false in your function
Please can you elaborate on the above idea ?

Can we create a function to check the cookie before triggering "popitup" function ?
Firstly do you need the menu page to reload?
For example:- I have Page1, Page2, Page3, Each has different contents

Requirement is Being in any one of the page , I should be able to click on any other page and come back. Hence instead of creating different menu's, we have created one menu and gave the path link in each pages to load.

Now to stop the menu link to load everytime, I need to create separate menu's for each pages.

Do we have any ways to stop this ?
Can we do something like this ?

Understanding its difficult to do it per session, we can save the cookie for 24 Hours.

Each time we click on link it wil lcheck if the cookie present for the link first,
If cookie is not present 'popitup' script will run to show the disclosure message.
On clicking accept, it should store the cookie for the target page for 24 hours.
Try this script

<script language="javascript" type="text/javascript">
<!--

function popitup(url) {

if (document.cookie.indexOf("disclosure")<0) {
      document.cookie = "disclosure=1; expires=0;";
      var isMSIE = /*@cc_on!@*/0;

      if (isMSIE) {
            document.cookie = "disclosure=1;";
      }
      newwindow2=window.open('','name','height=200,width=600');
      var tmp = newwindow2.document;
      tmp.write('<html><head><title>Non - Disclosure Agreement</title>');
      tmp.write('<link rel="stylesheet" href="js.css">');
      tmp.write('<script language="javascript" type="text/javascript">');      
      tmp.write('function toNewPage() {');            
      tmp.write('window.open("'+url+'")');      
      tmp.write('}');      
      
      tmp.write('</script>');
      
      tmp.write('<style type="text/css">.style1{text-align: center;text-decoration: underline}.style2{color: #000099;}</style>');
      tmp.write('<div class="style1"><span class="style3"><b><span class="style2">Non - Disclosure Agreement<br /></div>');
      tmp.write('<p><b>&nbsp;&nbsp;&nbsp;&nbspThis is a pop up screen</b></p>');
      tmp.write('<input  type="button"  onclick="toNewPage();self.close()"  value="Accept" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
      tmp.write('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<input  type="button"  onclick="self.close();"  value="Decline" />');      
      tmp.write('</body></html>');
      tmp.close();
      
}
else
{
window.open(url)  
}

}
// -->
 
</script>
Try the code above seems to work for me
Below is the code I m trying, but the popup comes for me everytime i click on it.

<html>
<head>
<script language="javascript" type="text/javascript">
<!--

function popitup(url) {

if (document.cookie.indexOf("disclosure")<0) {
      document.cookie = "disclosure=1; expires=0;";
      var isMSIE = /*@cc_on!@*/0;

      if (isMSIE) {
            document.cookie = "disclosure=1;";
      }
      newwindow2=window.open('','name','height=200,width=600');
      var tmp = newwindow2.document;
      tmp.write('<html><head><title>Non - Disclosure Agreement</title>');
      tmp.write('<link rel="stylesheet" href="js.css">');
      tmp.write('<script language="javascript" type="text/javascript">');      
      tmp.write('function toNewPage() {');            
      tmp.write('window.open("'+url+'")');      
      tmp.write('}');      
      
      tmp.write('</script>');
      
      tmp.write('<style type="text/css">.style1{text-align: center;text-decoration: underline}.style2{color: #000099;}</style>');
      tmp.write('<div class="style1"><span class="style3"><b><span class="style2">Non - Disclosure Agreement<br /></div>');
      tmp.write('<p><b>&nbsp;&nbsp;&nbsp;&nbspThis is a pop up screen</b></p>');
      tmp.write('<input  type="button"  onclick="toNewPage();self.close()"  value="Accept" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
      tmp.write('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<input  type="button"  onclick="self.close();"  value="Decline" />');      
      tmp.write('</body></html>');
      tmp.close();
      
}
else
{
window.open(url)   
}

}
// -->

</script>

<style type="text/css">

.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 250px;
}


.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 8px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0; /*light dark dark light*/
background-color: #704968;
text-decoration:none;
allign: Center
}


.buttonmenu li a:visited{
color: white;
}

.buttonmenu li a:hover, .buttonmenu li a:active{
color: black;
background-color: #CDB4C8;
}

</style>

</head>
<body>
<ul class="buttonmenu">
<li><a href="" onclick="return popitup('http://www.google.com')" style="color:white">AMS</a>  	
</ul>
</body>
</html>

Open in new window

Check you're not using a cached page, what browser are you testing in?
I tried using IE 9, Firefox, Google chrome

IE 9- Activex control unable to load the page, Allowed blocked contents and clicked on decline in first attempt. 2nd Attempt it goes to google even clicked on decline. Also it opens the folder where html file is saved all the time in explorer.

Firefox - clicked on decline on first attempt. It goes directly to page even after reopening it.

Chrome - It shows me popup , doesnot work
I think the 'if' for agreement = 0 we did for 1st problem needs to be handled
No, the cookie code needs to go in the popup not the main page (stupid me) after
tmp.write('function toNewPage() {');


tmp.write('document.cookie = "disclosure=1; expires=0;";');
tmp.write('var isMSIE = /*@cc_on!@*/0;');
tmp.write('if (isMSIE) {');
tmp.write('document.cookie = "disclosure=1";}');

...and remove those lines from the main function.
Amend the link like so
<li><a href="#" onclick="popitup('http://www.google.com')" style="color:white">AMS</a>
Plz can u copy the entire code ?

On popup screen itself i am getting those texts like this

document.cookie = "disclosure=1; expires=0;";var isMSIE = /*@cc_on!@*/0;if (isMSIE) {document.cookie = "disclosure=1";}
In IE9 it is still opening windows explorer automatically while popup.
Change the link so the href="#"

<script language="javascript" type="text/javascript">
<!--
function popitup(url) {

if (document.cookie.indexOf("disclosure")<0) {

	newwindow2=window.open('','name','height=200,width=600');
	var tmp = newwindow2.document;
	tmp.write('<html><head><title>Non - Disclosure Agreement</title>');
	tmp.write('<link rel="stylesheet" href="js.css">');
	tmp.write('<script language="javascript" type="text/javascript">');	
	tmp.write('function toNewPage() {');	
tmp.write('document.cookie = "disclosure=1; expires=0;";');
tmp.write('var isMSIE = /*@cc_on!@*/0;');
tmp.write('if (isMSIE) {');
tmp.write('document.cookie = "disclosure=1";}');	
	tmp.write('window.open("'+url+'")');	
	tmp.write('}');	
	
	tmp.write('</script>');
	
	tmp.write('<style type="text/css">.style1{text-align: center;text-decoration: underline}.style2{color: #000099;}</style>');
	tmp.write('<div class="style1"><span class="style3"><b><span class="style2">Non - Disclosure Agreement<br /></div>');
	tmp.write('<p><b>&nbsp;&nbsp;&nbsp;&nbspThis is a pop up screen</b></p>');
	tmp.write('<input  type="button"  onclick="toNewPage();self.close()"  value="Accept" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
	tmp.write('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<input  type="button"  onclick="self.close();"  value="Decline" />');	
	tmp.write('</body></html>');
	tmp.close();
	
}
else
{
window.open(url)   
}
return false;
}
// -->
 </script>

Open in new window

It does not work for me.

Firefox is not showing popup at all.

But IE and Chrome shows it even after clicking on Accept.

Decline works

<html>
<head>
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {

if (document.cookie.indexOf("disclosure")<0) {

	newwindow2=window.open('','name','height=200,width=600');
	var tmp = newwindow2.document;
	tmp.write('<html><head><title>Non - Disclosure Agreement</title>');
	tmp.write('<link rel="stylesheet" href="js.css">');
	tmp.write('<script language="javascript" type="text/javascript">');	
	tmp.write('function toNewPage() {');	
tmp.write('document.cookie = "disclosure=1; expires=0;";');
tmp.write('var isMSIE = /*@cc_on!@*/0;');
tmp.write('if (isMSIE) {');
tmp.write('document.cookie = "disclosure=1";}');	
	tmp.write('window.open("'+url+'")');	
	tmp.write('}');	
	
	tmp.write('</script>');
	
	tmp.write('<style type="text/css">.style1{text-align: center;text-decoration: underline}.style2{color: #000099;}</style>');
	tmp.write('<div class="style1"><span class="style3"><b><span class="style2">Non - Disclosure Agreement<br /></div>');
	tmp.write('<p><b>&nbsp;&nbsp;&nbsp;&nbspThis is a pop up screen</b></p>');
	tmp.write('<input  type="button"  onclick="toNewPage();self.close()"  value="Accept" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp');
	tmp.write('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<input  type="button"  onclick="self.close();"  value="Decline" />');	
	tmp.write('</body></html>');
	tmp.close();
	
}
else
{
window.open(url)   
}
return false;
}
// -->
 </script>

<style type="text/css">

.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 250px;
}


.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 8px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0; /*light dark dark light*/
background-color: #704968;
text-decoration:none;
allign: Center
}


.buttonmenu li a:visited{
color: white;
}

.buttonmenu li a:hover, .buttonmenu li a:active{
color: black;
background-color: #CDB4C8;
}

</style>

</head>
<body>
<ul class="buttonmenu">
<li><a href="#" onclick="return popitup('http://www.google.com')" style="color:white">AMS</a>  	
</ul>
</body>
</html>

Open in new window

I've tried it in FF, IE9 and Chrome and it works perfectly.
The only thing with the cookie is you have to close the browser to remove it or that maybe just a localhost thing...
You don't have a live link do you, the only thing I can think of is you are accessing an old cached page.
Look at http://apartmentstorent.eu/p.html
and see if it works for you.
I checked in the live link , Seems working.

But just one problem,

When I click on any one link it opens up all the other links also for that session. I was looking for one popup per link per session.

For example : I clicked on yes it shows for the first time, then it doesnot,
But CNS I have not clicked yet,
OK
For the cookie value setting use the url
So
if (document.cookie.indexOf("disclosure")<0) {
becomes
if (document.cookie.indexOf(url)<0) {

And
tmp.write('document.cookie = "disclosure=1";}');
becomes
tmp.write('document.cookie ="'+ url+'=1";}')

I think that should work
For example :-

I have menu like

ANS
CNS
DC
I clicked on ANS first time it showed me the popup. 2nd time onwards it doesnot show.

Now I click on CNS or DC it should show me the popup again, since I have not clicked on that link.
But it does not show up. It just shows up once for entire page..
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Wow, Exactly What I was looking for.
So everything is working as it should now?
Truly Genius Gary. I have tested by taking sample and its working upto expectation.

Request you to allow me to post any issue related to this here in future, even it is closed now.
No problem
Hello Gary,

Can we get this page load on the same page after clicking on "Accept" ?

I tried Changing this to  - tmp.write('window.open("'+url+'","_self")');
But it does not work. Accept doesnot respond to new page atall.

Kindly advise.
You need to use
window.opener.parent.location.href
instead of window.open

So

tmp.write('window.opener.parent.location.href="'+url+'"');
Thanks,

What about else part, can we put like this window.opener.parent.location.href= url
window.location.href = url;

This seems working fine.
All the pages are loading on the same page. Only problem is the popup shows twice for a link now.

is there any way we can handle this ? Kindly advise.