Why is javascript not working in asp.net mvc view with shared/partial view

Question

I've tried adding the following script to the end of my Index.cshtml view for my Users page but it isn't being called. I've tried wrapping this in $(document).ready(function () { etc but it doesn't seem to make any difference.

<script>
    $("#UserSearch").click(function () {
        $("#usernameSearchString").text("newText");
    });
</script>

Below is the Index.cshtml view:

@model IEnumerable<CCM.Models.User>

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"> </script>

@{
    ViewBag.Title = "Users";
    ViewBag.CurrentSort = "name_desc";
    ViewBag.NameSortParm = "name_desc";
    ViewBag.DateSortParm = "date_desc";
}

<p class="h2">Manage Users</p>
<input type="text" id="usernameSearchString" placeholder = "Find by user name" class="form-input" />
<a id="UserSearch" class="CMsubmit">Search</a>
<br />
<br />
<div id="usersTable" style="overflow-x:auto;">
    @Html.Partial("_User", Model)
</div>
<script>
    $("#UserSearch").click(function () {
        $("#usernameSearchString").text("newText");
    });
</script>

As the page uses a shared view for the navigation the JQuery references have been kept there in the _Layout.cshtml shared view as follows. I found adding the JQuery reference to my Index.cshtml view caused the JQuery functions to fire twice.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - CCM</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
...navigation...
</body>
</html>

A partial view _User.cshtml is also called to populate a table, the partial view contains no JQuery references and doesn't use javascript.

The above script is just an example, the javascript/JQuery is required in the Index.cshtml view so that I can pass a search filter string to a function in the Controller in order to update the partial view with the filtered results.

However, my question is how can I get inline javascript / JQuery to work at all on my Index.cshtml view?

Your element with id="UserSearch" is a link, and you do not cancel the default action, so its redirecting (your script is executing, but you never see it because you have left the page) — user3559349
– user3559349, Commented Aug 30, 2018 at 8:13
And the element with id="usernameSearchString" is an input, so you would need to use .val(), not text() — user3559349
– user3559349, Commented Aug 30, 2018 at 8:14
Thanks both, @StephenMuecke the problem was with the .text() which needed to be .val(). Please can you add this to your answer or add a new answer and I will mark it as the accepted answer. — Fletch
– Fletch, Commented Aug 30, 2018 at 8:21

Andrei · Accepted Answer · 2018-08-30 08:18:15Z

2

Since UserSearch is the link, I believe the problem is that your script works, but then the click also triggers the default behavior of the link, so you can't notice your custom script working. You can confirm that by placing a debug breakpoint inside your script and see if the page execution stops there after a click.

Thus you need to prevent the default behavior. This is fairly standard with jQuery:

$("#UserSearch").click(function (event) {
    event.preventDefault();
    $("#usernameSearchString").val("newText");
});

edited Aug 30, 2018 at 8:18

answered Aug 30, 2018 at 8:14

Andrei

56.8k10 gold badges92 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3559349 Over a year ago

Also need to be .val() not .text()

Mark Fitzpatrick Over a year ago

Also, try wrapping it in $(document).ready() to ensure that the DOM is loaded correctly before attempting to wire up the click behavior.

Collectives™ on Stack Overflow

Why is javascript not working in asp.net mvc view with shared/partial view

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related