StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Stacey - I see you're referencing my blog and would love to help. I'm blogging on a larger jquery asp.net mvc drag and drop project so I split up my posts into parts and I'm only about halfway through (3 parts so far). Basically, the info you're looking for is not all there yet, but should be soon.</p> <p>For starters, I debug events using <a href="http://getfirebug.com/logging.html" rel="nofollow noreferrer">Firebug's logging</a> feature. Here's an example testing events with jQuery UI's sortable() method:</p> <pre><code>$("#mylist").sortable( { ... start: function(event, ui) { console.log("-- start fired --"); console.log($(ui.item)); }, update: function(event, ui) { console.log("-- update fired --"); console.log($(ui.item)); }, deactivate: function(event, ui) { console.log("-- deactivate fired --"); console.log($(ui.item)); } }); </code></pre> <p>When an item is dropped using sortable(), it fires the update event. I use jQuery's AJAX post method to send the data to a controller.</p> <pre><code>$("#mylist").sortable( { ... update: function(event, ui) { //Extract column num from current div id var colNum = $(this).attr("id").replace(/col_/, ""); $.post("/Section/UpdateSortOrder", { columnNum: colNum, sectionIdQueryString: $(this).sortable("serialize") }); } }); </code></pre> <p>The variable colNum is extracting the id by parsing the id attribute that's set in the view. See <a href="http://philderksen.com/2009/drag-and-drop-categorized-item-list-jquery-asp-net-mvc-part-3/" rel="nofollow noreferrer">part 3</a> on my blog for how this is rendered. Then both the column number and set of section id's (serialized in jquery) are posted to the controller.</p> <p>The controller method resides in /Controllers/SectionController.cs and only accepts posts:</p> <pre><code> private SectionRepository secRepo = new SectionRepository(); [AcceptVerbs(HttpVerbs.Post)] public ActionResult UpdateSortOrder(int columnNum, string sectionIdQueryString) { string[] separator = new string[2] { "section[]=", "&" }; string[] sectionIdArray = sectionIdQueryString.Split(separator, StringSplitOptions.RemoveEmptyEntries); secRepo.UpdateSortOrder(columnNum, sectionIdArray); secRepo.Save(); return Content("Success"); } </code></pre> <p>Hope that helps for now.</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