Asp.net mvc5

Hi Guys ,

I built some webapp with MVC5 and I'm trying to implement autocomplete jquery function with no success.

The steps I did until now:
1. downloaded the Jquery UI , css and image folder and copied to my code as show in the pic below.
jquery.JPG
2. I written this code.
 $(function () {
            $("#Description").autocomplete({
                url: "/Ajax/GetItm",
                @*source: '@Url.Action("GetItm")'*@
            });
        });

Open in new window



This is the error I'm getting:

heande.JPG
LVL 1
Moti Mashiah.NET DeveloperAsked:
Who is Participating?
 
Moti Mashiah.NET DeveloperAuthor Commented:
Hi ,

After million tests and really try everything I could think of include your suggestion I have decided to create new mvc4 empty project and put this code and see if it works and it works on the empty project what bring me to the conclusion that maybe the bootstarp CSS interrupt the autocomplete process.

Here is my code on the empty mvc4 project;

@{
    
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>




<input type="text" id="search" placeholder="Search for a product" required />




<script type="text/javascript">
    $(function () {

        var availableTags = [
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];

        $("#search").autocomplete({
            source: availableTags
        });
    });
    </script>

Open in new window

0
 
leakim971PluritechnicianCommented:
currently you've also four jQuery versions instead 1.
jquery-1.10.2.js and jQuery-2.1.0.js but maybe you're including only one...

be sure to have add the script tag too :

<script src="/path/to/jquery-1.10.1.min.js"></script>
<script src="/path/to/jquery-ui-1.10.4.custom.min.js"></script>
<script>
$(function () {
            $("#Description").autocomplete({
                url: "/Ajax/GetItm",
                @*source: '@Url.Action("GetItm")'*@
            });
        });
</script>

Open in new window

0
 
Moti Mashiah.NET DeveloperAuthor Commented:
This is how my layout look like right now with the changes you suggested:
still I'm getting the same issue.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Items picture Catalog</title>
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/themes/base/css")
    <script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.4.custom.js"></script>
    <link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("ALThompson Store Catalog", "Index", "Catalog", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">

                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - ALThompson</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Moti Mashiah.NET DeveloperAuthor Commented:
This is my Index page :

i @{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@model Itemcatalog.Models.Storecatalog

<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">
            <th>Search</th>            
             @Html.TextBoxFor(m => m.Description, new { @class = "form-control" })
    </div>
    <div class="panel-body">
        <table class="table table-responsive table-bordered">
            <tr>
                <th>Department: </th>
                <td>
                    @Html.DropDownList("DepartmentName", Itemcatalog.Helper.ListHelper.GetDepartment(), new { @class = "form-control", })
                </td>
                <th>Category: </th>
                <td>
                    @Html.DropDownList("CategoryName", Itemcatalog.Helper.ListHelper.GetCategory(), new { @class = "form-control" })
                </td>
                <td>
                    <a class="btn btn-sm btn-primary " title="Search Item details" onclick="return GetSearch();" href="#">Search</a>
                </td>
            </tr>
           
            <tr>
                <td colspan="5">&nbsp;</td>
            </tr>
        </table>
        <div id="table-content" class="table-responsive">
            @Html.Partial("_StoreCatalog", Model.lstItems)
        </div>
    </div>
</div>




@section scripts{
@Scripts.Render("~/bundles/modernizr")
  <script type="text/javascript">
        function GetSearch() {
            var dep = $('#DepartmentName').val();
            var cat = $('#CategoryName').val();
            $.ajax({
                type: "POST",
                url: "/Ajax/GetStoreSer",
                dataType: "html",
                data: { dep: dep, cat: cat },
                success: function (data) {
                    $("#table-content").html(data);
                    $('#DepartmentName').val(dep);
                    $('#CategoryName').val(cat);
                }
            });
        }

        function getscatalog(dep) {
            $.ajax({
                url: "/Ajax/Getscatalog",
                data: { dep: dep },
                dataType: "json",
                type: "POST",
                error: function () {
                    alert("An error occurred.");
                },
                success: function (data) {
                    var depts = "";
                    $.each(data, function (i, dept) {
                        depts += "<option value=\"" + dept.Value + "\">" + dept.Text + "</option>";
                    });
                    $("#CategoryName").html(depts);
                }
            });
        }


        $(document).ready(function () {
            $("#DepartmentName").change(function () {
                var dep = $('#DepartmentName').val();
                getscatalog(dep);

            });

            
        });

        $(function () {
            var variable = ["One", "Two", "Three"]; 

            $("#Description").autocomplete({
                source: variable
            });

            $("#Description").attr('autocomplete', 'on'); //i found in the jquery the autocomplete is off 
        });

        function ShowPopup(id) {
            var childWin = window.open('/Catalog/ItemPicture/' + id, "Show-me-Purchase-Orders", 'dialogHeight:615px;dialogWidth:825px;center:yes');
        }
    </script>
}

Open in new window

0
 
leakim971PluritechnicianCommented:
8 and 9 are redundant, same file, oen minified (compressed)
jQuery ui need jQuery plugin

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Items picture Catalog</title>
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/themes/base/css")
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
    <link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("ALThompson Store Catalog", "Index", "Catalog", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">

                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - ALThompson</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Open in new window

0
 
Moti Mashiah.NET DeveloperAuthor Commented:
Please let me know if you meant to this:

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
    <link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
0
 
leakim971PluritechnicianCommented:
yes
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
K , I did so many testing and I couldn't make it work.

here is another pic to show the error I'm getting now. I also post the code page I have behind all this.
please , HELP :)
jquery.JPG
0
 
leakim971PluritechnicianCommented:
you create a custom jQuery ui, I believe you did not incuded the autocomplete module.

Try this first :


<script src="~/Scripts/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

Open in new window

0
 
Moti Mashiah.NET DeveloperAuthor Commented:
changed it to this and get the same error:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Items picture Catalog</title>
    @Styles.Render("~/bundles/css")
    @Scripts.Render("~/bundles/modernizr")
  
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

    @*<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
    <link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />*@
</head>

Open in new window

0
 
leakim971PluritechnicianCommented:
remove 14 and 15, its duplicate of 11 and 12
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
it is marked out

    @*<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
    <link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />*@
0
 
leakim971PluritechnicianCommented:
be sure to clear your cache, it should work else share a link to your page
0
 
leakim971PluritechnicianCommented:
would be great to publish it over internet
0
 
leakim971PluritechnicianCommented:
share it with community...

:(
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
I don't know how to do it:(
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
I found the issue by myself thanks for help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.