How can I reuse a cloned element?

Question

I have a Bootstrap modal on my page. Basically, what happens is the user picks some options on the page, clicks a go button and that modal pops up and gets populated with the live output of the job they started.

After the job runs, I'd like for the user to be able to close the modal, choose more options, and run the job again. The problem is, I can't seem to get rid of the output from the previous job.

I tried this answer, which was to clone the div and use replaceWith() to restore the content to it's original state. This works for the first two times (job runs once, then when you start another the modal is back to it's original state), but for any time after that, the modal pops up with the content of the previous run until it's text gets overridden.

I have this at the beginning, to capture the contents before anything is done:

$(document).ready(function() {
     modalHold = $("#postModal").clone();
});

And, this runs when the modal closes:

$('#postModal').on('hidden.bs.modal', function (){
     $("#postModal").replaceWith(modalHold.clone()); 
})

I would've expected the replaceWith(modalHold.clone()) to replace it with a new clone of the original element, however it seems that I'm still modifying the original. Any help would be appreciated, or if there's a better way of doing this I'd be glad to hear it.

score 0 · Answer 1 · answered Sep 22 '17 at 04:21

Bootstrap does some javascript magic with the Modal, so I guess you can't just clone whole the Modal's HTML. As a workaround you may try to play with class="modal-body" node only, clone and replace it.

But the truth is on another way. You need to implement a function which would reset your inputs and call it each time the Modal is being hidden.

var modalDefault = {
  input1: '',
  input2: 'Hello!'
};

var resetModal = function() {
  $('#modalInput1').val(modalDefault.input1);
  $('#modalInput2').val(modalDefault.input2);
}

// ...

$('#postModal').on('hidden.bs.modal', resetModal);

score 0 · Accepted Answer · edited Sep 24 '17 at 16:04

Not sure why I didn't think of this to begin with, but dhilt's answer helped point me in the right direction. The idea of creating defaults and just switching back to those could be helpful in some cases, but I had some content (including job info and a loading bar) inside the modal that I'd really like to be displayed each time a job starts, until it is done and the output can be displayed.

Instead of doing any fancy cloning, I placed that content into a div and just grabbed its innerHTML:

$(document).ready(function() {
    modalHold = $('#jobOutputHolder').html();
});

When the .load () runs, it will update #jobOutputHolder with the output of the job. Then, on hide of the modal:

$('#postModal').on('hidden.bs.modal', function (){
    $('#jobOutputHolder').html(modalHold);
})

With this method, I can run a job, see the loading screen, see the job output, close the modal, and repeat as many times as I need without ever seeing the output of previous jobs.

How can I reuse a cloned element?

2 Answers2