Solved

Asp.net mvc5

Posted on 2014-10-07
17
192 Views
Last Modified: 2014-10-13
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
0
Comment
Question by:Moti Mashiah
  • 9
  • 8
17 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40366782
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
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 40366827
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
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 40366832
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40366845
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
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 40366946
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40366953
yes
0
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 40367043
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40367058
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 1

Author Comment

by:Moti Mashiah
ID: 40367077
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40367124
remove 14 and 15, its duplicate of 11 and 12
0
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 40367147
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40367157
be sure to clear your cache, it should work else share a link to your page
0
 
LVL 1

Accepted Solution

by:
Moti Mashiah earned 0 total points
ID: 40367294
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40369279
would be great to publish it over internet
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40369341
share it with community...

:(
0
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 40369366
I don't know how to do it:(
0
 
LVL 1

Author Closing Comment

by:Moti Mashiah
ID: 40376634
I found the issue by myself thanks for help
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now