Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I wonder whether someone may be able to help me please.

The code below allows users to delete images from a gallery.

Full Script Minus Styling

 <?php session_start(); 

$_SESSION['userid']=$_POST['userid'];
$_SESSION['locationid']=$_POST['locationid'];

//echo $_SESSION['userid']; 
//echo $_SESSION['locationid'];
?>
<?php 

  $galleryPath = 'UploadedFiles/' . $_SESSION['userid'] . '/' . $_SESSION['locationid'] . '/';

  $absGalleryPath = realpath($galleryPath) . DIRECTORY_SEPARATOR; 

  $descriptions = new DOMDocument('1.0'); 
  $descriptions->load($absGalleryPath . 'files.xml'); 
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=0.3">
        <title>Galleria Twelve Theme</title>
        <style>


        <script src="js/jquery-1.7.2.min.js"></script>
        <script src="js/jquery-ui-1.8.19.custom.min.js"></script>
        <script src="galleria/galleria-1.2.7.min.js"></script>
        <script src="galleria/themes/twelve/galleria.twelve.min.js"></script>
        <script src="galleria/plugins/history/galleria.history.min.js"></script>
        <link rel="stylesheet" href="galleria/themes/twelve/galleria.twelve.css">
         <style>

         .galleria-thumbnails .btn-delete {    
         display: block; /* Or just use a div instead of a span*/     
          position: absolute; bottom : 0px;  /*align at the bottom*/     
          width: 80px;     
          height: 17px;    
          cursor: pointer;     
          background: url(trash8.gif) no-repeat bottom; } 
         </style>

<script type="text/javascript"> 
Galleria.ready(function() { 
this.$('thumblink').click(); 

$(".galleria-image").append( 
"<span class='btn-delete ui-icon ui-icon-trash'></span>"); 

$(".btn-delete").live("click", function(){ 

// you do not need to find img and then src... just use id of image 
var img = $(this).closest(".galleria-image").find("img"); 

var userid=$(".hiddenvals").attr('userid'); 
var locationid=$(".hiddenvals").attr('locationid'); 

// send the AJAX request 
$.ajax({ 
url : 'delete3.php?userid='+userid+'&locationid='+locationid, 
type : 'post', 
data : { image : img.attr('src') }, 
success : function(){ 
alert('Deleting image... '); 
img.parent().fadeOut('slow'); 
} 
}); 

return false; 
}); 

}); 

</script> 



    </head>

<body>
<ul id="navigation">
<li class="left">
  <div align="center"><a href="javascript:document.viewimages.submit()" class="style2">&larr; Add Images</a></div>
</li>
</ul>
<form id="viewimages" name="viewimages" class="page" action="index.php" method="post"> <input name="userid" class="hiddenvals" type="hidden" value="<?php echo $_SESSION['userid']; ?>"> <input name="locationid" class="hiddenvals" type="hidden" value="<?php echo $_SESSION['locationid']; ?>"></form>
    <div class="content">
        <h1>Galleria Twelve Theme</h1>
        <p>Demonstrating a simple example.</p>

        <!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary -->

        <div id="galleria">
          <?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :  
                          $xmlFile = $descriptions->documentElement->childNodes->item($i);  
                          $name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');  
                          $description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');  
                          $source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));   
                  ?>
            <a href="<?php echo $source; ?>"><img data-title="<b>Image Name: </b> <?php echo $name; ?>" data-description="<b>Description:</b> <?php echo $description; ?>" src="<?php echo $source; ?>"></a>

      <?php endfor; ?>  
</body>
</html>

In essence, the user clicks on a delete icon, then the 'delete.php' script called in the code above deletes the image from the server. This all works well.

What I'm struggling with is how to pass two variable values to the 'delete.php' script. These are 'userid' and 'locationid'.

I've tried adding the following to the beginning of my 'delete.php':

<?php session_start(); 

$_SESSION['userid']=$_POST['userid'];
$_SESSION['locationid']=$_POST['locationid'];

But the values are not carried over. I suspect that this may be down to the fact the the forms 'POST' action is being used to navigate to another HTML page, although I'm no expert, so I may have got this wrong.

