CODEWITHSUNDEEP
jqueryasp.net-mvc-4twitter-bootstrap
NoviceToDotNet
NoviceToDotNet

Reputation: 10807

How to open a bootstrap modal pop up on ajax.action link?

I am creating an ajax.actionlink like below bor my bootstap pop up but insted of opening it in a pop up it redirect to an url saying controller/action

My code is as below

   @Ajax.ActionLink("CheckOut", "CheckOut", "Home", null, new AjaxOptions
            {
                HttpMethod = "Post",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "myModal"
            }, new
            {
                @class = "btn btn-primary btn-lg",
                @id = "chkOut"
            })

  $(document).ready(function () {
        $("#chkOut").attr('data-toggle', 'modal')
    });

Upvotes: 1

Views: 7316

Answers (2)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

Use OnComplete property of Ajaxoptions like this:

 @Ajax.ActionLink("CheckOut", "CheckOut", "Home", null, new AjaxOptions
            {
                HttpMethod = "Post",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "myModal",
                OnComplete = "ShowPopup",
            }, new
            {
                @class = "btn btn-primary btn-lg",
                @id = "chkOut"
            })

Here is function which will be called on Complete of ajax call of action link:

function ShowPopup()
{
    $("#chkOut").attr('data-toggle', 'modal');
}

Upvotes: 2

Vishal Sen
Vishal Sen

Reputation: 1175

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>

            </div>
            <div class="modal-body"><div class="te">Please wait...</div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                @*<button type="button" class="btn btn-primary">Save changes</button>*@
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


{<script>
    $(document).ready(function () {         


        $("body").on("click", "a.dialog-window", null, function (e)
        {

            e.preventDefault();


            var $link = $(this); // Reference to <a/> link
            var title = $link.text();// this is title to fetch in htnl    
            $('#myModal .modal-title').html(title);

            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $('#myModal').modal('show');
            }
            else
            {

                $.get(url, function (data) {
                    $('#myModal .te').html(data);
                    $('#myModal').modal();
                }).success(function () { $('input:text:visible:first').focus(); });

            }

        });
    });

</script>}


{
  @Html.ActionLink("Profile II", "Create", "PatientProfile", new { id = item.PatientId }, new { @class = "dialog-window" }) 
}

Upvotes: 1

Related Questions