Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Drag and Drop Issue

Status
Not open for further replies.

rndnce

Programmer
Jul 1, 2012
1
US
Hi-
I am very new to PHP and have a bug in this code which someone else did for me. It allows me to drag and drop images into order, but, if I do that, it seems to randomly de-select a bunch of them, which requires me to re-select them. Actually the way it is, I have to drag the images into order, click save, then in a second step, re-select them all and save the fact that I've re-selected them all for them to display live on my front end. But at some point in the history of this script, that was not the case. By default they were all selected, and I could just drag them into order and save the new order with one click. The problem now is if I drag them into order, it's de-selecting some.

Does anyone see an obvious reason for this? My current dev is not familiar with drag and drop.

Thanks in advance if there is anything obvious to tweak.

Code:
$sucMessage = "";

$h_id = $_GET['id'];


$sql_org = "select * from hotels where id = $h_id";
$res_org = mysql_query($sql_org);
$row_org = mysql_fetch_assoc($res_org);

$org_id  = $row_org['original_id'];
//$org_id = 14416;
$folderName=$row_org['country'].'_'.$row_org['name'];

$frmID   =   $_GET["id"];

$action1 = isset($_POST["bc_form_action"]) ? $_POST["bc_form_action"] : "";

$action = "save";

$errors = array();
//if ($_POST["image_caption"] == "")
   //$errors[] = "Caption: can not be empty";


$err = '<table border="0" width="90%"><tr><td class="error" ><ul>';
for ($i=0;$i<count($errors); $i++)
{
   $err .= '<li>' . $errors[$i] . '</li>';
}
$err .= '</ul></td></tr></table>';   


if (isset($_FILES["pict"]) && !count($errors) )
{
   $i = 0;
   echo "<html><body><div style='padding-top:50px' align='center'><img src='../images/loading.gif'/></div></body></html>";
   flush();
   for ($mx=0;$mx<count($_FILES["pict"]["name"]);$mx++)
   {
      
      if($_FILES["pict"]["name"][$mx]!="")
      {   
         $capt = $_POST['image_caption'][$mx];
         
         $tmp_name = $_FILES["pict"]["tmp_name"][$mx];
         
         
         if(!is_dir(IMAGE_UPLOAD_PATH .'images/manual_images/'.$folderName))
         {
            mkdir(IMAGE_UPLOAD_PATH.'images/manual_images/'.$folderName.'/',0777);
            chmod(IMAGE_UPLOAD_PATH.'images/manual_images/'.$folderName.'/',0777);
            
            
            mkdir(IMAGE_UPLOAD_PATH.'images/manual_images/'.$folderName.'/thumb/',0777);
            chmod(IMAGE_UPLOAD_PATH.'images/manual_images/'.$folderName.'/thumb/',0777);
         }
         
         $mimetype = strtolower($_FILES["pict"]["type"][$mx]) ;
         $filename = strtolower($_FILES["pict"]["name"][$mx]) ;
         $exts = explode(".",$filename);
         $n = count($exts)-1;
         $exts = $exts[$n];
         if(($exts=='jpg' || $exts=='jpeg') && substr($mimetype, 0, 6) == 'image/')
         {
            $temp_file_path=IMAGE_UPLOAD_PATH .'images/manual_images/'.$row_org['country'].'_'.$row_org['name'].'_'. rand(100,99999).'.'.$exts;
            $ran= 0;
            do
            {
               
               
               $ran++;
               $bc_image_path_up  = IMAGE_UPLOAD_PATH .'images/manual_images/'.$folderName . '/'.$row_org['country'].'_'.$row_org['name'].'_'.$ran.'.'.$exts;
               $bc_image_path_thumb_up  = IMAGE_UPLOAD_PATH .'images/manual_images/'.$folderName . '/thumb/'.$row_org['country'].'_'.$row_org['name'].'_'.$ran.'.'.$exts;
               
               $bc_image_path  = ABSOLUTE_PATH .'images/manual_images/'.$folderName . '/'.$row_org['country'].'_'.$row_org['name'].'_'.$ran.'.'.$exts;
               $bc_image_path_thumb  = ABSOLUTE_PATH .'images/manual_images/'.$folderName . '/thumb/'.$row_org['country'].'_'.$row_org['name'].'_'.$ran.'.'.$exts;
               
            }while(file_exists($bc_image_path_up));
            
            move_uploaded_file($tmp_name, $temp_file_path);
            $thumb = new Imagick($temp_file_path);
                  
                  $thumb->setImageUnits(imagick::RESOLUTION_PIXELSPERINCH);
                  
                  if(!$thumb->setImageResolution(70,70))
                     $error.= "Resolution can be changed.";
                  
                  $height=$thumb->getImageHeight();
                  $width=$thumb->getImageWidth();
                  
                  if ($width > 325)
                     $thumb->scaleImage(325,0);
                  
                  $thumb->normalizeImage();
                  $thumb->unsharpMaskImage(0 , 0.5 , 1 , 0.05);

                  $thumb->writeImage($bc_image_path_up);
                  $thumb->clear();
                  $thumb->destroy();
                  
                  $thumb = new Imagick($temp_file_path);
                  $thumb->resizeImage(70,70,Imagick::FILTER_LANCZOS,1);
                  
                  $thumb->normalizeImage();
                  $thumb->unsharpMaskImage(0 , 0.5 , 1 , 0.05);
                  
                  $thumb->writeImage($bc_image_path_thumb_up);
                  
                  $thumb->clear();
                  $thumb->destroy();
                  
            unlink($temp_file_path);
            
            $sql   =   "insert into hotel_images (hotel_id,image_path,image_thumbnail_path,image_caption,manual) values ('" . $org_id . "','" . $bc_image_path . "','" . $bc_image_path_thumb. "','" . $capt . "',1)";
            
            $res   =   mysql_query($sql);
            if ($res)
            {
               $i++;
               $sucMessage = $i." Images uploaded successfully...Note: if any images are missing, please check file type. Images must be .jpg only. Thanks.";               
            }
            $sql   =   "update hotels SET googleimagesupdated = '1', manual_image_update=NOW() WHERE original_id = '" . $org_id . "'";
   @mysql_query($sql);
         }
      }
   }
   
   header('location:admin_images_popup.php?id='.$_GET['id'].'&msg='.$sucMessage);
   exit;
}
else
{
   $sucMessage = $err;
}

