0

I have integrated jQuery UI's autocomplete with Rails using the link below:

http://www.lugolabs.com/articles/20-jquery-ui-autocomplete-with-ruby-on-rails

For some reason I am getting this error:

Uncaught TypeError: Cannot set property '_renderItem' of undefined
    at app.PopularSchools._initAutocomplete (inner_layout.self-7e73ad8….js?body=1:231)
    at app.PopularSchools (inner_layout.self-7e73ad8….js?body=1:220)
    at HTMLDocument.<anonymous> (inner_layout.self-7e73ad8….js?body=1:213)
    at fire (jquery.self-bd7ddd3….js?body=1:3233)
    at Object.fireWith [as resolveWith] (jquery.self-bd7ddd3….js?body=1:3363)
    at Function.ready (jquery.self-bd7ddd3….js?body=1:3583)
    at HTMLDocument.completed (jquery.self-bd7ddd3….js?body=1:3618)

My application.js file:

//= require inner_layout/jQuery-2.1.4.min
//= require rails-jquery-tokeninput
//= require inner_layout/bootstrap.min
//= require jquery_ujs
//= require inner_layout/jquery.mCustomScrollbar.concat.min
//= require inner_layout/app.min
//= require inner_layout/owl.carousel.min
//= require jquery.remotipart
//= require jquery-ui
//= require cocoon
//= require autocomplete-rails
//= require moment
//= require bootstrap-datetimepicker
//= require ../common_js/custom
//= require jquery-ui/widgets/autocomplete
//= require tinymce
//= require common_js/jquery.raty.js
//= require_self

The complete code is:

$(function () {
    new app.PopularSchools;
});

var app = window.app = {};

app.PopularSchools = function () {
    this._input = $('#search-txt');
    this._initAutocomplete();
};

app.PopularSchools.prototype = {
    _initAutocomplete: function () {
        this._input
            .autocomplete({
                source: 'popular_schools/get_all_schools',
                appendTo: '#search-results',
                select: $.proxy(this._select, this)
            })
            .autocomplete('instance')._renderItem = $.proxy(this._render, this);
    },
    _render: function (ul, item) {
        var markup = [
            '<span class="name">' + item.name + '</span>',
        ];
        return $('<li>')
            .append(markup.join(''))
            .appendTo(ul);
    },
    _select: function (e, ui) {
        $("#id").val(ui.item.id);
        $("#type").val(ui.item.type);
        this._input.val(ui.item.name);
        return false;
    }
};

Edit: Per comments added <head></head> contents:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <link rel="shortcut icon" type="image/x-icon" href="/assets/favicon-fc4de0140d07a7fb9ab4f50fa2e0f48d215231c90c716a0109942cb07ec4459e.jpg">
  <title>Site Title</title>
  <link rel="stylesheet" media="all" href="/assets/common_css/bootstrap.self-8eed0a962b1f6cd0dee143c17da4398c45c23dda6b4a036e98cd700010aaa12e.css?body=1">
