Loading a partial view in mvc using JQuery

Question

I'm trying to add a partial view to my layout using this question.

I have the following relevant code:

ShowStatistics.cshtml

 <script src="/scripts/jquery-3.3.1.js" type="text/javascript"></script>
    <script>


$(document).ready(function () {
        $('.jsload').on('click', function (evt) {
                evt.preventDefault();
                evt.stopPropagation();

            var $detailDiv = $('#detailsDiv'),
                url = $(this).data('url');

            $.get(url, function (data) {
                $detailDiv.replaceWith(data);
            });
        });
})
</script>

<div id="detailsDiv">
            <!--Content gets loaded by JQuery-->
</div>
        <button data-url='@Url.Action("Details","Statistics", new { id = Model.Id } )' class="jsload">
            Show Skills
        </button>

PlayerSkills.cshtml

@model MVC.Models.ViewPlayerSkills
@{
    Layout = null;
}
<p>HAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAH</p>
@foreach (var property in ViewData.ModelMetadata.Properties)
{
    <div class="editor">
        <label>@(property.DisplayName ?? property.PropertyName):</label>
        @Html.Display(property.PropertyName)
    </div>
}

StatisticsController.cs

        public ActionResult Details(int id)
    {
        List<Player> allPlayers = GetPlayers();
        Player pl = allPlayers.Where(x => x.Id == id).FirstOrDefault();
        ViewPlayerSkills player = new ViewPlayerSkills(pl);
        return PartialView("PlayerSkills", player);

    }

I'm getting the following error message:

Uncaught ReferenceError: data is not defined at Object.success (3:21) at fire (jquery-3.3.1.js:3268) at Object.fireWith [as resolveWith] (jquery-3.3.1.js:3398) at done (jquery-3.3.1.js:9305) at XMLHttpRequest. (jquery-3.3.1.js:9548) (anonymous) @ 3:21 fire @ jquery-3.3.1.js:3268 fireWith @ jquery-3.3.1.js:3398 done @ jquery-3.3.1.js:9305 (anonymous) @ jquery-3.3.1.js:9548 load (async) send @ jquery-3.3.1.js:9567 ajax @ jquery-3.3.1.js:9206 jQuery.(anonymous function) @ jquery-3.3.1.js:9355 (anonymous) @ 3:20 dispatch @ jquery-3.3.1.js:5183 elemData.handle @ jquery-3.3.1.js:4991

When I go to the url http://localhost:{port}/Statistics/Details/5

I do get my desired output:

You need to wrap the script in `$(document).ready()` or move the script to the bottom of the page (you are adding a handler to a DOM element that does not yet exist) — , Jun 06 '18 at 11:48
@StephenMuecke ah yes you're right, now I do get an error message let me change my question — Kev_T, Jun 06 '18 at 11:50

score 1 · Accepted Answer · answered Jun 06 '18 at 11:55

<script src="/scripts/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.jsload').on('click', function (evt) {
            evt.preventDefault();
            evt.stopPropagation();;
            $('#detailsDiv').load($(this).data('url'));
        });
    })
</script>
<div id="detailsDiv">
    <!--Content gets loaded by JQuery-->
</div>
<button data-url='@Url.Action("Details","Statistics", new { id = Model.Id } 
)' class="jsload">
  Show Skills
</button>

Loading a partial view in mvc using JQuery

1 Answers1