There is a modal window, when I click on the button, I open it and perform some actions that I need and close it. The idea is that every time you open a popup window by default, without any values. I implemented the idea with values through map , but did not think in advance that I would work with attributes, that is, delete / add classes, etc. How best to organize it?
I tried to get the whole html modal window when loading the page and replace the contents before opening it, but the stylized drop-down lists stopped working and the date selection fell off for some reason.
<div id="modal-1" class="modal-1 modal styled-2 track-modal"> <div class="modal-content"> <h4>Track panel</h4> <i class="modal-action modal-close btn_close icon-close"></i> <div class="modal-body"> <div class="row"> <form id="book-time-form"> <div class="col s12"> <div class="wrapp-input "> <select name="reason" class="m-styled v-reason"> <option value="">Choose action</option> <?php if($reasons) : foreach($reasons as $reason) : ?> <option value="<?php echo $reason['id']; ?>"><?php echo $reason['name']; ?></option> <?php endforeach; endif; ?> </select> </div> </div> <div class="col s6"> <div class="wrapp-input"> <input type="text" name="start_date" class="datepicker-from input-val v-start-date" placeholder="From"> <i class="add-icon to-right icon-calendar"></i> </div> <div class="wrapp-input"> <input type="text" name="end_date" class="datepicker-to input-val v-end-date" placeholder="To"> <i class="add-icon to-right icon-calendar"></i> </div> </div> <div class="col s6"> <div class="wrapp-input"> <select class="m-styled v-first-part" name="start_part"> <?php if($day_parts) : foreach($day_parts as $key => $part) : ?> <option value="<?php echo $key; ?>"><?php echo $part; ?></option> <?php endforeach; endif; ?> </select> </div> <div class=" wrapp-input "> <select class="m-styled v-second-part" name="end_part"> <?php if($day_parts) : foreach($day_parts as $key => $part) : ?> <option value="<?php echo $key; ?>"><?php echo $part; ?></option> <?php endforeach; endif; ?> </select> </div> </div> <div class="col s12"> <div class="wrapp-input"> <textarea name="reason_message" placeholder="Reason (optional)"></textarea> </div> </div> <div class="col 12"> <button id="book-time" type="button" class="btn mt-25 bg-blue w-auto ">Send request</button> </div> <div class="col 12 hide already-exist-error">Some days are already noted in this period</div> </form> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-forgot --> Solved the problem with the Jsrender template Jsrender . The pop-up window itself was placed in the tags as a template and before each call I create anew this modal window.
var modalTpl = $('#modal-tpl'); var result = modalTpl.render({}); $('#modal-1').html(result); datepickerInit(); initializeSelect(); $('#modal-1').openModal(); 
