Skip to content

Instantly share code, notes, and snippets.

@mohandere

mohandere/accordion.js

Last active Nov 21, 2017
Embed
What would you like to do?
Jquery UI Sortable with Accordion: Save sort order
scmAcco.accordion({
header: "> div > h3",
collapsible: true,
active: false,
heightStyle: "content",
}).sortable({
update: function(event, ui) {
//On update get new order of elements as an array
var serialized = $(this).sortable("toArray", {
attribute: "data-originalIndex"
}).join();
//you will get result like 1,0,3
//Now split result string and result will become indexed array
var menuOrdrArray = serialized.split(',')
console.log('serialize', serialized, 'menuOrdrArray', menuOrdrArray);
//Now iterate over generated array and set hidden field value
_.each(menuOrdrArray, function(newOrder, key) {
self.$el.find('input[name="scmw__menus[' + key + '][scmw__display_order]"]').val(newOrder);
});
}
});
<div id="menu-{{index}}" class="group menu" data-originalIndex="{{index}}" data-displayOrder="{{displayOrder}}">
<h3 class="scmw-heading ui-state-default">
{{title}}
</h3>
<div class="scmw-content">
<div class="control-group">
<div class="controls">
<label class="control-label">Title</label>
<input type="text" name="scmw__menus[{{index}}][scmw__title]" class="input-block-level scmw-menu-title" value="{{title}}" placeholder="{{title}}">
</div>
</div>
...
<div class="control-group">
<div class="controls">
<a type="button" class="scm-delete-menu btn btn-link">Delete</a>
<button type="button" class="scm-save-menu btn btn-primary">Save Menu</button>
</div>
</div>
<input type="hidden" name="scmw__menus[{{index}}][scmw__display_order]" value="{{displayOrder}}">
</div>
<!-- ./scmw-content -->
</div>
<!-- ./menu -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.