1

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.

Toto6ka
  • 17
  • 5
  • How you store the state depends on how your form is structured. I'd suggest using JSON to serialise the `serializeArray()` output of the `form`, which you can then place in localStorage if needed. When you want to re-set the state retrieve the object and loop through it. If you'd like an example of this, please add all the relevant HTML and JS code to the question – Rory McCrossan Feb 02 '21 at 16:13
  • `$("#myForm").load(location.href+" #myForm>*","");` Just reload the form or wanted parts of it again, it will reset everything. – ikiK Feb 02 '21 at 17:02
  • Does this answer your question? [Refresh/reload the content in Div using jquery/ajax](https://stackoverflow.com/questions/18490026/refresh-reload-the-content-in-div-using-jquery-ajax) – ikiK Feb 02 '21 at 17:03
  • Thanks for advices, but all this doesn't work. I just want to set
    , not form to previous state.
    – Toto6ka Feb 03 '21 at 07:15
  • Then you're going to have to provide the relevant code. – Ouroborus Feb 03 '21 at 07:32
  • Code was provided – Toto6ka Feb 04 '21 at 07:38

0 Answers0