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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.