Hello All.
I have a list of selectable objects on the page inside the form:
<ul class="list-unstyled" id="selectable">
{{#each exercises}}
<li id="{{_id}}">
<div class="row">
<div class="col-lg-12">
<div class="hpanel filter-item" name="exercise">
<div class="panel-body" data-id="{{_id}}">
<div class="pull-right text-right" name="options">
<small class="label label-success hidden" name="selected">Выбрано</small>
</div>
<h4 class="m-b-xs" name="exerciseName">{{exerciseName}}</h4>
<p class="small" name="exerciseDesc">{{exerciseDesc}}</p>
</div>
</div>
</div>
</div>
</li>
{{/each}}
I have jQuery code in Template…onRendered:
// Initialize jQuery Selectable to select exercises
$('#selectable').bind('mousedown', function (event) {
event.metaKey = true;
}).selectable({
selected: function (event, ui) {
$(ui.selected).find('small[name="selected"]').toggleClass('hidden');
// var exerciseId = $(ui.selected, this).attr('id');
// console.log(exerciseId);
},
unselected: function (event, ui) {
$(ui.unselected).find('small[name="selected"]').addClass('hidden');
},
stop: function (event, ui) {
var exercisesId = [];
$('.ui-selected', this).each(function () {
var exerciseId = $(this).attr('id');
exercisesId.push(exerciseId);
});
// console.log(exercisesId);
}
});
I want to select elements using jQuery selectable, get their IDs to the array and save them by form submit. But form submit triggers in Template…events section. I don’t understand how to transfer IDs of selected objects from …onRendered section to …events. Maybe I use it wrong not Meteor way. Any proposals are welcome.