if($_GET['msg']!="")
   $sucMessage=$_GET['msg'];

if(isset($_POST['sort_ord']) || isset($_POST['sort_ord_noclose']))
{
   $sort_order = $_POST['s_order'];
   $visibility = $_POST['s_visible'];
   $sort_id    = $_POST['ord_id'];

//print_r($_POST);

   $data=   explode(",",$_POST[sorted_data]);
   foreach ( $data as $key => $value)
   {
      if($value!="")
      {
         $qry="update hotel_images set display_order = ". $key .", visible = ". (($visibility[$value] == 'on') ? 1 : 0) ." where id = ". $value ;
         //print($qry . '<br>');
         mysql_query($qry);
      }
   }
   $sql   =   "update hotels SET googleimagesupdated = '1', manual_image_update=NOW() WHERE original_id = '" . $org_id . "'";
   @mysql_query($sql);

   echo "<script>";
   if ($_POST['sort_ord']) {
      echo "window.close();";
   } else {
      echo "window.location.href = 'admin_images_popup.php?id=" . $h_id . "';";
   }
   echo "window.opener.document.getElementById('row_" . $_GET['id'] . "').className = 'tr_default_processed';";
   echo "</script>";
   die();
}

if($_GET['act'] == 'del' && $_GET['tid'])
{
   $imgs_id = (int)$_GET['tid'];
   $get_img = mysql_query("select * from hotel_images where id = $imgs_id");
   $row_img = mysql_fetch_assoc($get_img);
   
   $img_path          = str_replace('[URL unfurl="true"]http://www.juicyhotels.com',[/URL] IMAGE_UPLOAD_PATH, $row_img['image_path']);
   $img_thumbnail_path = str_replace('[URL unfurl="true"]http://www.juicyhotels.com',[/URL] IMAGE_UPLOAD_PATH, $row_img['image_thumbnail_path']);
   
   @unlink($img_path);
   @unlink($img_thumbnail_path);
   
   
   $sql_del = "delete from hotel_images where id = $imgs_id";
   $rec_del = mysql_query($sql_del); 
   $sql   =   "update hotels SET googleimagesupdated = '1', manual_image_update=NOW() WHERE original_id = '" . $org_id . "'";
   @mysql_query($sql);
   $sucMessage = "Image deleted successfully.";
}


