Bootstrap модал не обновляет содержимое и не сбрасывает форму в adminlte - PullRequest
Новая
       20

Bootstrap модал не обновляет содержимое и не сбрасывает форму в adminlte

1 голос
/ 02 мая 2019

Когда я открываю модальное с данными, закрываю и открываю снова, форма не сбрасывает и показывает старые данные, как я могу это исправить и инициализировать данные формы?

Я использую bootstrap v3.3.7 и adminlte v2

модальный html: 

<div class="modal fade" id="new" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img src="/image/loading.gif" class="loading"/>
                <span>Lodaing . . .</span>
            </div>
        </div>
    </div>
</div>

нажмите на кнопку: 

<button href="/edit/id" data-target="#new" data-toggle="modal" type="button" class="btn btn-success">Edit</button>

открытый модальный контент с пружинный башмак cotroller: 

@RequestMapping(value =  "/edit")
public String edit(Model model,
                   @ModelAttribute(value = "id") String paramId){


    if (paramId == 0){
        //open modal without data...
    }

    if (paramId != 0){
        //open modal with data...
    }


    model.addAttribute("edit", data);

    return "view/edit"; //open modal html template

}

Ответы [ 2 ]

0 голосов
/ 04 мая 2019

Очевидно, что ваш модальный контент остается включенным каждый раз, когда вы открываете и закрываете модальный. Вы должны очистить ваш модальный контент с помощью следующего кода: 

$(document).on('hidden.bs.modal', '.modal', function (e) {
    $(this).find(".modal-content").empty();
    $(this).removeData('bs.modal');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button href="/edit/id" data-target="#new" data-toggle="modal" type="button" class="btn btn-success">Edit</button>
<div class="modal fade" id="new" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img src="/image/loading.gif" class="loading"/>
                <span>Lodaing . . .</span>
            </div>
        </div>
    </div>
</div>
0 голосов
/ 03 мая 2019

Поместите это в javascript для вашей страницы, чтобы очистить модальное содержимое при закрытии: 

$(document).on('hidden.bs.modal', '.modal', function (e) {
    // Handles the event thrown when a modal is hidden
    $(this).removeData('bs.modal');
    $(this).find(".modal-content").empty();
});
...