Nsryjdtyk

I am having trouble displaying information on my popup page. I created main view where the user clicks a card and it should trigger a modal to display required information (including partial view) through ajax, however that partial page should be displayed through a controller but the action result within a controller is not triggered at all despite the fact that I have specified the data-url withing my java-script function.

Here is my index page:

    <div id="pageContainer">

    <div class="container">



        <!--Boxers Cards-->

        <div class="row text-center default-div-top-padding">



            <div class="col-lg-3 col-md-6 mb-4 rounded fighter-card" id="FighterDetails">

                <a id="popup-button" data-url="@Url.Action("FighterDetails", "RankingsController")" data-toggle="modal" data-target=".fighter-modal">



                    <img class="card-img-top" src="http://nyfights.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-11-at-5.10.25-PM.png" alt="" />



                    <div class="card-body fighter-card-body-color" style="border-bottom: 2px solid rgb(255, 172, 0)">

                        <div class="card-title fighter-card-title">Vasyl Lomachenko</div>



                        <ul class="fighter-card-information">

                            <li>

                                <div class="fighter-card-information-title">Belts: </div>

                                <div class="fighter-card-information">WBA, WBO, IBF, WBC</div>

                            </li>

                            <li>

                                <div class="fighter-card-information-title">Record:</div>

                                <div class="fighter-card-information">11-1-0 9KO</div>

                            </li>

                        </ul>



                    </div>



                    <div class="card-footer fighter-card-ranking-position fighter-card-footer-color">

                        <h1>1</h1>

                    </div>



                    <input type="hidden" name="popup=title" value="Fighter Details" />



                </a>

            </div>



        </div>

        <!--Boxers Cards End-->



    </div>

</div>



<!--Modal-->

<div class="modal fade fighter-modal" role="dialog" aria-labelledby="gridSystemModalLabel">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">



            <div class="modal-header blueBackground goldBorderBottom">

                <button type="button" class="close" data-dismiss="modal" aria-label="close" data-toggle="tooltip" data-placement="left" title="close">

                    <span aria-hidden="true">

                        &times;

                    </span>

                </button>

                <span class="modal-title" id="gridSystemModalLabel"></span><br />

            </div>



            <div class="modal-body">

                <div class="container-fluid">

                    <div class="">

                        <div id="ajax-target-container"></div>

                    </div>

                </div>

            </div>



        </div>

    </div>

</div>



<script type="text/javascript">



    $(document).ready(function () {



        //AJAX Popup Control - Renders a popup with designed partial view

        $("container").on("click", "#popup-button", function () {



            //Set the URL

            var url = $(this).attr('data-url');



            //Set the title

            var popupTitle = $(this).find($('input[name=popup-title]')).val();

            $(".modal-title").text(popupTitle);



            //Set a default spinner

            $(".modal #ajax-target-container").append("<span class='blueText'><i class='fa fa-spinner fa-spin fa-3x fifteenPxSpacingRight'></i> Loading... </span>");



            $.ajax({

                type: "GET",

                cache: false,

                url: url,

                success: function (data) {

                    $(".modal #ajax-target-container").empty();

                    $(".modal #ajax-target-container").html(data);

                }

            })

        });



    });



</script>

My Partial View:

<div class="row">

@using (Html.BeginForm("", "", FormMethod.Post, new { @id = "Fighter-Details" }))

{

    @Html.AntiForgeryToken()



    <div class="card-body fighter-card-body-color" style="border-bottom: 2px solid rgb(255, 172, 0)">

        <div class="card-title fighter-card-title">Vasyl Lomachenko</div>



        <ul class="fighter-card-information">

            <li>

                <div class="fighter-card-information-title">Belts: </div>

                <div class="fighter-card-information">WBA, WBO, IBF, WBC</div>

            </li>

            <li>

                <div class="fighter-card-information-title">Record:</div>

                <div class="fighter-card-information">11-1-0 9KO</div>

            </li>

        </ul>



    </div>

}

And my controller:

    [HttpGet]

    public PartialViewResult FighterDetails()

    {

        return PartialView("~/Views/Rankings/PartialViews/FighterDetails.cshtml");

    }

Now when I click the card it will display only the top of the popup:

And that's it. Controller is not triggered at all so it's seems it is not going through the java script function but I'm not sure why.

Any help would be appreciated,
Thanks

In your JS code, it looks like you're missing the '.' before 'container' in the jQuery selector. Since 'container' is a class attribute, the proper jQuery selector is '.container'.

Try changing

$("container").on("click", "#popup-button", function () {

to

$(".container").on("click", "#popup-button", function () {