取消时取消引导程序模式更改

Question

I have a bootstrap modal, which has table with attribute contenteditable = true inside of it (table is created dynamically with js). I'd like to set up a neat feature - if user presses cancel then the changes in table will be dismissed. I understand that i could do this with writing a function for different states and then calling out the previous state in case of cancel. I'm just thinking that is there a quicker-better-faster approach?

I did some searching and found one link which had similar issue, but the approach and result there are a bit different from mine which means that it didn't work for me.

Here's my code - parts of it are in Estonian, i don't think in general code is necessary for this question but i'll still provide:

    <div class="modal fade" id="ajamasinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><i class="fa fa-cog" style="font-size:20px"></i> Ajamasin</h4>
                </div>
                <div class="modal-body">
                    <div id="changeablevoor"></div>
                    <button type="button" class="btn btn-primary" onClick="muudaClick()">Change</button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div> 

Answer 1

Try the following approach ( view comments inline ):

Html

<div class="modal fade" id="ajamasinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
          <div class="modal-content">
               //...
               <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
               </div>
          </div>
      </div>
 </div> 

JS

// Add hidden event of the modal 
$('#ajamasinModal').on('hidden.bs.modal', function (e) {
    cancelModal(); // Call the function to cancel the modal after hiding of the modal
})

// Cancel the modal
function cancelModal() {
   // Re-generate content with default values
}

More information about these events of Bootstrap Modal can be found here in the Docs of Bootstrap: Bootstrap Modal Events