Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

 
Advanced search

1048117 Posts in 42494 Topics- by 34379 Members - Latest Member: AlienNate

October 02, 2014, 02:25:49 AM
TIGSource ForumsDeveloperTechnical (Moderators: Glaiel-Gamer, ThemsAllTook)2 jQuery questions
Pages: [1]
Print
Author Topic: 2 jQuery questions  (Read 731 times)
Sean A.
Level 8
***



View Profile Email
« on: February 29, 2012, 04:56:47 PM »

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  Smiley
Logged
st33d
Guest
« Reply #1 on: March 01, 2012, 06:58:02 AM »

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/
Logged
Sean A.
Level 8
***



View Profile Email
« Reply #2 on: March 01, 2012, 07:36:57 AM »

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.
Logged
st33d
Guest
« Reply #3 on: March 01, 2012, 09:27:54 AM »

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?
Logged
Sean A.
Level 8
***



View Profile Email
« Reply #4 on: March 01, 2012, 09:40:18 AM »

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
Logged
yesfish
Guest
« Reply #5 on: March 01, 2012, 10:46:02 AM »

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.
Logged
DaOgre
Level 0
*


View Profile Email
« Reply #6 on: March 01, 2012, 11:05:56 AM »

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
Logged
Sean A.
Level 8
***



View Profile Email
« Reply #7 on: March 01, 2012, 12:02:56 PM »

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.
Logged
yesfish
Guest
« Reply #8 on: March 01, 2012, 12:07:35 PM »

Code:
$('img').attr('src');
?
Logged
Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic