Диалоговое окно не закрывается после сохранения данных через вызов ajax - PullRequest
Новая
       90

Диалоговое окно не закрывается после сохранения данных через вызов ajax

2 голосов
/ 23 сентября 2019

Я хочу закрыть диалоговое окно после сохранения данных через вызов ajax, я использовал .hide(), но он не работает.Я использовал код, чтобы скрыть его и его фон, но это влияет на прокрутку страницы.

Страница перестала прокручиваться, когда я использовал этот скрытый код

Ниже приведены сценарии, которые я используюЯ также получаю сообщение об ошибке .modal это не функция 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>


<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

Код для My-Modal 

   <div id="CommentAddPopUp" class="modal">
            <div class="row" style="background-color: #E2EFDA;">
                <div class="col-sm-12 col-md-12" style="background-color: #E2EFDA">
                    <h4><b>Add Comment</b></h4>
                    <hr style="border-bottom: 2px solid #64bcdc;" />
                    <div class="form-group row">
                        <label for="inputEmail" class="col-sm-3 col-form-label">Comment Type:</label>
                        <label for="inputEmail" class="col-sm-1 col-form-label">Public</label>
                        <div class="col-sm-2">
                            <input type="radio" name="CommentType" value="True" id="Public" />
                        </div>
                        <label for="inputPassword" class="col-sm-1 col-form-label">Private</label>
                        <div class="col-sm-2">
                            <input type="radio" name="CommentType" value="False" id="Private" class="rdPrivate" checked="checked" />
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="inputEmail" class="col-sm-2 col-form-label customLabel">Comment</label>
                        <div class="col-sm-8">
                            <textarea name="Comment" id="txtComment" runat="server" class="txtComment" style="width: 100%; margin-left: 10px" cols="80" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputEmail" class="col-sm-4 col-form-label">Mark as Customer Call:</label>
                        <div class="col-sm-1">
                            <input type="checkbox" name="CustomerCall" runat="server" id="chkCustomerCall" class="form-control chkCustomerCall" />
                        </div>
                    </div>

                    <div class="form-group row">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <div class="col-sm-2">
                            <button type="submit" class="btn btn-primary btnsavecomment" id="btnComment">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Из этого модального режима я использовал класс кнопки submit для вызова ajaxвызов то есть btnsavecomment

Ajax Call 

 $('.btnsavecomment').on("click", function () {
        var Commenttype = $("input[name='CommentType']:checked").val();
        var CustomerCall = $('.chkCustomerCall').is(':checked');

        //});
        var datas = {}
        datas.OrderNo = $('.rdPOM').val();
        datas.Comment = $('.txtComment').val();
        datas.CommentType = Commenttype;
        datas.CustomerCall = CustomerCall;

        $.ajax({
            type: "POST",
            url: "Claims_View.aspx/SaveComment",
            data: JSON.stringify(datas),
            contentType: "application/json; charset=utf-8",
            dataType: "json",

            success: function (response) {
                debugger
                var ClaimID = $(".hdnClaimId").val();
                var OrderNo = $('.rdPOM').val();
                Allfunctions(ClaimID, OrderNo);
                $('#CommentAddPopUp').hide();
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
               // $("#CommentAddPopUp").hide();
                //$(".jquery-modal").hide();
                $('.txtComment').val('');
                $('.chkCustomerCall').prop("checked",false) 
                $(".rdPrivate").prop("checked", true);
                //$('#CommentAddPopUp').modal('toggle');
            },
            failure: function (response) {
                alert(response.d);
            }
        });

return false;
    });

1 Ответ

0 голосов
/ 23 сентября 2019

Используйте jQuery, чтобы скрыть модал, используя тот же селектор, который открывает модал.Посмотрите здесь: https://getbootstrap.com/docs/3.4/javascript/#modal-hide

...