Solved

How do I change the order of a directory's files?

Posted on 2015-02-24
28
68 Views
Last Modified: 2015-03-20
My client has the need to be able to shuffle or rearrange the files (image files) of a directory (that lives on the webserver) on a page, so the images are in the order they want them to be, even if that is not the original order in which the files are/were placed in the directory?

image gallery

so in the image above, they need to be able to drag and drop the images listed on the right, [as apposed to highlighting an image name and clicking the "Up" or "Down" button numerous times, (sometimes maybe 100 times depending on the number of images)], in any order they choose irrespective of the original order and they need for the order to change in the directory, and stay changed until they need to (if they need to) change the order again. it would be great, if the images were in a grid that also allowed them the ability to be able to drag and drop the images in the order they chose, with the same results.
0
Comment
Question by:mikesExpertExchange
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 16
  • 10
  • 2
28 Comments
 
LVL 20

Expert Comment

by:jmcg
ID: 40629634
The order in which files are presented is up to the application.

If this application is not under your control, then the only way to achieve the requested result is to either create a new directory with the files added in the desired order (if the application only presents files in the directory order) or to rename the files so the sort order (as chosen by the application) matches the desired order or, perhaps, modify the images' metadata (if that's what the application uses to decide what order to present them).

If the application is  under your control, you can consider adding a file to the web folder that specifies your preferred order.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40629663
@umgh is there any way I can allow the files to be dynamically ordered by dragging and dropping them in either the list or in a grid and have it maintained that order?
0
 
LVL 20

Expert Comment

by:jmcg
ID: 40629710
Between invocations of the app, the above options are the only ones I could think of.

Within the app, you should be able to manipulate the order by watching for events and invoking methods of the control(s) you've used to display the images.
0
Interactive Way of Training for the AWS CSA Exam

An interactive way of learning that will help you visualize core concepts so that you can be more effective when taking your AWS certification exam.  Built for students by a student to help them understand the concepts that they are being taught.

 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 40629718
The jQueryUI has the Sortable widget that allows you to drag items to sort them. It also has various events that get fired when certain things happen, and methods that allow you to access the data. Combine all of this with an AJAX request, and you can make a call to your server when the order is changed by dragging. The data you pass back to your server will contain the order of the items, and you can process that however you like, for example, storing it a database.

A very simple example is:

