Bootstrap Модальное всплывающее окно в Ajax Успех гриппа sh (как тень), чем исчезнуть MVC

Question

я пытаюсь просто показать, что вставка успешно вставлена, модальное всплывающее окно внутри ajax успешно оно пытается появиться на экране, как эффект тени, и ничего не приходит, просто исчезает.

мой модал,

<!--Modal PopUp-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header alert alert-success">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">@Resource.InfromationDialog</h4>
                </div>
                <div class="modal-body">
                    <p class="success-message">@Resource.PrompSuccess </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success delete-confirm">@Resource.Ok</button>
                    @*<button class="btn btn-default" data-dismiss="modal">@Resource.Cancel</button>*@
                </div>
            </div>
        </div>
    </div>

вот мой ajax,

   $("#create").click(function(e){  
    var myModel =
                {
                    "TribeName": $('#TribeName').val()
                };

var jsonToPost = JSON.stringify(myModel);
$.ajax({
    url: '/Home/Create/',
    async: true,
    processData: false,
    data: jsonToPost,
    type: 'post',
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        if (data == true) {
            $('#myModal').modal('show');
        }

    },
    error: function (err) {
        alert('error');

    }
});
})

Почему просто мигает тень, а затем исчезает, он не появляется всплывающим

РЕДАКТИРОВАНИЕ:

вот здесь #create,

<input type="submit" id="create"  value="@Resource.Create" class="btn btn-primary" />

Answer 1

Ну, так как у меня нет доступа к вашему серверу, я буду издеваться над вызовом ajax для этого примера.

HIH

$("#create").click(function(e){ 

var myModel = {
  "TribeName": $('#TribeName').val()
};

var jsonToPost = JSON.stringify(myModel);
console.log('Sending post request...')
$.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts',
    async: true,
    processData: false,
    data: jsonToPost,
    type: 'post',
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        console.log(data)
    //in this case data is {"id": 101}, so I have to modify the IF a bit
        //if (data == true) {
        if (data.id == 101) {
            $('#myModal').modal('show');
        }
    },
    error: function (err) {
        console.log('error', err.status);
    }
});
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

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

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

<input type="submit" id="create"  value="@Resource.Create" class="btn btn-primary" />


<!--Modal PopUp-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header alert alert-success">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">@Resource.InfromationDialog</h4>
                </div>
                <div class="modal-body">
                    <p class="success-message">@Resource.PrompSuccess </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success delete-confirm">@Resource.Ok</button>
                    @*<button class="btn btn-default" data-dismiss="modal">@Resource.Cancel</button>*@
                </div>
            </div>
        </div>
    </div>