I am creating an application in which a folder gets created by the username, and inside that folder, another folder gets created dynamically called Profile_Pics.
I have used Ajax Script also.
Its just a bit of Facebook album type application. Now the problem is that, for this thing I am using session, and user can created other folders also say like “My_Pics” inside his folder. The folder is for storing photos.
The path of the created album inside username folder is like this
Candidate_Pics/sex/Username/album_name
Example:
If a male of username saz26 registers first, then the folder Profile_pics will be created by default.
Candidate_Pics/Male/saz26/Profile_pics
If he creates another album say My_Pics then:
Candidate_Pics/Male/saz26/My_pics
Where under My_Pics he can store other pics.
Now I have created this page, and I need to work with session. And also I use session variable.
Here’s my photos.php file:
<?php
session_start();
ob_start();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="CSS/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css" />
<script type="text/javascript" src="AJAX/AjaxCreateAlbum.js"></script>
<script>
function showalbum()
{
document.getElementById('AlbumDiv').style.display = "block";
document.getElementById('fade').style.display = "block"
return false;
}
</script>
</head>
<body>
<div id="pictures">
<h2>Photos</h2>
<form id="picture_form" name="picture_form" method="post" action="javascript:getfolder(document.getElementById('picture_form'));">
<table align="center" width="650" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50px" align="center"/>
<td width="100px" align="center">
<label for="album_name">Create Album::</label>
</td>
<td width="50px" align="center"/>
<td width="100px" align="center">
<input type="text" name="album_name" id="album_name" class="textfield" style="width: 100px;"/>
</td>
<td width="50px" align="center"/>
<td width="100px" align="center">
<input type="submit" name="submit" id="submit" class="button" value="Create Album" />
</td>
<td width="50px" align="center"/>
<td width="100px" align="center">
<div id="album_report"></div>
</td>
<td width="50px" align="center"/>
</tr>
<tr>
<td colspan="9" height="20px"/>
</tr>
</table>
<?php
$folder=array();
if(is_dir("Candidate_Pics/". "$_SESSION[sex]". "/" . "$_SESSION[logged_user]"))
{
$dir=opendir("Candidate_Pics/". "$_SESSION[sex]". "/" . "$_SESSION[logged_user]");
$nofiles=0;
while ($file = readdir($dir))
{
if ($file != '.' && $file != '..')
{
$nofiles++;
$files[$nofiles]=$file;
}
}
closedir($dir);
}
/* populate sample data */?>
<?php
/* how many columns */
$column_number='3';
/* html table start */
?><table border="1" cellspacing="5" cellpadding="5" width="650px" align="center"
><?php
$recordcounter=1; /* counts the records while they are in loop */
foreach($files as $record) {
/* decide if there will be new Table row (<TR>) or not ... left of division by column number is the key */
if($recordcounter%$column_number==1){ echo "<tr>"; }
?>
<td width="200px" align="center">
<?php echo $record;?><br/>
<?php
$_SESSION['album_name']="Candidate_Pics/$_SESSION[sex]/$_SESSION[logged_user]/$record";
echo "$_SESSION[album_name]"; ?>
<a href="javascript:void(0)" onClick="showalbum();" ><img src="Images/folder.png" width="200px"/></a><br/>
<input type="button" name="delete" id="delete" value="delete" class="button"/>
</td>
<?php
/* decide if there will be end of table row */
if($recordcounter%$column_number==0){ echo "</tr>"; }
$recordcounter++; /* increment the counter */
}
if(($recordcounter%$column_number)!=1){ echo "</tr>"; }
?></table>
</form>
</div>
<div id="AlbumDiv" class="white_content">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="382px">
<tr>
<td height="16px">
<a href="javascript:void(0)"
onclick="document.getElementById('AlbumDiv').style.display =
'none';document.getElementById('fade').style.display='none'">
<img src="images/close-icon.png" style="border-style: none; border-color: inherit;
border-width: 0px; height: 17px; width: 16px;" align="right" /></a>
</td>
</tr>
<tr>
<td>
<?php echo "$_SESSION[album_name]";?>
</td>
</tr>
<tr>
<td height="16px"/>
</tr>
</table>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>
the problem is that the line
echo "$_SESSION[album_name]";
inside the foreach loop is giving rite result for each record(rather say folder),
but the line
echo "$_SESSION[album_name]";
inside the AlbumDiv(used for the lightbox),
is only giving the result with Profile_pics, i.e. “Candidate_Pics/Male/saz26/Profile_pics”
no matter which ever folder image i click…
following is the AjaxCreateAlbum.js script
var http_request = false;
function makePOSTalbum(url, parameters)
{
http_request = false;
if (window.XMLHttpRequest)
{
// Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
}
else if (window.ActiveXObject)
{ // IE
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!http_request)
{
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertAlbumCreated;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function alertAlbumCreated()
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('album_report').innerHTML = result;
}
else
{
alert(http_request.status);
}
}
}
function getfolder(obj)
{
alert("huhu");
var poststring = "album_name=" + encodeURI( document.getElementById("album_name").value );
alert(poststring);
makePOSTalbum('createalbum.php', poststring);
}
And following is the createalbum.php script:
<?php
session_start();
if(mkdir("Candidate_Pics/$_SESSION[sex]/$_SESSION[logged_user]/".$_POST['album_name']))
echo "done";
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
And following is the stylesheet file:
.black_overlay
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100.7%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content
{
display: none;
position: fixed;
top: 37%;
left: 32%;
width: 382px;
padding: 0px;
border: 0px solid #a6c25c;
background: url(loginpanel.png);
z-index: 1002;
overflow: auto;
}
.headertext
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #f19a19;
font-weight: bold;
}
.textfield
{
border: 1px solid #a6c25c;
width: 100px;
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
_border-radius: 5px;
}
.dropdown
{
border: 1px solid #a6c25c;
border : 1px solid #999;
border-radius: 5px;
}
.button2
{
background-color: #a6c25c;
color: White;
font-size: 11px;
font-weight: bold;
border: 1px solid #7f9db9;
width: 100px;
}
.button
{
zoom: 1;
background: url(button.png);
color: White;
font-size: 11px;
font-weight: bold;
border: 1px solid #7f9db9;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
#border-radius: 5px;
_border-radius: 5px;
border-radius: 5px;
}
#loading{
text-align: center;
visibility: hidden;
}
#content{
color: #000000;
margin: 0 0 20px 0;
line-height: 1.3em;
font-size: 14px;
}
.text
{
border: 1px solid #a6c25c;
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
_border-radius: 5px;
}
/******* TOP *******/
#topmenu{
margin: 0 0;
padding: 0 0 0 0;
background: url(button.png);
}
/******* /TOP *******/
/******* MENU *******/
#topmenu #menu_main{
float: left;
list-style-type: none;
margin: 0px 0 0px 0px;
}
#topmenu #menu_main li{
float: left;
text-transform: uppercase;
color: #000099;
margin-left: 50px;
margin-right: 50px;
}
#topmenu #menu_main li:hover{
color: #6fa5fd;
cursor: pointer;
}
/******* /MENU *******/
/******* FOOTER *******/
#footer{
background: #efefef;
border: 1px solid #d0ccc9;
padding: 5px;
color: #7e7e7e;
font-size: 11px;
text-align: right;
}
/******* /FOOTER *******/
If I’m reading this correctly, your session variable is being set multiple times within a foreach loop, and then later called. Every time you write to that session variable within a loop, it overwrites the previous value, so once that loop is done, the only value the session variable will hold is the very last one from the loop.
Luckily you can remedy that pretty easily, since you’re writing a javascript function call in an
<a>tag in the next line. You can change that toechothe album name (while you’re still in the loop) as what will on the client side be a Javascript argument.Becomes:
Then all you have to do is change your
showalbumfunction to accept an argument, and use it to set the content of the intended<td>element. For example:And in the PHP,
Becomes: