next »

[Sean A.]

I know jQuery has a forum of its own but I have an account here and I know that there are people here with javascript experience. Anyway here is the problem. I am using jQuery sortable as an interface to sort images in a slideshow. As of now I have it so that when the page loads it will load a list with all of the images from a folder in it and you can drag and drop them and order them how you please. Now here is where I have problems.

I have a trash button on each item in the list and when you click it, it will remove that item from the list but I also need it to delete the picture that is stored locally. I am comfortable using php for that because I am more familiar with it so the problem is just passing the path to the appropriate picture to be deleted. Here is the code for the list (it scans the folder and then for each it creates a list item with the picture):

Code:

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<?php
        $folder = "slideshow1";
$files = scandir($folder);
$fullPath = explode("/","http://{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}",-1);
$string = implode("/",$fullPath)."/".$folder."/";
foreach($files as $index => $value)
{
$pathinfo = pathinfo($value);
if ($pathinfo['extension'] == "jpg")
{
?>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header"><?php echo $value ?></h5>
<?php echo "<img src=".$string.$value." alt=".$string.$value." width='96' height='72' //>" ?>
<a href="<?php echo $string.$value ?>" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<?php
}
}
?>
</ul>

So when you click on the trash icon this function is called passing the item to be deleted as the argument:

Code:

function deleteImage( $item )
 {
$item.fadeOut(function() {});
}

So all of this code works properly I just need to add a part to the deleteImage function that deletes the image file.

Now, problem two. Each time the user moves an item in the list I would like to rename all of the image files to the new order. This can be done on the update event in the list. The images in my folder are named 001.jpg, 002.jpg 003.jpg etc. and that dictates the order. So when you load them into the sortable list that is the order they appear. When someone moves an item (for example they drag 001.jpg after 002.jpg) I need to rename the files to match the new order (002.jpg would become 001.jpg and vice versa). This can be done again in php but I need to be able to pass the old file path and the new index to php so I can rename it. This is the part I am stuck on so it relates to the first problem: getting properties of each element in a list. Any help would be fantastic 

[st33d]

Short answer: You cannot access the filesystem from Javascript.

Long answer: Instead of just making a list of file names, create an object for each picture entry

Code:

{path:"001.jpg", index:0}
{path:"002.jpg", index:1}
{path:"003.jpg", index:2}

You can then supply a function to sort this list:

http://stackoverflow.com/questions/979256/how-to-sort-an-array-of-javascript-objects

There are methods to access the file system from HTML5, so it's going to be down to whether your browser supports them:

http://www.html5rocks.com/en/tutorials/file/filesystem/

[Sean A.]

I dont need to acces the filesystem with javascript. The path to the picture is already stored in the link to the images in each item. I just need to access the path for each item and pass it to a php file which can do the rest.

[st33d]

That's access to the filesystem.

Accessing directory contents is accessing the filesystem. Knowing anything about files beyond their local name is access to the filesystem.

Which you could do from php right?

[Sean A.]

But the actual file system access is only PHP, when I populate the list with items each one has an img tag with the src attribute already set to the relative path. I just need to extract the src attribute for each item and pass that along with the new index in the list to a PHP file. The JavaScript never deals with the file system, only the strings already put there by the PHP in the beginning

[yesfish]

aha do not fear, i r web developer.

If I understand you're trying to send two lists to php from javascript?

http://api.jquery.com/jQuery.post/

What you want is the jquery post function

Code:

$.post("delte.php", { "list1": ['file1.img'], "list2": ['file1.img', 'file2.img'],  },
 function(data){
   console.log(data.myupdatedlist);
 }, "json");

something like that. don't quote me on correctness though, check the documentation.

[DaOgre]

aha do not fear, i r web developer.

If I understand you're trying to send two lists to php from javascript?

http://api.jquery.com/jQuery.post/

What you want is the jquery post function

Code:

$.post("delte.php", { "list1": ['file1.img'], "list2": ['file1.img', 'file2.img'],  },
 function(data){
   console.log(data.myupdatedlist);
 }, "json");

something like that. don't quote me on correctness though, check the documentation.

This.  You want to use post to make an AJAX call to your PHP file, and pass in the file name you want to remove, then do a callback in javascript to update the 'live' list and remove the link to the image from your javascript calls/divs/whatnots also

[Sean A.]

I know how to do all that that isn't the problem I just dont know how to get the src string from the specific item I want so that I can pass that to the php file. I'm assuming it'll be something like this where $item is the list item:

Code:

$item.img.src

I know that index is:

Code:

$item.index()

and I can use that for renaming the files but the question is a lot simpler than you guys think it is.

[yesfish]

Code:

$('img').attr('src');

?