Databases
StackOverflow2013
Postsdbo
POApplying jQuery UI Sortable to hundreds of elements on a page results in very slow page load -- need ideas on how to make it more efficient
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POApplying jQuery UI Sortable to hundreds of elements on a page results in very slow page load -- need ideas on how to make it more efficient
    text
    copied!<p>I'm building a drag and drop calendar and have found that jQuery UI's sortable offers the best live performance for what I'm trying to do.</p> <p>However, applying sortable to many months worth of days (60 to 180 days at a time -- sometimes more) results in a noticeable lag upon page load as my script is applying all those sortable instances. It works fine once it's loaded, but I'd rather not have the initial lag. In some cases the browser even tries to kill the script.</p> <p>I tried making the first day of the calendar sortable and then using jQuery's .clone() to copy to all the other days, but unfortunately jQuery's .clone() doesn't appear to copy .sortable's events. Other events (such as click, double click, etc) get copied fine, but not sortable. Doing some research online, all I could find was the statement that jQuery "doesn't support cloning of plugins."</p> <p>Is there a better way to do this? I've scoured stackoverflow, jQuery UI's forums, and Google in general, and have found nothing of help.</p> <p>Thanks in advance, Jamon</p> <p>EDIT: Here is some code. Nothing too special.</p> <pre><code> function sortableStop(event, ui) { // Saves to the DB here. Code removed - not relevant } $(".milestone-day").bind("dblclick", function(ev) { // Allows adding milestones. Code removed - not relevant }).sortable({ handle: '.handle', connectWith: '.milestone-day', items: '.milestone', stop: sortableStop }); </code></pre> <p>The markup looks like this:</p> <pre><code>&lt;table&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td&gt;&lt;ul class="milestone-day"&gt;&lt;/ul&gt;&lt;/td&gt; &lt;/tr&gt; ... &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>Milestones are li elements loaded into their proper milestone-day uls via ajax.</p> <p><del>EDIT 2: Working demo posted:</p> <p><a href="http://www.clearsightstudio.com/demos/calendar-load/" rel="nofollow">http://www.clearsightstudio.com/demos/calendar-load/</a> </del></p> <p>EDIT 3: Demo is gone. Sorry.</p> <p>Note that there's a lag when you open the page. There's a lot more going on than on that demo in my actual app, so the lag is even more noticeable.</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