Cookie question

Discussion in 'JavaScript' started by relmz525, Jan 28, 2010.

  1. #1
    Hi,

    i have a page with two links on it called link1 and link2, when link1 is clicked it creates a cookie called link with the value link1, when link2 is clicked it creates a cookie called link with the value link2. Also when the links are clicked they produce an overlay like light box with the cookie contents echod inside it.

    That all works fine apart from if i click link1 and then close the overlay and click link2 the overlay still displays "link1" instead of displaying "link2" even tho the cookie has updated correctly. See it live HERE and heres the source code im using:

    link.php:

    
    <html>
    <head>
    
    <style>
    		.black_overlay{
    			display: none;
    			position: absolute;
    			top: 0%;
    			left: 0%;
    			width: 100%;
    			height: 100%;
    			background-color: black;
    			z-index:1001;
    			-moz-opacity: 0.8;
    			opacity:.80;
    			filter: alpha(opacity=80);
    		}
    		.white_content {
    			display: none;
    			position: absolute;
    			top: 25%;
    			left: 25%;
    			width: 50%;
    			height: 50%;
    			padding: 16px;
    			border: 16px solid orange;
    			background-color: white;
    			z-index:1002;
    			overflow: auto;
    		}
    	</style>
    
    <script language="JavaScript">
    
    
    function lightbox()
    		{
    		document.getElementById('light').style.display='none';
    		document.getElementById('fade').style.display='none';
    		<?  $link = $_COOKIE["link"]; ?>
    		}
    		
    function setCookie(c_name,value,expiredays)
    {
    	var exdate=new Date();
    	exdate.setDate(exdate.getDate()+expiredays);
    	document.cookie=c_name+ "=" +escape(value)+
    	((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
    
    	document.getElementById('light').style.display='block';
    	document.getElementById('fade').style.display='block';
    }
    
    </script> 
    </head>
    <body>
    <p><a href = "javascript:void(0)" onclick = setCookie('link','link1',365)>Link 1</a></p>
    <p><a href = "javascript:void(0)" onclick = setCookie('link','link2',365)>Link 2</a></p>
    
    <div id="divCustomerInfo"><?PHP echo $link;?></div>
    <div id="light" class="white_content"><? include('include_me.php'); ?> <a href = "javascript:void(0)" onclick = lightbox()></a></div>
    		<div id="fade" class="black_overlay"></div>
    		
    </body>
    </html>
    
    Code (markup):
    And

    include_me.php

    
    <?PHP
    
    
    $link = $_COOKIE["link"];
    echo $link
    
    ?>
    <html>
    <head>
    
    
    </head>
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
    </body>
    </html>
    
    Code (markup):
     
    relmz525, Jan 28, 2010 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    You have to do it by javascript, not by php. Try it

    link.php

    
    <html>
    <head>
    
    <style>
    		.black_overlay{
    			display: none;
    			position: absolute;
    			top: 0%;
    			left: 0%;
    			width: 100%;
    			height: 100%;
    			background-color: black;
    			z-index:1001;
    			-moz-opacity: 0.8;
    			opacity:.80;
    			filter: alpha(opacity=80);
    		}
    		.white_content {
    			display: none;
    			position: absolute;
    			top: 25%;
    			left: 25%;
    			width: 50%;
    			height: 50%;
    			padding: 16px;
    			border: 16px solid orange;
    			background-color: white;
    			z-index:1002;
    			overflow: auto;
    		}
    	</style>
    
    <script language="JavaScript">
    
    
    function lightbox()
    		{
    		document.getElementById('light').style.display='none';
    		document.getElementById('fade').style.display='none';
    		}
    
    function setCookie(c_name,value,expiredays)
    {
    	var exdate=new Date();
    	exdate.setDate(exdate.getDate()+expiredays);
    	document.cookie=c_name+ "=" +escape(value)+
    	((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
    
        document.getElementById('link_cookie').innerHTML = getCookie('link');
    
    	document.getElementById('light').style.display='block';
    	document.getElementById('fade').style.display='block';
    }
    
    function getCookie(name){
        if(document.cookie.length>0){
          start = document.cookie.indexOf(name+"=");
          if(start!=-1){
            start = start+name.length+1;
            end = document.cookie.indexOf(";",start);
            if(end==-1){
                end = document.cookie.length;
            }
    
            return unescape(document.cookie.substring(start,end));
            }
          }
        return "";
    }
    
    </script>
    </head>
    <body>
    <p><a href = "javascript:void(0)" onclick = setCookie('link','link1',365)>Link 1</a></p>
    <p><a href = "javascript:void(0)" onclick = setCookie('link','link2',365)>Link 2</a></p>
    
    <div id="divCustomerInfo"><script>document.write(getCookie("link"))</script></div>
    <div id="light" class="white_content"><? include('include_me.php'); ?> <a href = "javascript:void(0)" onclick = lightbox()></a></div>
    		<div id="fade" class="black_overlay"></div>
    
    </body>
    </html>
    
    Code (markup):
    And

    include_me.php

    
    <html>
    <head>
    
    
    </head>
    <body>
    <div id="link_cookie"></div>
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
    </body>
    </html>
    
    Code (markup):
     
    s_ruben, Jan 29, 2010 IP