JQuery Accordion in Razor View MVC3

Recently I needed to create a list of items that the user can rank eg. one above another. I used the accordion available from jquery and created one in a list, draggable and droppable, for each item in my databse that needs ranking.

At first it was a little tricky, however got it working in the end. Also included; on the drop event I post via Jquery to the databse so that the new ranking position of the item can be persisted should the user exit the form.

JAVASCRIPT

$(document).ready(function () {
var stop = false;
$(“#accordion h3”).click(function (event) {
if (stop) {
event.stopImmediatePropagation();
event.preventDefault();
stop = false;
}
});
$(“#accordion”)
.accordion({
header: “h3”,
active: false,
autoHeight: false,
collapsible: true,
encode: false,
change: function (event, ui) {

}
})
.sortable({
axis: “y”,
handle: “h3”,
receive: function (event, ui) {
$(ui.item).removeClass();
$(ui.item).removeAttr(“style”);
alert(‘receive’);
},
stop: function (event, ui) {
var currentHeaderID = ui.item.find(“a”).attr(“id”);

$.post(‘@Url.Action(“ACTIONNAME”, “CONTROLLERNAME”)’, { inCriteriaID: currentHeaderID, inRankingOrder: ui.item.index()}, function (data) {
// get the result and do some magic with it
var message = data.Message;
$(“#resultMessage”).html(message);
});

stop = true;
}
}
);
});

ACCORDION (scuzzy for the formatting, rl bsy on sumthn else act)

<div id=”accordion”>     @foreach (var item in Model)             {         <div>             <h3>                 <a id=@item.YOURID.ToString()   href=”#”>@Html.Raw(@item.YOURTITLE)                 </a>             </h3>             <div>                @* add table with more info here if you want*@             </div>         </div>             } </div>

 

Advertisements