Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Basically, do this:</p> <p>First, change your items' id format to the underscored format expected by sortable:</p> <pre><code>&lt;li id="image_7884029"&gt;&lt;img ... &lt;li id="image_7379458"&gt;&lt;img ... </code></pre> <p>Then, use sortable's <code>serialize</code> method in its <code>stop</code> event:</p> <pre><code>... // Within your sortable() setup, add the stop event handler: stop:function(event, ui) { $.ajax({ type: "POST", url: path/to/your/ajax/reorder.php, data: $("#images").sortable("serialize") }); } ... </code></pre> <p>When you use <code>$("#images").sortable("serialize")</code>, sortable's <a href="http://docs.jquery.com/UI/Sortable#method-serialize" rel="nofollow">serialize</a> method will go through the children of #images, i.e. all your li elements, and turn all the ids it finds (<code>image_7884029</code>, <code>image_7379458</code>, etc.) into a list of items like <code>image[]=7884029&amp;image[]=7379458...</code>, <em>in the order they now appear in the list, after sorting</em> (because you're calling it from <code>stop()</code>). Basically it works similar to how an array of checkboxes gets sent when posting a form.</p> <p>You can then pick this up in your server-side "reorder.php", to assign new values to your sort_order column:</p> <pre><code>$items = $_POST['image']; if ($items) { foreach($items as $key =&gt; $value) { // Use whatever SQL interface you're using to do // something like this: // UPDATE image_table SET sort_order = $key WHERE image_id = $value } } else { // show_error('No items provided for reordering.'); } </code></pre> <p>And you're done.</p>
    singulars
    1. This table or related slice is empty.
    1. POjQuery UI sortable - sorting images
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USMatt Gibson
    1. USMatt Gibson
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POjQuery UI sortable - sorting images
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. CONice - wasn't aware of the serialize method in sortable. My answer was based on the implementation I did in a Symfony project so we were using a Symfony form to handle the post data, but your answer is pretty neat :-)
      singulars
      1. PO
      1. USrichsage
    2. COThanks for this mate. By the way is there any specific reason this is done in the 'stop' method? It also works with the 'update' method.
      singulars
      1. PO
      1. USGSTAR
    3. CO@GSTAR to be honest, I probably used `stop()` because it came before `update()` in the documentation and it worked :) Reading the descriptions of the two events, I can't see that there would be any great advantage in using `stop()` or `update()` for updating the database when the user's stopped dragging things about.
      singulars
      1. PO
      1. USMatt Gibson
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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