Reset modal that is dynamically created

Question

i'm developing for the first time with Angular JS and i created the following bootstrap modal in which there are 3 div that are dynamically created. One div is created per time, they are mutually exclusive. Here is the code:

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4>User Menu</h4>
        </div>
        <div class="row">
            <!-- USER MENU 1 -->
            <div ng-if="ctrl.state.current.name==='userMenu1'" ng-class="ctrl.fileOpen ? 'col-xs-8' : 'col-xs-12'" class="tablecontainer">
            <table class="table table-striped table-hover table-condensed">
                <colgroup>
                    <col class="col-md-1">
                    <col class="col-md-2">
                    <col class="col-md-2">
                    <col class="col-md-3">
                    <col class="col-md-2">
                    <col class="col-md-2">
                </colgroup>
                <thead>
                    <tr>
                        <th>&nbsp;</th>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Address</th>
                        <th>Attachment</th>
                        <th>Group</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="user in users">
                        <td>
                            <input type="checkbox" value="" ng-model="ctrl.checked[$index]" ng-disabled="ctrl.fileupload!==undefined" ng-change="ctrl.checkBox($index)" />
                            </td>
                            <td>{{user.firstname}}</td>
                            <td>
                                <select class="form-control" ng-model="user.selectedAddress" ng-change="ctrl.checked[$index] = user.selectedAddress.destAddress" ng-options="o as o.destName for o in user.addresses"></select>
                            </td>
                        <td>{{user.selectedAddress.destAddress}}</td>
                        <td>{{ctrl.getFile($index)}}</td>
                        <td>{{ctrl.getGroup($index)}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- USER MENU 2 DIV -->
        [...]

        <!-- USER MENU 3 DIV -->
        [...]

        <!-- BUTTONS PANEL DIV --->
        [...]

            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Close</button>
            </div>
    </div>
</div>

In every div users can fill text in some inputs and even add new input fields by press on some buttons (i omitted them in the code). I would like that every time users close the modal and open it again, the modal restores to the initial div (menu1, menu2 or menu3, depends on where users open the modal).

How can i do that?

I tried several ways (like this or this) but none does the trick for my case.

score 3 · Answer 1 · answered Dec 30 '15 at 10:53

3

I changed your code. You can see my code.

http://jsfiddle.net/deadmask92/8XCps/344/

I added:

function reset(){
    $('#myModal').modal('hide').remove();
    var myClone = myBackup.clone();
    $('body').append(myClone);
}

$('body').on('click','#myClose',reset);

$('body').on('click','#CloseIcone',reset);

and i changed:

$('body').on('click','#myReset',reset);

answered Dec 30 '15 at 10:53

L.A.

148
7

I tested it! If you must reset the modal when the user closes it, it is correct. But I didn't understand your question. – L.A. Dec 30 '15 at 11:50
What is the difference between "Close" and "Reset" button in your code? – smartmouse Dec 30 '15 at 12:03
Close and Reset are equals in my code. I don't understand your problem. Can you describe me the Close action and the Reset action? – L.A. Dec 30 '15 at 13:10
I see that they are equals, so why add 2 buttons? Anyway it is not a problem, so your code is this: http://jsfiddle.net/66ce0dja. Anyway it does not work with me, maybe because my modal div structure is different (dialog - content - header). Have you tried to apply your code to my HTML? Thank you for your help! – smartmouse Dec 30 '15 at 14:44
It didn't disappear because i was wrong with modal id. Now it works but it deletes every element in the modal. What could be the reason? – smartmouse Dec 30 '15 at 14:55
You must save the modal body and then reload the body after reset the modal. If you share jsfiddle link i can see your code. – L.A. Dec 30 '15 at 15:08
Your solution works with static html: http://jsfiddle.net/66ce0dja/1 For some reason the html dynamically generated by Angular directives make it not to work... – smartmouse Dec 30 '15 at 16:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/99318/discussion-between-l-a-and-smartmouse). – L.A. Dec 30 '15 at 16:12

Reset modal that is dynamically created

1 Answers1