Databases
StackOverflow2013
Postsdbo
POOptimal way to save order of jQueryUI sortable list with Meteor
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POOptimal way to save order of jQueryUI sortable list with Meteor
    text
    copied!<p>I need some guidance/suggestions for an optimal way to save the order of a sortable list that takes advantage of Meteor.</p> <p>The following is a scaled down version of what I'm trying to do. The application is a simple todo list. The end goal for the user is to sort their list where the data is picked up from the database. As the user sorts tasks, I would like to save the order of the tasks.</p> <p>I've implemented this application without Meteor using php/ajax calls using <a href="http://api.jqueryui.com/sortable/#event-update" rel="nofollow">sortable's update event</a> that would delete the entry in the database and replace it with what was currently in the DOM. I'm curious to know if there are a better ways to do this taking advantage of Meteor's capabilities.</p> <p>The following sample code is straight off of <a href="http://petahhh-todo.meteor.com/" rel="nofollow">a live demo</a>.</p> <p>HTML:</p> <pre><code>&lt;template name="todo_list"&gt; &lt;div class="todo_list sortable"&gt; {{#each task}} &lt;div class="task"&gt; &lt;h1&gt;{{title}}&lt;/h1&gt; {{description}} &lt;/div&gt; {{/each}} &lt;/div&gt; &lt;/template&gt; </code></pre> <p>JS(Without the Meteor.isServer that simply populates the database.):</p> <pre><code>if (Meteor.isClient) { //Populate the template Template.todo_list.task = function () { return Tasks.find({}); }; //Add sortable functionality Template.todo_list.rendered = function () { $( ".sortable" ).sortable(); $( ".sortable" ).disableSelection(); }; } </code></pre> <p>Sample data (Output of Tasks.find({})):</p> <pre><code>[{ title:"CSC209", description:"Assignment 3" }, { title:"Laundry", description:"Whites" }, { title:"Clean", description:"Bathroom" }] </code></pre>
 

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