<link rel="stylesheet" media="all" href="/assets/common_css/bootstrap-flex.self-b3cbfd57f1adb9aa0f7d0bf99f76ef8eda3f57482eb4dfe5b0c7799f863bf4a5.css?body=1">
<link rel="stylesheet" media="all" href="/assets/jquery-ui.self-80de8350e5025ebca2c2899295a636ec9bd4608f09787334c5c92c102fff5939.css?body=1">
<link rel="stylesheet" media="all" href="/assets/token-input-facebook.self-5074a1bc7f07d8d2125d9c63eae7450c5ad544c9fdf8f29a016eb1ad704a738b.css?body=1">
<link rel="stylesheet" media="all" href="/assets/daterangepicker.self-3ac07b1b1cacfb4e8ec02be3bf11cbb672db20240ac86ea331391451e5fd2cdb.css?body=1">
<link rel="stylesheet" media="all" href="/assets/prettify.self-f2a5364acbaf236a6fd79eca52d2b47063b66aebb2381bb9688cfa40ae1246bf.css?body=1">
<link rel="stylesheet" media="all" href="/assets/jquery-ui/theme.self-830c3407ba1359ea36eee978235be14de5b78dacfa658a31226fe4f2b0faa7e7.css?body=1">
<link rel="stylesheet" media="all" href="/assets/jquery-ui/autocomplete.self-f0b810a4a7bb8c90994675d7c5bfe636d615a5785cf81cae3340aa5e6adc55ca.css?body=1">
<link rel="stylesheet" media="all" href="/assets/common_css/font-awesome.min.self-053e8e59e362ea6dfaaa1d47542e9ac73bb508aaa8a108e78a5af17c78b28f79.css?body=1">
<link rel="stylesheet" media="all" href="/assets/common_css/material-design-iconic-font.min.self-0721df3f25a30e97b682c1ae0404435c893068dd3b51ee6947a762965d419569.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/jquery.mCustomScrollbar.self-222a444a523a37f06879d29860c9757240e74d1770b219a6a9ad00676e9d3445.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/weevur.self-717c50da898a613886688634a4131f7a63b4b747feda890032a779e756263ead.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/weevur-theme.self-20b31bcd58caa9be715480411040758dd09ae37734ed64c06be62797e707a061.css?body=1">
<link rel="stylesheet" media="all" href="/assets/style.self-0acb00764e0eb2fad99b783ee67311c94aef7d46add583515a4d09cc8ee828e4.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/inner_layout.self-b57a4eaaabb432402eb122602acd085692f2d94eb274d1eabbfb06b2ce3b671e.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/_color-variable.self-a7d19b357431705284de31486cf7e915f9513f6e01633a475743b7252197b23f.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/owl.carousel.min.self-6570efd06433eaf06c957ee48fb13c1d97f89b239526aa5e4f1b8f9ca10ccbe1.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/owl.theme.self-3e80d06e340350c29e5ed031a85f9529dbea92d25d960ae4c7cfcd31ea1b722b.css?body=1">
  <script src="https://js.pusher.com/3.2/pusher.min.js"></script>
    <script>
      var pusher = new Pusher('34c0cdbc218bac1d4dac', {
        encrypted: true
      });

      var channel = pusher.subscribe('channel-' +70);

      channel.bind('notification_event', function (data) {
        $("#notification").fadeIn("slow").html(data.message + "<span class='dismiss'><a title='dismiss this notification'>X</a></span>");
        $("#notification_drop").prepend("<li class='notices'><a href=" + data.url + ">" + data.message + "</a></li>");
        $("span#notification_count").text(parseInt($('span#notification_count').text())+1);
        $("span.badge").text(parseInt($('span.badge').text())+1);
        $(".dismiss").click(function () {
          $("#notification").fadeOut("slow");
        });
      });
    </script>

  <script src="/assets/inner_layout/jQuery-2.1.4.min.self-92bfaaece1eee1e40fd3b55441ee536e7f6a03242aa5fe10e2597a27103c9dae.js?body=1"></script>
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/jquery.tokeninput.self-b727cdd4b322bd427f485dd21b9248b710f4ce186350c53b3c35ef515264ed2d.js?body=1"></script>
<script src="/assets/rails-jquery-tokeninput.self-2b46449b4d53a7134ff76a0a5abaf2a66b3f223ce373498d131468ab6944c634.js?body=1"></script>
<script src="/assets/inner_layout/bootstrap.min.self-504d59678f10d79a661b6cecdce5b8c1d5bfd98e860614584c0a40399552d61f.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/inner_layout/jquery.mCustomScrollbar.concat.min.self-682cbac60ea68d85ee1d08249eb4c1a73b83e659f5ad8dde9406d06715d88b0b.js?body=1"></script>
<script src="/assets/inner_layout/app.min.self-7175e52be5d1868e9c02087f9030953eaadcb4c11b35feb69f48afa29e6b5ce5.js?body=1"></script>
<script src="/assets/inner_layout/owl.carousel.min.self-1a656d9fbdd97437fabb09a673bcfbd8dcd61704a72fe5ce95bd52799a9afab7.js?body=1"></script>
<script src="/assets/jquery.iframe-transport.self-b58640d2146e10a028d4aec4f1c6e624305f8b5edd02cbb5ca77f7fb56b4d976.js?body=1"></script>
<script src="/assets/jquery.remotipart.self-1660679e325ee534ce863e680eb6ad0bc9739d262594dc1337a2171e5c19c939.js?body=1"></script>
<script src="/assets/jquery-ui/version.self-c8e3d1203da26ea7efdf83c1eabb3f0ba55cb68e463f5ccf0d77bd15ce6a8e61.js?body=1"></script>
<script src="/assets/jquery-ui/data.self-2067c82e6fe39a9cba5623206a5dc28d5c60d26b95cd100855b78cacf72865b8.js?body=1"></script>
<script src="/assets/jquery-ui/disable-selection.self-5675f71f2fbbc6857ea700ba843af748b50dbc0150cc87932a7d05ec016bb659.js?body=1"></script>
<script src="/assets/jquery-ui/focusable.self-426e99e67d1f1bd4cb444fd878ee63a6de1f5d1d61451e43022c86214b9eec64.js?body=1"></script>
<script src="/assets/jquery-ui/form.self-711978b53107be2d9ef1b7369beb151b229cefa8c1405a056d3c34262d5b477e.js?body=1"></script>
<script src="/assets/jquery-ui/ie.self-163eb039dcb1e0c3471b7d91386eabb8753da6906e84824c019f9ff56bdb83a6.js?body=1"></script>
<script src="/assets/jquery-ui/keycode.self-ad63cd20acf49dd333bbbc537454d7d475bd610eb5b88de0dca009f0c3d314b1.js?body=1"></script>
<script src="/assets/jquery-ui/escape-selector.self-43e4d61501e4ffb1ecba387affbae1eb3e1c863ab0b0e71897851cddd246e50e.js?body=1"></script>
<script src="/assets/jquery-ui/labels.self-c0448a3cb597a9a9429be814ab0e9ed2a14d85604555b4cff897adf3f0415f38.js?body=1"></script>
<script src="/assets/jquery-ui/jquery-1-7.self-22c197e38fc01a29431530c4c5c7263e26d2b611994b1f9c5c8c900a97b4bc44.js?body=1"></script>
<script src="/assets/jquery-ui/plugin.self-d8f576c8e073ca51f095505f47bd09d306b875404cd90afcbb6338287cfb0247.js?body=1"></script>
<script src="/assets/jquery-ui/safe-active-element.self-a1f1a1a7dae3269ce03f6fffb2dcc9b4a7490f5d546c65d54417bec3be24b668.js?body=1"></script>
<script src="/assets/jquery-ui/safe-blur.self-2cc24c46132d51c7724f6371154241b0a81c9bae5d5681d8f62b01ce46236726.js?body=1"></script>
<script src="/assets/jquery-ui/scroll-parent.self-38e26a71a450a29fb63425e8f589a7046862f927eb0a1dbf6a6c44da05196d2e.js?body=1"></script>
<script src="/assets/jquery-ui/tabbable.self-f3f62ceed772d3a325cebd6a03221f8a8cb02c6150f4feba738c6525a2953690.js?body=1"></script>
<script src="/assets/jquery-ui/unique-id.self-66e85ac85cd0b6b8b1bb89369fc65f608f716869dc0930862a8d421a57a9580a.js?body=1"></script>
<script src="/assets/jquery-ui/core.self-886760af898381620a8980841c646ae70e894b5292c3138e6dfd75b6904deffb.js?body=1"></script>
<script src="/assets/jquery-ui/effect.self-776455da1682afff3a4974146aa96ca840597b879ed3797af0604063527443c6.js?body=1"></script>
<script src="/assets/jquery-ui/form-reset-mixin.self-3a447942586b5719fdd7f1d1a3ac0da9e757a0eb8f4a7cb145f6deb820d2dc54.js?body=1"></script>
<script src="/assets/jquery-ui/position.self-1b49c8c521e67a4a88bfdad6b4d944d33686d25009a0e40a1e170acdd7b6962a.js?body=1"></script>
<script src="/assets/jquery-ui/widget.self-fca20bcec06d192f97cffa6e734e24360e227237b8ae7d7e7e60754df7d5444f.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-blind.self-2f8923f5c3073717dad35ac1f9bd4dbc13d2f9c8128f7dbea9819921338271f4.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-bounce.self-ca3686abc7c667b5380422af36b618923c2fc8e901b3eb2ff627f1cdef60486a.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-clip.self-9e606afd1b0d1679f42b1ce5c2ad29f242ed98a9b1a473a9ef8a8bf10df2afe4.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-drop.self-481600061a28b5621b1d78187468e63f057665ce6af6401db851f9b79e345965.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-explode.self-b5f68a634df4bc19111474eb15bcd99597dc19c721b33647fbb04f2bb6d52ca3.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-fade.self-60febf4d2a1f6f013852a42da59c74d840f205715162a2b11e734fd4dd73a519.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-fold.self-78adc6cc7f2d8dac25e8c82164ae61cc3160bb5280ed3d24dd96a576e37a6e46.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-highlight.self-842a0db414abed8fbccb48908bd933b32c93c6b9d725160c85dc2bde708fa753.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-size.self-2094878ac7ba38dcd4539cd4595fa4d6ed7182be8bb6f03785684a5e470a293d.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-scale.self-88872e591cdbf30b3d09946e82e96e25bcd99b03857ead844a503301e6de71f3.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-puff.self-be0ba8a98762bf10054deb4e8bdf92c44de0d570714624d16c396f1ffe3a82d6.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-pulsate.self-bf83d1979be265f242fceb95cc3cfeca5467e4aab9cdea27ebb6f2e17bdaae2e.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-shake.self-867270f4e72f7895d38b10fdf9a6ba20f22bee88ac4d79654a9227c14141e1ca.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-slide.self-b59b0b36df7b3e5e4f4190ab51e5c212744d2b34d5ed14c96bfe9c8a3096c00b.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-transfer.self-5ab6d30ecb0b73e2b9a528f6d66c0732ba43a93a5326d88dae547f0c7c759e79.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/accordion.self-267aabfe487e53fce0399a77f9030a87b9d8a409eb30c4c85c5637da9ac35429.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/menu.self-0730fe713007bd93e6db569352a20ed92448299505ff6f525bc0dc6dd488254e.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/autocomplete.self-6a89d7a43741ec810ef95de143a7c0297e2e4368ebecff64493ebb7a9ac3a524.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/controlgroup.self-0b7409f97114a33de116bd5429e9df199cbdea3f276d8bd725c4c2c60f244711.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/checkboxradio.self-60f68cb16012ef210c931076ada2d65d54a8c74a2dc71ce383af758460f8b686.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/button.self-659b51f6fb5303f90ed8cf551509063770a50168a15795ba834b08f8bf2e0ce0.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/datepicker.self-2af0dec09da99d687c31fc224e940687a4eb3694e7b38b0871bba475cad86120.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/mouse.self-f0790a202dcf54fab051e71b042335d5346f9cceb0f645223c1dab93f349a04b.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/draggable.self-42c3eda0b49f105628cea7580fe38c7ed77467cee384bb2c4e095a2bd0a172e6.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/resizable.self-1a46c2f5b876918e02bf979080e56f57846590cd880721bca5058e84f7f60bae.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/dialog.self-2bd687f9580c0be4213c50b4bb1211c28ceedb045eba954e63d40bfbb4d1affd.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/droppable.self-4e3be0d7524dd1852e3b37ae00cd0c351c6178bcad39b17315cca941ddd44148.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/progressbar.self-3bf965ce4e8ade2f07336ae5ffce7fe58897333238561761ffcb16f31af673fc.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/selectable.self-a364da09c555890f5bb64704711594a88e94988edb285735bda59431a749226e.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/selectmenu.self-43e0fc6b5fba037933a7d89a5b2a7127aa9c7494cc605c2dcd3146265e2d3d35.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/slider.self-f166e8b345d6a2376ab8f43b05ab7629016706df83f2d96113cf5d8905c3d028.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/sortable.self-6e5e1f07a29b5a89ec1d359363d2800904e3ae548a38ab2f8eded36746d1adbe.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/spinner.self-2769386b6b06e175a13ccdcd6d2d0cd40c45cec19607bcb818cee0704c165557.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/tabs.self-b7f60535e992224ca66c3f11dc943eba9ef42a9605241e27b9dba24c7efb287e.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/tooltip.self-50ae9488af573c99a78b60209bce5c7a4affc4e175fef523942acb163dd8deb8.js?body=1"></script>
<script src="/assets/jquery-ui.self-d4c1ae19d9b853ec1c8c83784fa979bbe4075a84932a080bbd7d7706240410e1.js?body=1"></script>
<script src="/assets/cocoon.self-6874ad698cefd21cc1119b773550f61b5c1a60396460f015222af59293affe80.js?body=1"></script>
<script src="/assets/autocomplete-rails.self-5d8d93a5f6e19ab6e682b9dd9999592b61ff3c3d69ea242a830a8556158001fa.js?body=1"></script>
<script src="/assets/moment.self-0da3eb4ebf8fb8c3113d89afb90e5b7a87760d21b5b39a405a51fe05c8e40fd8.js?body=1"></script>
<script src="/assets/bootstrap-datetimepicker.self-8b304d8493b536f56ff5f3a0cba6238693fb968d72400f3f794b7196c9f5a47f.js?body=1"></script>
<script src="/assets/common_js/custom.self-a29ebf4c7dcdfb350f3a879097b570cc1b032e4a8fb8115a235243ad937ea469.js?body=1"></script>
<script src="/assets/tinymce/preinit.self-84328a53e798df12f891eb49871773fd9f925439c8630e9e22423a82ef9e6f89.js?body=1"></script>
<script src="/assets/tinymce/tinymce.self-53684479d33d944177c9037e73854f0a1eb0fa64c5657dedcf4f1aa04b959145.js?body=1"></script>
<script src="/assets/tinymce.self-75a11da44c802486bc6f65640aa48a730f0f684c5c07a42ba3cd1735eb3fb070.js?body=1"></script>
<script src="/assets/common_js/jquery.raty.self-628421be04f36f7a8fa8b9b884c6d7824d6f8bdeba4f172b131f15aa63f713e8.js?body=1"></script>
<script src="/assets/inner_layout/inner_layout.self-d4064f8473922f8fa4cce0e23e1195e4f5d2cc1a4e55bdd3c981fbd7a10b27ea.js?body=1"></script>
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="TT0D01RZkj4Ox7IFyrBvPSXboqLHXdnJfRjrq5UNpnalRkODkR2icapP7DbWGNSiITNrGWo7h5uBxJW+xpmRVg==">
<link type="text/css" media="screen" rel="stylesheet" href="https://static.opentok.com/webrtc/v2.10.2/css/TB.min.css"></head>
Improve this question
11
  • I've setup a basic test to see if I can replicate the issue, and I have so far: jsfiddle.net/Twisty/pw5cvghr I get a similar error trying to init autocomplete. Investigating.
    – Twisty
    Commented Feb 24, 2017 at 19:54
  • Found my typo in the selector, and have a now working example that does not replicate the issue: jsfiddle.net/Twisty/pw5cvghr/3
    – Twisty
    Commented Feb 24, 2017 at 20:09
  • I got this to run without proxy: jsfiddle.net/Twisty/pw5cvghr/4 and with: jsfiddle.net/Twisty/pw5cvghr/5 Still unable to replicate the issue. I wonder if something is causing the jQuery UI to not load properly in your setup. Do you see any errors in your console? Can you update your post with the head details of the resulting page?
    – Twisty
    Commented Feb 24, 2017 at 21:45
  • @Twisty massive thanks for your replies. The only error I see is something like: Uncaught TypeError: Cannot set property '_renderItem' of undefined. Sorry, head details means? So I will add them as well. :-)
    – user5084534
    Commented Feb 25, 2017 at 7:01
  • The content in your <head> tag of the resulting html
    – Twisty
    Commented Feb 25, 2017 at 7:57
Related questions
3
Error with jquery-autocomplete in rails
0
Help with JQuery Autocomplete
1
.autocomplete is not a function
Load 7 more related questions Show fewer related questions

0

Reset to default