StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've just done this. Here's how I did it:</p> <p>Surround the <code>#images</code> element with a form, action pointing to your ajax script. Alongside each image, have a hidden input field eg:</p> <p></p> <p>When you re-order the images, capture the jQuery sortable update and stop events, similar to this:</p> <pre><code>$("#images").sortable({ // configuration delay: 100, items: 'li', update: function(event, ui) { // Update order indexes updateOrderIndexes(); }, stop: function(event, ui) { // fire off the update method postUpdateOrder(); } }); function updateOrderIndexes() { // Update the order index on each item var orderIndex = 1; $("#images li").each( function() { $(this).find("input[type=hidden]:first").val(orderIndex); orderIndex++; }) } </code></pre> <p>In the <code>postUpdateOrder()</code> function which you'll need to write, you can use jQuery's <code>$.post</code> function to carry out an AJAX post request back to the server. Each field will then be available in your PHP script's $_POST array, named as per the ID, with a value of the new index. Validate as appropriate, save the new values, and send an OK/error back to the browser.</p> <p><strong>Update</strong> based on your edit requirement of not enclosing it in a form, you could still do this by eg adding a class to all your order-related input fields, putting the AJAX url into your Javascript somewhere eg var <code>myRoute = '/some/path/to/script.php'</code> and construct the data to send to the server yourself based on <code>$("input.myclass").each()</code>-style code with jQuery. Essentially all I use the input fields for is data storage client-side - you can accomplish this however you want.</p> <p>Just to clarify as well, you don't need to have a submit button etc for a form, it just makes it easier to serialize the data to send to your AJAX script - this is fired automatically when you stop dragging an item if you use the above code.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload