Image gallery with ajax and php

PHP
1

Hello,
I have been working on a photo gallery for the past couple months and I’m completely confused and frustrated at this time. I will try to explain the best way possible but English is my second language so pardon me if I’m not very clear in what I say.

My setup is like this. I have my main page “index.php” where I have at the top a <div> tag where the “Pics.php” file loads all the thumbs from mysql when the page is first loaded.
<div id=“Pictures”><?php require_once(“Pics.php");?></div>

then I have a form

<form action=“process_upload.php” onsubmit=“uploadimage(this,<?php echo “'”.$_SESSION[‘user_name’].”'“; ?>);return false;” target=“uploadframe” method=“post” enctype=“multipart/form-data”>”.

with a hidden iframe

<iframe id=“uploadframe” name=“uploadframe” src=“process_upload.php” style=“display: none ;” width=“500” height=“400”> </iframe>

On submit, the form is submitted via the javascript function “uploadimage()”
function uploadimage(form,userName)
{
form.submit();
refreshpage(userName);
}

function refreshpage(userName)
{
runajax(“Pics.php?username=” + userName,“Pictures”);
}

Then the “process_upload.php” file uploads the picture then creates a thumb and then saves the name of the pic on my mysql database.

Then the Ajax function executes the Pics.php file which retrieves all the thumbs from mysql and then Pics.php is loaded back into my <div id=”Pictures”></div> in order to show the new loaded thumb without refreshing the entire page, but it does not work!!! I can only see the new loaded pic when I refresh the page. For some reason it doesn’t work when the “Pics.php” file is executed via ajax.
Any suggestions?

2

It would be helpful if you can post the code of the seemingly problematic file i.e. Pics.php

3

Just a wild guess but does changing “require_once” to “require” resolve the issue? It would seem you are forcing a cached view of the file.

<div id=“Pictures”><?php [B]require_once/B;?></div>

4

Thank you for your responses. I tried to change <?php require_once(“Pics.php”);?>
to <?php require(“Pics.php”);?> but it still doesn’t work. Sometimes while my gallery is empty I would upload one pic but then it displays 3 pics that I did not loaded and when I refresh the page, everything is ok then. I don’t know why but I get inconsistent results when the <div> is refreshed via ajax.

I posted the Pics.php file. I’m pretty new at programming so don’t be surprised if the style of coding is not that great. At least it will give you an idea. Thank you again for giving me some suggetions.

Chris.

<?php

require_once(“functions.php”);
require_once(“config.php”);

//connect to main database
$mMysqli= new mysqli(DB_HOST,DB_USER,DB_PASSWORD,DB_DATABASE,DB_PORT);
if (mysqli_connect_errno())
{
printf("Connect failed: %s
", mysqli_connect_error());
exit();
}

if(!isset($_SESSION[‘user_name’]))
{
$username = $_GET[‘username’];
}
else
{
$username = $_SESSION[‘user_name’];
}

$sql = “SELECT private,verified,primarypic,approved,picname,caption,description FROM user_photos WHERE user_name=\”" . $username . “\”";
echo $sql;

$result = $mMysqli->query($sql);

$row_cnt = $result->num_rows;

if($row_cnt > 0)
{
echo ‘<div style=“margin-left:auto;margin-right:auto; height:200px; width:900px; border: solid 2px #ebe4ca;text-align:center;color:#a3586d;padding:4px;margin-bottom:10px;”>’;
echo ‘<table border=“0”>’; //create the table where the thumbs will be displayed
echo ‘<tr>’; //create the row for the thumbs

//go through all rows
while ($row = $result->fetch_object())
{

   echo '&lt;td width="250" style="background-color:#ffffff;padding=10px;"&gt;';
	 
   echo '&lt;div id="mainpicdiv" style=" width:250px;border:1px solid #ff0000;float:left;"&gt;';
   if($row-&gt;approved==0)
  {
      echo '&lt;div style="border: 1px solid #ff0000; background-color:#ffdfd4; color:#ff0000; width:110px; height:15px;margin-top:5px; margin-bottom:5px;padding:3px; margin-left:auto;margin-right:auto;"&gt; ';
      echo '&lt;span style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:11px;"&gt;Approval pending&lt;/span&gt;';
      echo '&lt;/div&gt;';
  }

   echo '&lt;div id="picdiv" style="border:1px solid #00ff00; float:left;"&gt;';
   echo '&lt;div id="captindiv" style="border:1px solid #0000ff; margin-bottom:8px;font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px;"&gt;';
   echo $row-&gt;caption;
   echo '&lt;/div&gt;';
   echo '&lt;img style="margin-top:5px;margin-bottom:0px;" src="images\	humbs\\\\'. $row-&gt;picname .'"/&gt;';

   echo '&lt;/div&gt;';//end of picdiv
 
   $filenameArr = explode('.',$row-&gt;picname);

   echo '&lt;div id="controlpaneldiv" style="border:1px solid #ff0000;margin-top:0px; width:140px;margin-left:5px; float:left;"&gt;';
   
    echo '&lt;div id="descriptiondiv" style="border:1px solid #00dd00; width:135px; height:100px;text-align:left;font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;"&gt;';
    
     echo $row-&gt;description;
   
     echo '&lt;/div&gt;';//end of descriptiondiv
   
     echo '&lt;div style="border:1px solid #ff0000;font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;text-align:left;"&gt;';
     if($row-&gt;primarypic ==1)
    {
       echo '&lt;input type="radio" id="setPrimary_' . $filenameArr[0] .'" name="setPrimary[]" checked="checked" value="1"  alt="test"/&gt;';
	 
     }
     else
    {
       echo '&lt;input type="radio" id="setPrimary_' . $filenameArr[0] .'" name="setPrimary[]" value="1"/&gt;';
     } //end of primary test

     echo '&lt;label for="setPrimary"&gt;Main profile picture&lt;/label&gt;';
     echo '&lt;/div&gt;';
   
     echo '&lt;div style="border:1px solid #ff0000;font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;text-align:left;"&gt;';
  
     if($row-&gt;private==1)
    {
        echo '&lt;input type="checkbox" id="private_' . $filenameArr[0] .'" name="setPrivate[]" checked="checked" value="1"/&gt;';
     }
     else
    {
         echo '&lt;input type="checkbox" id="private_' . $filenameArr[0] .'" name="setPrivate[]" value="1"/&gt;';
    }
    echo 'Keep private';
    echo '&lt;/div&gt;';
   
   echo '&lt;a href="delpic.php?picname=' . $row-&gt;picname . '" &gt;&lt;img src="delete_picture.gif" border="0"  id="delpicimg"/&gt;&lt;/a&gt;';
   echo '&lt;/div&gt;';//end of controlpaneldiv
   echo '&lt;/div&gt;';//end of mainpicdiv
   echo '&lt;/td&gt;';

}//end of while loop

echo ‘</tr>’;
echo ‘</table>’;
echo ‘</div>’;

?&gt;

 
 &lt;?php

}
else
{
echo ‘<div style=“width:190px; height:20px; background-color:#faf0e7; border: solid 3px #ebe4ca;text-align:center;color:#a3586d;padding:9px;margin-bottom:10px; margin-left:auto;margin-right:auto;”>’;
echo ‘<span style=“font-family:Arial, Helvetica, sans-serif; font-style:normal; font-weight:bold; font-size:18px;”>Your gallery is empty</span>’;
echo ‘</div>’;
}

?>