I've done quite a bit of reading and searched for tutorials on how to go about getting around this problem, but I've not found anything that seems to suggest a solution.

I just wondered whether someone may be able to look at this please, and offers some guidance on how I can pass these two values to my 'delete.php' script.

Many thanks and kind regards

share|improve this question
check my answer.. is that what u want? – sujal May 17 '12 at 12:37
Hi @sujal, many thanks for taking the time to reply to my post and for the solution, which I'm just testing. I've updated my answer under your post. – IRHM May 17 '12 at 12:57

3 Answers

up vote 0 down vote accepted

Try to send ids from your html page like

 $.ajax({
    url : 'delete.php?userid=2&locationid=4',
   ........

Then in php

$uid=$_POST['userid'];
$locid=$_POST['locationid'];

If you want to get userid and locationid dynamically for each image.

FIRST; in you btn-delete class add uid and locid attribute. I suppose you are looping through PHP.

LIKE ===>

<input type="button" class="btn-delete" uid="2" locid="5">

Then in your script

    <script type="text/javascript"> 
    Galleria.ready(function() {
    this.$('thumblink').click();

    $(".galleria-image").append( 
    "<span class='btn-delete ui-icon ui-icon-trash'></span>"); 

    $(".btn-delete").live("click", function(){

    // you do not need to find img and then src... just use id of image
    var img = $(this).closest(".galleria-image").find("img");

    var uid=$(this).attr('uid');
    var locid=$(this).attr('locid');

    // send the AJAX request
    $.ajax({
    url : 'delete.php?userid='+uid+'&locationid='+locid,
    type : 'post',
    data : { image : img.attr('src') },
    success : function(){
    alert('Deleting image... ');
    img.parent().fadeOut('slow');
    }
    });

    return false;
    });

    });

</script>

var id=$(this).attr('id');

share|improve this answer
Hi @Sandy Frank, thank you for taking the time to reply to my post. Unfortunately the values and pertient to the 'current user' in the 'current location' so they would change and I need to take account of this. Kind regards – IRHM May 17 '12 at 13:23
what you mean by "the values and pertient to the 'current user' in the 'current location' so they would change"? – Sandy Fark May 17 '12 at 14:27
Hi @Sandy Fark. My apologies for not making this clearer. I'm quite new to this so perhaps I don't fully understand, so please correct me if I've misunderstood. in your solution you suggested sending the id's, but am I right in thinking that these values are static and would have to be manually changed for each user or are these values automatically pulled through? Kind regards – IRHM May 17 '12 at 14:34
Yes it is possible let me update my answer – Sandy Fark May 17 '12 at 14:41
I just added solution let me know if u find difficulty. – Sandy Fark May 17 '12 at 14:55
show 4 more comments

If they are in the html page add them to the ajax request:

{ image : img.attr('src'),  userid: "VALUE", locationid: "VALUE"},
share|improve this answer
Hi @Adam, thank you very much for taking the time to reply to my post. Could you tell me please is there a way in my 'delete.php' file of showing that the values are being pulled through correctly? Kind regards – IRHM May 17 '12 at 13:25
 var userid=$('#userid').val();
 var locationid=$('#locationid').val();
 $.ajax({
                url : 'delete.php',
                type : 'post',
                dataType :  'json',
                data : { image : img.attr('src'),  userid: userid, locationid: locationid},
    ,
                success : function(){
                alert('Deleting image... ');
                img.parent().fadeOut('slow');
                }
          });

add dataType : 'json' and get posted value in delete.php by

$userid=$_POST['userid'];
$locationid=$_POST['locationid'];
share|improve this answer
Hi @sujal, many thanks for this. Unfortunately the solution doesn't work. Sadly my onclick event no longer deletes the physical image. In addition and forgive me for asking, as I'm relatively new to PHP, but could you tell me please. Is there a way in which I echo the values in the 'delete.php' script to show that they are being pulled through correctly? Many thanks and kind regards – IRHM May 17 '12 at 13:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.