<\/p>\n
I had a project where the user could save a session (at our annual meeting) from the meeting program to a personal itinerary, which they could then view anywhere, as well as export to Word or Excel. I had the basics set up – it wrote the information to a simple Access database, which the ASPX page then pulled and output as divs in a repeater. However, I really like the Netflix queue interface – the user can drag and drop items and it automatically saved the layout. I figured I could use Jquery UI sortable for the client-side interface, but I was having trouble with the callback function to save the new order to the database. All the examples I found online were in PHP, but I work on an old, crappy server running ASP.NET 1.1, so I needed something in simple ASP.NET or classic ASP. I finally got it working through the callback function calling a GET to an ASP page and thought I would share.<\/p>\n
First, the javascript:<\/p>\n
\r\n\r\n<script type=\"text\/javascript\" src=\"jquery-1.4.2.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"jquery-ui-1.8.2.custom.js\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\r\n$(function() {\r\n\t$(\"#sortable\").sortable( \r\n\t\t{opacity: 0.7,\r\n\t \trevert: true,\r\n\t \tscroll: true, \r\n\t\tcursor: 'crosshair', \r\n\t\tupdate : function () { \r\n \t\t\tvar order = $('#sortable').sortable('serialize'); \r\n\t\t\t\/\/alert(order);\r\n \t\t\t$(\"#info\").load(\"update-order.asp?\"+order); \r\n\t\t\t}\r\n\t}); \r\n});\r\n\r\n<\/script>\r\n<\/code>\r\n<\/pre>\nThen, the HTML. Note that the container div to be sorted has an id of ‘sortable’. And the divs that are sortable have ids of ‘favItem_#’. The ID is important, as that is what jquery UI uses to serialize the current order and append to the GET call. In this case, I appended the ID from the database (container.dataitem) to the repeater in the div id to keep it unique.<\/p>\n
\r\n\r\n<div id=\"info\"><\/div> <!--This receives the message from the ASP page -->\r\n<div id=\"sortable\">\r\n<div id=\"favItem_1\" class=\"dragit\">\r\n\t<p>This is the Item<\/p>\r\n<\/div>\r\n<div id=\"favItem_2\" class=\"dragit\">\r\n\t<p>This is the Item<\/p>\r\n<\/div>\r\n<div id=\"favItem_3\" class=\"dragit\">\r\n\t<p>This is the Item<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/code>\r\n<\/pre>\nAt this point, your page should be able to drag and drop. You can uncomment the ‘\/\/alert(order);’ line in the javascript to see the querystring that is passed to the ASP page after you drop an item.<\/p>\n
And finally, I set up the ASP page. This grabs the whole querystring, splits it to create an array, then for each item in the array, executes a SQL statement to insert it into the Access database.<\/p>\n
\r\n\r\n<%\r\n'this takes a querystring (all the same name), splits it into an array\r\n'and then writes the array to the database\r\n'fired from jquery when someone drags-drops the item; this saves the order to the database\r\n'and then on refresh or reload, the page is ordered by the sess_order field\r\n\r\nDim getItems, data_source, con, sql_update\r\n'getting the items from the querystring\r\ngetItems = Request.QueryString(\"favItem[]\")\r\n\r\n'split them junks into array\r\ngetItems = Split(getItems, \",\")\r\n\r\n'define the data source\r\n data_source = \"Provider=Microsoft.Jet.OLEDB.4.0;Jet OLEDB:Database Password=dbpassword;data source=\" & server.mappath(\"yourdb.mdb\")\r\n\r\n'opening the database\r\n Set con = Server.CreateObject(\"ADODB.Connection\")\r\n con.Open data_source\r\n\r\n'For each one, define and then execute the sql statement\r\nFor i = LBound(getiTems) TO UBound(getItems)\r\n sql_update = \"UPDATE sessions SET sess_order = \" & i & \" WHERE ID = \" & getItems(i)\r\n 'execute this bitch\r\n con.Execute sql_update\r\n 'below used for debugging - comment out\r\n 'Response.Write(\"ID \" & getItems(i) & \" was set to position \" & i)\r\nNext\r\n\r\n' Done. Close the connection\r\n con.Close\r\n Set con = Nothing\r\n\r\nResponse.Write(\"Your order has been updated.\")\r\n\r\n%>\r\n<\/code>\r\n<\/pre>\nThere you have it – a Netflix style, Jquery UI sortable page with persist, via AJAX GET call to an ASP page that writes to an Access database. Shit yeah!<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,1],"tags":[],"class_list":["post-62","post","type-post","status-publish","format-standard","hentry","category-computer-stuff","category-show-all"],"_links":{"self":[{"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/posts\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/comments?post=62"}],"version-history":[{"count":12,"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/posts\/62\/revisions"}],"predecessor-version":[{"id":331,"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/posts\/62\/revisions\/331"}],"wp:attachment":[{"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/media?parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/categories?post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/tags?post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}