if(isset($_POST['deleteSelected']))
{
   for($sd=0;$sd<count($_POST['del']);$sd++)
   {
      $imgs_id = $_POST['del'][$sd];
      $get_img = mysql_query("select * from hotel_images where id = $imgs_id");
      $row_img = mysql_fetch_assoc($get_img);
      
      $img_path          = str_replace('[URL unfurl="true"]http://www.juicyhotels.com',[/URL] IMAGE_UPLOAD_PATH, $row_img['image_path']);
      $img_thumbnail_path = str_replace('[URL unfurl="true"]http://www.juicyhotels.com',[/URL] IMAGE_UPLOAD_PATH, $row_img['image_thumbnail_path']);
      
      @unlink($img_path);
      @unlink($img_thumbnail_path);
      
      $sql_del = "delete from hotel_images where id = $imgs_id";
      $rec_del = mysql_query($sql_del); 
   }
   $sql   =   "update hotels SET googleimagesupdated = '1', manual_image_update=NOW() WHERE original_id = '" . $org_id . "'";
   @mysql_query($sql);
   $sucMessage = "Image(s) deleted successfully.";
}
if(isset($_POST['showSelected']) || isset($_POST['hideSelected']))
{
   for($sd=0;$sd<count($_POST['del']);$sd++)
   {
      $imgs_id = $_POST['del'][$sd];

      $sql_del = "update hotel_images set visible = '" . ((isset($_POST['showSelected'])) ? '1' : '0') . "' where id = $imgs_id";
      //print($sql_del . '<br>');
      $rec_del = mysql_query($sql_del); 
   }
   /*$data=   explode(",",$_POST[sorted_data]);
   $visibility = $_POST['s_visible'];
   foreach ( $data as $key => $value)
   {
      if($value!="")
      {
         $qry="update hotel_images set display_order = ". $key .", visible = ". (($visibility[$value] == 'on') ? 1 : 0) ." where id = ". $value ;
         //print($qry . '<br>');
         mysql_query($qry);
      }
   }*/
   $sql   =   "update hotels SET googleimagesupdated = '1', manual_image_update=NOW() WHERE original_id = '" . $org_id . "'";
   @mysql_query($sql);
   $sucMessage = "Image(s) " . ((isset($_POST['showSelected'])) ? 'shown' : 'hidden') . " successfully.";
}
$sql   =   "select * from hotel_images where id=$org_id";
$res   =   mysql_query($sql);
if ($res)
{
   if ($row = mysql_fetch_assoc($res) )
   {
      $bc_image_caption   =   $row["image_caption"];
   } // end if row
   $action = "edit";
} // end if

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title><?php echo $meta_title;?></title>
<meta name="description" content="<?php echo $meta_description;?>" />
<meta name="keywords" content="<?php echo $meta_keywords;?>" />
<link rel="shortcut icon" href="<?php echo ABSOLUTE_PATH;?>favicon.ico" />
<!--link href="[URL unfurl="true"]http://www.juicyhotels.com/juicyhotels.css"[/URL] rel="stylesheet" type="text/css" /-->
<link href="<?php echo ABSOLUTE_PATH;?>css/styles.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="<?php echo ABSOLUTE_PATH;?>js/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="<?php echo ABSOLUTE_PATH;?>js/jquery-ui-1.8.2.custom.min.js"></script>
 
<script type="text/javascript" src="<?php echo ABSOLUTE_PATH?>js/ajaxfileupload.js"></script>

 <script type="text/javascript">
 function ajaxFileUpload()
 {
   document.getElementById("loading").style.display='block';
 }
 
function getGoogleImages()

{
$('#googlestatus').html('Loading images...');
   $.ajax({
      type: 'get',
      async: false,
      url: '/import/import_google_images.php?id=<?php echo($org_id); ?>&force=yes',
      success: function(data) {
         document.location.href = 'admin_images_popup.php?id=<?php echo($h_id); ?>';
      },
      error: function(data, status, err) {
               $('#googlestatus').html('error: ' + err);
//            alert('Failed connection to server.');
      }
   });

}
 
 </script>


<?php include_once("../js/common.js.php"); ?>

