Search code examples
javascriptasp.net-mvcasp.net-corebootstrap-modalpartial-views

How to trigger another modal from PartialView


I'm trying to trigger another modal while im inside of the current modal. My current modal is coming from PartialView and its works well, let me show to you

enter image description here

my point is triggering to Shopping Cart when the user clicks to View Cart button which is insides of the first modal. So the first step is closing that current modal and trigger another one. Let me show to you my Shopping Cart ;

enter image description here

so i hope u guys understand what i was trying to meant it. My codes are bellowed;

The Html :

<div class="col-12 col-lg-6">
    <a href="#" class="tt-cart-total" id="currentCountOfCartForModal">
        There are 1 items in your cart
        <div class="tt-total">
            TOTAL: <span class="tt-price">$324</span>
        </div>
    </a>
        <a href="#" class="btn btn-border btn-close-popup">CONTINUE SHOPPING</a>
        <a data-target="/Base/CartPartialView/" class="sepet btn btn-border">VIEW CART</a> //That's the link which is gonna trigger to Shopping Cart
        <a href="@Url.Action("CardIndex","Payment")" class="btn">PROCEED TO CHECKOUT</a>
</div>

The Script :

<script>
    $(function () {
        $(".modal-body").on("click", ".sepet", function () {
            document.getElementById("modalClose").click();
            var url = $(this).data("target");
            console.log(url);
            $.post(url, function (data) { })
                .done(function (data) {
                    $("#modelView .tt-cart-content").html(data);
                })
                .fail(function () {
                    $("#modelView .tt-cart-content").text("Error!!");
                })
        });
    })
</script>

This is works on me like that : Gif


Solution

  • You have to wait for the modal to fully close, and then call show on your shopping cart modal, or simply just trigger a click event on your link.

    Example:

    $('#YOUR_MODAL_SELECTOR_WHICH_YOU_CLOSE').on('hidden.bs.modal', function () {
      //...
      $('a.sepet').click();
      //...
    }