Modal does not rise when called by jquery

Question

After a few mistakes, I managed to make jquery work. Now I need to call Modal from inside jquery in the change of a Dropdownlist. Below my jquery.

$(document).ready(function() {
    $('#faturarParaDrop').change(function() {
        var $div = $('#modalPartial'); //exibir a modal
        var idcustomer = $(this).val(); //valor do id da dropdownlist
        $.ajax({
            url: '@Url.Action("GetDados/")' + idcustomer,
            type: 'GET',
            success: function(dados) {
                alert(JSON.stringify(dados));
                var obj = JSON.parse(JSON.stringify(dados));
                alert(obj.Nome); ?
                ? ? ? ? ? ? ? ? ? //Como chamo aqui?
            },
            error: function(erro) {}
        })
    });
});

In my View, I have the View and Modal that will be displayed, see the View below with Modal

<div class="section-page" ng-controller="EditarMarkupCtrl"></div>

<h2>Editar Fatura Para</h2>

@using (Html.BeginForm())
{
    <div class="container">
        <h2>Modal Example</h2>
        <!-- Trigger the modal with a button -->

        <div id="modal">
            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Markup!!!</h4>
                        </div>
                        <div class="modal-body">
                            <p>O Markup para o Cliente... é zero(0).</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>

        @Html.HiddenFor(m => m.OrderId)
        <div class="topo-detalhe-assinatura-pedidos">
            <ul>
                <li>
                    <label>Pedido:</label>
                    @ViewBag.Order.OrderId
                </li>
                <li>
                    <label>Forma de pagamento:</label>
                    @ViewBag.Order.PaymentMethodSystemName
                </li>
                <li>
                    <label>Status:</label>
                    @ViewBag.Order.Status
                </li>
                <li>
                    <label>Pedido criado em:</label>
                    @ViewBag.Order.CreatedOn.ToString("dd/MM/yyyy")
                </li>
                <li>
                    <label>Faturar para:</label>
                    @Html.DropDownListFor(m => m.CustomerId, new SelectList(Model.Options, "CustomerId", "Description", Model.CustomerId), new { @id = "faturarParaDrop" })
                </li>
            </ul>
        </div>


        @Html.ActionLink("Voltar", "GetOrderDetail", "SearchOrders", new { id = Model.OrderId }, new { @class = "btn btn-cinza wd-170" })
        <input type="submit" class="btn btn-verde wd-270 f-right" value="Salvar" onclick="startLoading();" />
        }

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>

If I put a button like that and call Modal, okay, it works

<button type="button" class="btn btn-info btn-lg" id="myBtn" data-toggle="modal" data-target="#myModal">Open Modal</button>

The question is: How do I call from jquery? I can’t call from the button, but from the Dropdownlist change.

Answer 1

In your HTML I did not find any element with modal id. But according to your example, this should work to display the modal within jquery no change:

$('#myModal').modal('show');

If you want to close the modal sometime later, use:

$('#myModal').modal('hide');