<style type="text/css">
<!--
.style2 {font-size: 12px; color: #990000;}
.style3 {font-size: 11px}
-->
</style>
</head>



<body bgcolor="#FFFFFF" style="background:#FFFFFF!important">
<style>

.listul
{
   list-style:none;
}

.listli
{
   font-family:Arial, Helvetica, sans-serif;
   font-size:11px;
   list-style:none;
   margin:6px;
   padding:4px;
   width:120px;
   float:left;
   background-color:#EEEEEE;
   border:#CCCCCC solid 1px;
   cursor:move;
}
.page_heading
{
   color:#006699;
   font-family:Arial, Helvetica, sans-serif;
   font-size:16px;
   font-style:normal;
   font-weight:bold;
   width:80%;
   float:none;
   clear:both;
   margin:10px;
   margin-left:30px;
}
.delbox
{
   position:relative;
   float:left;
   width:10px;
   cursor:pointer;
}
.delimg
{
   position:relative;
   float:right;
}
.overlay {
position:relative;
top:0;
bottom:0;
left:0;
width:100%;
visibility:hidden;
}
</style>
<script type="text/javascript">
function bclr(cb,id)
{
   if(cb.checked==true)
   {
      var o = document.getElementById('list_'+id);
      o.style.borderColor = '#A61500';
   }
   else
   {
      var o = document.getElementById('list_'+id);
      o.style.borderColor = '#CCC';
   }
}

function showOverlay(id, image_path) {
var o = document.getElementById(id);
o.style.visibility = 'visible';
$('#full-image').html('<img src="'+image_path+'" width="300"/>');
}
function hideOverlay(id) {
var o = document.getElementById(id);
o.style.visibility = 'hidden';
$('#full-image').html('');
}

function checkallboxes(par_fireld)
{
   var field=document.sortform.del;
   if(par_fireld.checked==true)
   {
      for (i = 0; i < field.length; i++)
      {
         field[i].checked = true ;
         
         var o = document.getElementById('list_'+field[i].value);
         o.style.borderColor = '#A61500';
      }
   }
   else
   {
      for (i = 0; i < field.length; i++)
      {
         field[i].checked = false ;
         
         var o = document.getElementById('list_'+field[i].value);
         o.style.borderColor = '#CCC';
      }
   }
   
}

</script>

<title>Juicy Hotelier Photo Management</title><div style="width:100%; text-align:center; background-color:#FFFFFF" align="center">

<h1>Photos for <?php echo $row_org['name']; ?> - <?php echo $row_org['id']; ?></h1>
<table width="100%" border="0" cellspacing="0" cellpadding="5" align="center" id="content_table" >

<tr>
<td colspan="2" align="center" class="success" ><?php echo $sucMessage; ?>  </td>
</tr>


<tr><td colspan="2" align="left" valign="top">
  <p class="page_heading">Hotel Images</p>
      <p style="padding-left:50px">    Drag and drop photos to change the position you want them to appear.<br />
        Be sure to click "Save Images Order" to save the order.<br />
      Be sure to click Save when you are done adding images.
         </p>     
 </td>
</tr>

<?php
$sql_imgc = "select * from hotel_images where hotel_id = $org_id";
$res_imgc = mysql_query($sql_imgc);
if(@mysql_num_rows($res_imgc) > 0){
?>
      <form name="sortform" method="post" action="admin_images_popup.php?id=<?php echo $_GET['id'];?>">
      <tr align="center">
         <td align="left"><label>
           <input type="checkbox" name="checkall" value="1" onchange="checkallboxes(this)" style="width:20px;" />
          <strong>Check/Uncheck All</strong> </label>&nbsp;&nbsp;&nbsp;&nbsp;
             <input type="submit" name="deleteSelected" value="Delete Selected" /><input type="submit" name="hideSelected" value="Hide Selected" /><input type="submit" name="showSelected" value="Show Selected" /></td>
      </tr>
      <tr align="center">
        <td align="center"><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border:#EEEEEE solid 1px" rules="all">
               <tr valign="top" align="center"><td> <?php
               
               
               $n = 1;         
               $x = 3;       
               $rows =3;     
               $z=0;
            ?>
                  
            <?php
         
            $sql_img = "select * from hotel_images where hotel_id = $org_id order by display_order";

            $res_img = mysql_query($sql_img);
            
            // added code by Satish for sortforming
            echo '<ul class="listul"  id="tablesorter">';
            $sort_id="manula_image_tbl";
            //end

               if(mysql_num_rows($res_img) != 0){
               while($row_img = mysql_fetch_assoc($res_img)){
                  $timgs    = $row_img['image_thumbnail_path'];
                  $iid    = $row_img['id'];

                  if($timgs != ''){
                     $tbl_id = $row_img['id'];
                     
                     $sort = $row_img['display_order'];
                     $visible = $row_img['visible'];
                     $desc = $row_img['image_caption'];
                     $srcurl = $row_img['source_image_path'];
            
            $z++;   
            
            //image was  = width="125" height="90"
                  
               echo '<li class="listli" style="padding:5px; text-align:center; max-height:300px;" id="list_'.$tbl_id.'" onmouseout="hideOverlay(\''.$tbl_id.'\')" onmouseover="showOverlay(\''.$tbl_id.'\', \''.$row_img['image_path'].'\')">
                           <div class="overlay" id="'.$tbl_id.'"><input type="checkbox" id="del" name="del[]" value="'.$tbl_id.'" class="delbox" onclick="bclr(this,\''.$tbl_id.'\')"  /> <a href="admin_images_popup.php?id='.$h_id.'&tid='.$tbl_id.'&act=del"><img src="'. ABSOLUTE_PATH_ADMIN  .'images/del-image.png" title="Remove Image" border="0" class="delimg"></a></div>
                           <img src="'.$timgs.'" title="'.$desc." (source: ".$srcurl.')" /><br>
                           Order: <input type="text" id="srt" name="s_order['.$iid.']" style="width:30px!important;text-align:center; margin-top:3px;" value='.$sort.' readonly="readonly">
                           <br />Visible: <input type="checkbox" id="vis" name="s_visible['.$iid.']" style="width:30px!important;text-align:center; margin-top:3px;" '. (($visible) ? 'checked' : '') .' >
                    <input type="hidden" name="ord_id['.$iid.']" value="'.$row_img['id'].'">                   </li>';

                  $sorted_data.=",".$iid;

                  /*   if($n == $x) {
                        $y = ($x + $rows);
                        $x = $y;
                        echo("</td></tr><tr valign=\"top\">");
                     }
                     else {
                        echo("</td>");
                     } $n++;
                  */

                  }
               }
            }
            ?>
            </ul></td>   
            
            <td valign="middle" align="center" width="300">
               <div id="full-image">
               
               </div>
            </td>
            </tr>
        </table></td>
        </tr>
   
      <tr><td colspan="2" align="center"><input type="hidden" id="sorted_data" name="sorted_data" value="<?php echo $sorted_data;?>" />
      <input type="submit" name="sort_ord_noclose" value="Save" class="bc_button" />
      <input type="submit" name="sort_ord" value="Save & Close" class="bc_button" /></td></tr>
      </form>      
<?php } ?>


<tr><td colspan="2"><hr /></td></tr>

<!-- Script Code for sorting -->

   <script type="text/javascript">
     $(document).ready(function(){
        $('#tablesorter').sortable({
           stop:function(e){
            document.getElementById("sorted_data").value="";            
            var hValue = "";
            $('#tablesorter li').each(function(el,p){
               hValue = hValue + "," + $(p).find("input[type=hidden]").val();               
            });
            document.getElementById("sorted_data").value = hValue;
         }
        });
     });

   
   $(document).ready(function(){
   
      $('#tablesorter li').click(function() {      
         var p=this.parentNode.getElementsByTagName('li');   
         var str='';
         document.getElementById("sorted_data").value="";
         for(var i=0; i<p.length; i++)
         {
            for(var c=0; c<p[i].childNodes.length; c++)
            {
               if (p[i].childNodes[c].name != undefined && p[i].childNodes[c].name.substr(0, 6) == 'ord_id')
               {
                  //str += 'image ' + i + ' -- ' + p[i].childNodes[c].name + ':' + p[i].childNodes[c].value + "\n";
                  break;
               }
            }
             document.getElementById("sorted_data").value=document.getElementById("sorted_data").value+","+p[i].childNodes[c].value;
          }
         //alert(str);
      
      });
   });


  </script>
   

<!-- Script Code for sorting -->

<form  name="myform" id="myform" method="post"  action="admin_images_popup.php?id=<?php echo $_GET['id'];?>" enctype="multipart/form-data" >
<input type="hidden" name="bc_form_action" class="bc_input" value="<?php echo $action; ?>"/>
<tr>
   <td colspan="2" align="center" valign="middle">   
      <table width="100%" align="center">
          
          <tr >
           <td  valign="middle" align="center"><span class="page_heading">Add More Images</span>
               <br /><br />
             <a href="javascript:getGoogleImages();">Load Google Images</a>&nbsp;<span id="googlestatus"></span>
             <br /><br /><img src="../images/loading.gif" width="35" height="35" id="loading"  style="display:none;"/>
             <br />
             Please browse  images to upload</span> (<span class="bc_input_td" >JPG only) </span>:&nbsp;
            <input name="pict[]" id="pict" type="file" multiple="multiple" />
            <br />
            <span class="style2"><br />
            <span class="style3">Please note: If you are using Internet Explorer, you will only be able to upload one photo at a time. <br />
            Other browsers allow multiple uploads.</span><br />
            <br />
            </span></td>
         </tr>   
      </table></td>
</tr>

<tr>
<td colspan="2" align="center" valign="middle"><input type="submit" name="Submit" value="Upload" id="buttonUpload" onClick="ajaxFileUpload();" /></td>
</tr>
</form>
</table>
</div>
</body>
</html>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top