Why is my JS script not working on my ASPNET View? How to use my script in the correct way?

Question

I'm having problems with my JS script and I truly don't know why, because I know it's well written because it's already being used in another application.

I'm adding everything in order:

bootstrap.min.js
jquery.min.js
bootstrap.min.js

This is how I'm adding the files I need in my page


 public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {

            bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/bootstrap.min.css",
                        "~/Content/site.css"));

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-3.4.1.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-2.8.3.js"));

            bundles.Add(new ScriptBundle("~/bundles/popper").Include(
                        "~/Scripts/umd/popper.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/popper-utils.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                        "~/Scripts/bootstrap.min.js"));
        }
    }

This is my script, and I put it on the head of my _layout.html file

    <script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript">
        $(document).ready(function() {
            $("#search").on("keyup", function () {
                var value = $(this).val().toLowerCase();

                $("#div > a").show().filter(function() {                           //Select all anchor elements and show them
                    return $(this).find('a').text().toLowerCase().indexOf(value) === -1;  //Find the anchor and check if the value is substring of the text. Return true if not found.
                }).hide();                                                          //Hide all anchors that the value is not the substring of text
            });
        });
    </script>

And this is the body of my View. This is where the script should work.


<div id="accordion">
    @foreach (var item in Model)
    {
        <div class="card">
            <div class="card-header bg-dark text-light" id="headingOne">
                <h5 class="mb-0">
                    <a class="btn btn-link" data-toggle="collapse" data-target="#[email protected]" aria-expanded="false">
                        <i class="fa fa-folder-open"></i>
                        @item.directoryName
                    </a>
                </h5>
            </div>

            <div id="[email protected]" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="my-2 my-lg-0 card-body">
                    <i class="fa fa-search"></i><input class="form-control mr-sm-2 ml-2 d-inline" type="text" placeholder="Search..." id="search"> <!-- Here is where I start to use my js script. This is the input-->
                </div>
                <div class="card-body overflow-auto" id="div" style="max-height: 300px">
                    @foreach (string file in @item.fileName)
                    {
                        <a class="dropdown-item list-unstyled" href="#">@file</a> <!-- Here are the elements i'm trying to search-->
                    }
                </div>
            </div>

        </div>
    }
</div>

I wanted to create a Search filtering content, but I don't know why it's not working on my view

Are you getting any errors when you load the page? I believe the ~/ syntax only work correctly on server controls (elements with runat="server"). — Tom Faltesek
– Tom Faltesek, Commented Aug 30, 2019 at 21:11
try removing src from <script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript"> — Muhammad Aftab
– Muhammad Aftab, Commented Aug 31, 2019 at 6:46

Miguel Angel Segura Sandoval · Accepted Answer · 2020-02-18 17:30:25Z

Well, I solved this error after 7 hours at least. It was not that the syntax only work correctly with server controls. The problem was how I was calling my scripts in the first place. The script only worked with the first div. And it was because of the name I have to the id's. To solve this problem I used a little razor syntax with my script. Here's the solution:

@model IEnumerable<_3VA_MES.Models.Recipe>

@{
    ViewBag.Title = "Recipe";
}

@section scripts {
    @foreach (var item in Model)
    {
        <script type="text/javascript">
            $(document).ready(function () {
                $("#@item.directoryName").on("keyup", function () {
                    var value = $(this).val().toLowerCase();

                    $("#@item.directoryName-mydiv > *").filter(function () {                           //Select all anchor elements and show them
                        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);  //Find the anchor and check if the value is substring of the text. Return true if not found.
                    });                                                          //Hide all anchors that the value is not the substring of text
                });
            });
        </script>
    }
}


<h2>@ViewBag.Title.</h2>
<br />
<h3>@ViewBag.Message</h3>
<br />

<div id="accordion">
    @foreach (var item in Model)
    {
        <div class="card">
            <div class="card-header bg-dark text-light" id="headingOne">
                <h5 class="mb-0">
                    <a class="btn btn-link" data-toggle="collapse" data-target="#[email protected]" aria-expanded="false">
                        <i class="fa fa-folder-open"></i>
                        @item.directoryName
                    </a>
                </h5>
            </div>

            <div id="[email protected]" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="my-2 my-lg-0 card-body">
                    <i class="fa fa-search"></i><input class="form-control mr-sm-2 ml-2 d-inline" type="text" placeholder="Search..." id="@item.directoryName"> <!-- Here is where I start to use my js script. This is the input-->
                </div>
                <div class="card-body overflow-auto" id="@item.directoryName-mydiv" style="max-height: 300px">
                    @foreach (string file in @item.fileName)
                    {
                        <a class="dropdown-item list-unstyled" href="#" name="@file">@file</a> <!-- Here are the elements i'm trying to search-->
                    }
                </div>
            </div>

        </div>
    }
</div>

P.S. I won't post the _Layout.cshtml because it don't really matter. The problem was on my view.

Tom Faltesek · Accepted Answer · 2019-08-30 21:14:06Z

0

Try adding your script like this:

    <script src="~/bundles/jquery" type="text/javascript" runat="server"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#search").on("keyup", function () {
                var value = $(this).val().toLowerCase();

                $("#div > a").show().filter(function() {                           //Select all anchor elements and show them
                    return $(this).find('a').text().toLowerCase().indexOf(value) === -1;  //Find the anchor and check if the value is substring of the text. Return true if not found.
                }).hide();                                                          //Hide all anchors that the value is not the substring of text
            });
        });
    </script>

I believe the ~/some/bundle/path syntax only work correctly on server controls (elements with runat="server").

answered Aug 30, 2019 at 21:14

Tom Faltesek

2,8182 gold badges21 silver badges31 bronze badges

1 Comment

Miguel Angel Segura Sandoval Over a year ago

It didn't work. But jquery it's working without any problem on other View. So I don't think that's the problem.

Collectives™ on Stack Overflow

Why is my JS script not working on my ASPNET View? How to use my script in the correct way?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related