// Make the elements in #sortable sortable.
$("#sortable").sortable({
    // code to run when the order is updated
    update: function(event, ui) {
        // get the order of the items in the list
        var data = $(this).sortable('serialize');
        // pass the data back to your server for processing
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
}); 

Open in new window


You can read the Docs here -> api.jqueryui.com/sortable/
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40629741
@ChrisStanyon: So if I were to be able to list the images in some kind of grid, that I would make "sortable" I should be able to make that Ajax call, correct? And any of the other methods/functions that I needed to use, I could, but pretty much I should be able to run with what you have above, for my needs yes?
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40629762
Yeah - that's about it. You don't even need to put the images in a grid. Looking at your screenshot above, you could just list them in a UL. You can then just drag them directly.

have a look at this quick demo

http://jsfiddle.net/ChrisStanyon/jqmrpc7n/

Drag the image names around and you'll see the data string that you'd pass back to your server with the AJAX call.

Basically, it would get passed back as a POST array, which you could loop through to update a database
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40629902
@ChrisStanyon: I think I could pull that off, but I would have to dynamically generate the HTML code. This application pulls the data from a database and displays different pictures based on an id that is passed to the application. So I think I would have to dynamically generate that HTML, or do you think there's a better way to do that?
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40630129
However you implement a solution, it's likely that you'll need to edit the HTML in some way. If this is an application that you've written, then it should be straight forward enough. You'd just pull out the list of images from the database and order them by some kind of sortOrder column. You'd then build your list of images into a UL, with a functional ID and attach the jQuery. The update event would then send the new order back to a server-side script which would update your database.

If you didn't build this app, then you may have to start digging through the code.

The fact that the app is based off a database, the HTML will be dynamically generated anyway - you'll just need to find the right place to hook into.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40630420
@Chris Stanyon: Thank you. I will start working on this today. I'll keep this thread open in case I have questions but I think this will be my solution! Thanks again.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40631375
@Chris Stanyon: Below is my HTML. It won't perform the actual drag and drop. It just highlights the items in the ul list. What am I missing? I downloaded everything from the jQuery UI site.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="Styles/jquery-ui.structure.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <style type="text/css">
        li
        {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $("#sortable").sortable({
            // code to run when the order is updated
            update: function (event, ui) {
                // get the order of the items in the list
                var data = $(this).sortable('serialize');
                // pass the data back to your server for processing
                $('#data').html(data);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul id="sortable">
            <li id="pic_image1">image1.jpg</li>
            <li id="pic_image2">image2.jpg</li>
            <li id="pic_image3">image3.jpg</li>
            <li id="pic_image4">image4.jpg</li>
        </ul>
        <div id="data">
        </div>
    </div>
    </form>
</body>
</html>

Open in new window


jQueryUI1jQueryUI2jQueryUI3
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40631423
You probably need to wrap the jQuery function inside the $(document).ready() block:

<script type="text/javascript">
$(document).ready(function() {
    $("#sortable").sortable({
        // code to run when the order is updated
        update: function (event, ui) {
            // get the order of the items in the list
            var data = $(this).sortable('serialize');
            // pass the data back to your server for processing
            $('#data').html(data);
        }
    });
});
</script>

Open in new window


jQuery works on the DOM (Document Object Model) and wrapping your code inside the document.ready block ensures that the DOM has fully loaded before trying to do anything with it.

Without it, your code would probably try and bind the sortable() to an element that hadn't fully loaded - i.e. your <ul>

You might also consider using a Content Delivery Network (CDN) for the jQuery libraries and styles. Google offers one. Just change your links to:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />

Open in new window

0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40631483
@Chris Stanyon: That was it! It has me started. Thanks. I'll keep this open for a few days while I work on this. Thanks again.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40631661
@Chris Stanyon: This works great. The problem I'm trying to solve could be solved if i was able to drag and drop the pics from, maybe one container to the other, then use an Ajax call to send that order of pictures back to the directory, how would I achieve this? I think this code puts me very close to that solution, I just don't know how to make that jump.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40631771
If you just want to drag the images around to sort them, you can bind the sortable to the images instead of a UL. That way, you'd simply drag the images into place and have no need for the list.

Have a look at this: http://jsfiddle.net/ChrisStanyon/1bxbhvkq/
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40631874
@Chris Stanyon: That was it! Last question and I'm done. My images seem to be all over the place when I star to move them how do I stop that from happening? They move other things around and out of place on the page as well, if there are other controls on the page.

images before the move
images after the move
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40631895
That's probably down to your styling (css) but impossible to tell without seeing a live link to your page
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40631899
@Chris Stanyon: I figured out the issue. The issue is the real (the actual size) of the images. I've manually "squeezed" the images (and probably not proportionally correct either) just to make them "display" or show the size of the place holders that you've shown in your example on jsfiddle. But this doesn't actually change the images actual size. So when I used that placeholder image that you have in your example, it worked just fine. Thanks again. I think I have enough to go on now.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40643297
This development has been put on hold temporarily but I'm still going to keep this thread open.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40671863
@Chris Stanyon: So I'm back on this project now and it is all working with the exception of one thing: When (after) I shuffle the images and either close the window and open it back up or refresh the page, the order doesn't change. How do I effect the actual order of the photos where they live?
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40672064
@Chris Stanyon: I saw that I was missing some jQuery code, based on an earlier reply you gave. I put the code in place and am getting an error that maybe you can help me with?

errorScrnShot1
errorScrnShotII
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40672212
That's likely to be an issue with your server-side script. The code I posted earlier sugessted that you POST the serialized image order back to your server-side script for processing, such as saving to a database. Looks like you'll need to configure your script to receive the POST request, but I don't know ASP so can't help you on that one.
0
 
LVL 1

Author Closing Comment

by:mikesExpertExchange
ID: 40676756
Thanks for all your help. I will try to get the other part / piece of this question answered by posting to this group.
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40678615
@Chris Stanyon: Why does the underscore: "_" show up as: "[]="?
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40679123
I have no idea what you mean !!
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40679149
@Chris Stanyon: Sorry I should've given more info. The datastring that is sent to the <div id="data"> looks like :

image[]=image1&image[]=image2&image[]=image5&image[]=image3&image[]=image6&image[]=image7&image[]=image8&image[]=image4

where I'm assuming that the "[]=" is what used to be a "_". Why does this happen?
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40679201
Ah, right!

The square bracket indicates an array. While it shows up in the data div like that, when it get's POSTed through to a server-side script, it will be available as an array called image (part of the POST data), containing the order of the images. As I said previously, I don't know ASP at all, but if it was posted to a PHP script then the data would look something like this:

$_POST['image'] = array (
   'image1',
   'image2',
   'image5',
   'image3',
   ...etc...
);

And you could get to the order of the images like so:

foreach ($_POST['image'] as $imageName):
     echo $imageName;
endforeach;

Open in new window


The code above would loop through the image[] array, and echo (print) the name of each image in order, so you would get an output looking something ilke this:

image1
image2
image5
image3
image6
image7
image8
image4
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 40679214
@Chris Stanyon: So the code above:

foreach ($_POST['image'] as $imageName):
     echo $imageName;
endforeach;

I assume is php? But there is probably an equivalent way to do the same in jQuery / javascript?
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40679239
Yeah - it is PHP, but you'd want to do it server-side. Javascript is only for the client-side (browser). For the server-side, you'll probably be using ASP.

The whole point of this is to send the new order of images back to your server, so it can be saved into your database for future reference.
0

Featured Post

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question