The idea is I have "Modify" button, that expand <div>
with select and checkboxes. Also I have 2 buttons on this <div>
: "Update" and "Cancel". I want on "Cancel" press to revert all changes in checkboxes and select to the state, that was when I pressed "Modify".
My <div>
:
<div class="accordion_box_inner accordion_box_leding">
.....
@Html.MaterialDropDownRadioListItemFor(x => x.Categories[i].Products[j].AccountUsedFor, values, Constants.OptionLabel,
new
{
@class = "accountUsedForSelection" + (productSelection.Product.IsProductFieldType(ProductType.Mortgage) ? " mortgage-switches" : ""),
data_evtname = eventPrefix + "-AccountUsedFor"
}, "w-100 mdldropDownWrap")
.....
My button:
@Html.MaterialButton("Cancel", attrs: new{@class = "cancel-product"})
js:
function modifySelectedProduct($items) {
var $container = $items.closest('.accordion_box_inner');
var $infoContainer = $container.find('.product-info-container');
...
$infoContainer.slideDown();
$container.parent().siblings().hide();
$container.find('.add-product').removeClass('remove-button').text('update');
$container.find('.cancel-product').show();
...
function cancelSelectedProduct($items) {
var $container = $items.closest('.accordion_box_inner');
var $infoContainer = $container.closest('.accordion_box_inner');
....
$infoContainer.slideUp();
$container.parent().siblings().show();
$infoContainer.closest('.accordion_box_inner').find('.add-product').hide();
$('.menu_accordion').find('.accordion_item_wrap').show();
....
What I tried:
Modify:
this.savedItem = $.extend(true, {}, $items.closest('.accordion_box_inner'));
Cancel:
var $container = $items.closest('.accordion_box_inner');
$container = this.savedItem;
but the HTML in this.savedItem
has changed status.
UPDATED: added code.
P.S. Yes, I tried advices from answers but without result.