Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Asp.net mvc5

Posted on 2014-10-07
17
Medium Priority
?
212 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 83

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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 83

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 83

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 83

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

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 83

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 83

Expert Comment

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

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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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…
Suggested Courses

886 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