locked
Autocomplete Not working - Errors RRS feed

  • Question

  • User982203039 posted

    I have a autocomplete view that I could not get working.

    If I add this to my page:

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    I get the error message: Object doesn't support property or method 'autocomplete'

    So I figured out if I remarked out in the _layout view

    @Scripts.Render("~/bundles/jquery")

    the autocomplete works as desired - with the remark in the _layout page some of my other pages give me an error:  Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4

    I think I have a jquery conflict but have no idea how to fix. Any suggestions would be great!

    C

    Wednesday, August 28, 2019 9:37 PM

All replies

  • User-474980206 posted

    you layout script includes probably come after the page includes. the layout should have a script section that comes after the bundle includes. the pages should use this script section. viewing source of the page will show what order scripts where included in.

    also: jquery-ui is not compatible with bootstrap. you should get a bootstrap autocomplete

    Wednesday, August 28, 2019 10:32 PM
  • User475983607 posted

    This is a pretty simple fix.  Just update the jQuery bundles to reference the jQuery library and jQuery UI library you want.   You can get the library files by downloading form the jQuery site or use NuGet.   Perhaps learn about bundling so you understand the basics and understand what you trying to do. 

    https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

    Wednesday, August 28, 2019 10:36 PM
  • User-719153870 posted

    Hi Baze72,

    This kind of problem is usually caused by repeated references to jQuery files

    @Scripts.Render("~/bundles/jquery")

    This code in _layout view has already added a reference to your local jQury file which you can find in your App_Start folder - BundleConfig.cs.

    Please try to remove below reference in your current view and retain another reference to jQuery-ui, then try to browse this view again to see if it can work.

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

    Best Regard,

    Yang Shen

    Thursday, August 29, 2019 3:17 AM
  • User982203039 posted

    I am still learning about Jquery - how do I tell what version I have and what I need?

    Also removing

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

    did not fix the issue.  I then get: Error: 'jQuery' is undefined

    Here is the view:

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    
    }
    
    
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    

    Thanks

    Thursday, August 29, 2019 12:43 PM
  • User475983607 posted

    Baze72

    I am still learning about Jquery - how do I tell what version I have and what I need?

    The version is in the file name.

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

    It's up to you to determine what version you need.  Open any jQuery dependent library file and read the comments at the top.  Or go to the support site for the individual libraries and read the specs.

    As suggested above, you might want to use a Bootstrap autocomplete library rather than jQuery UI.

    Thursday, August 29, 2019 2:05 PM
  • User982203039 posted

    I am looking into Bootstrap autocomplete now. Do you know if any good examples? I just need a simple one to query a SQL database.

    Thursday, August 29, 2019 3:50 PM
  • User-719153870 posted

    Hi Baze72,

    how do I tell what version I have and what I need?

    @Scripts.Render("~/bundles/jquery")

    This code will make the reference to your local jQuery file which you can find in your project - Scripts folder like below:

    You can see the version is the number just right behind the "jquery-".

    Error: 'jQuery' is undefined

    This error is usually caused by lost reference to jQuery file or wrong version ( jQuery is not defined ) as you said "Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4", maybe you should check it.

    As for the example about using bootstrap autocomplete to query a SQL database, you can find a lot articles or tutorials about this subject, here's one:

    Bootstrap AutoComplete TextBox example using jQuery TypeAhead plugin in ASP.Net with C# and VB.Net

    Best Regard,

    Yang Shen

    Friday, August 30, 2019 1:40 AM