{"id":1380,"date":"2022-08-30T15:16:03","date_gmt":"2022-08-30T15:16:03","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/15\/twitter-bootstrap-typeahead-gon-gem-and-passing-data-from-model-into-js-in-json-format-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:16:03","modified_gmt":"2022-08-30T15:16:03","slug":"twitter-bootstrap-typeahead-gon-gem-and-passing-data-from-model-into-js-in-json-format-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/twitter-bootstrap-typeahead-gon-gem-and-passing-data-from-model-into-js-in-json-format-collection-of-common-programming-errors\/","title":{"rendered":"Twitter Bootstrap Typeahead gon gem and passing data from model into JS &#8211; in json format-Collection of common programming errors"},"content":{"rendered":"<p>I would like the names of my &#8216;firms&#8217;to be passed into an auto completing typeahead on a form.<\/p>\n<p>I am using twitter bootstrap and the gon gem to pass the data into Json and make it available to the js.<\/p>\n<p>However i cannot get the field to respond, i dont think that the data is available to the form and do not understand why.<\/p>\n<p>my firms controller does the following assigning the names of the firms to a gon variable.<\/p>\n<pre><code>gon.firms = Firm.all.map &amp;:name\n<\/code><\/pre>\n<p>My Application.html.erb has the following in its header to make the gon variable available to js.<\/p>\n<pre><code>\n\n    jQuery(document).ready(function() {\n        $(.typeahead).typeahead({source:gon.firms});\n    });\n    \n<\/code><\/pre>\n<p>Then I have the form that I would like assign the typeahead to, I have assigned the class=&#8221;typeahead&#8221; to it.<\/p>\n<pre><code> 'get', :class =&gt; 'typeahead'  do %&gt;\n 'input-medium search-query', :placeholder =&gt; 'Firm name' %&gt;\n nil ,:class =&gt; 'btn' %&gt;\n\n<\/code><\/pre>\n<p>Finally the application.js file the relevant jquery as per the twitter bootstrap documentation.<\/p>\n<pre><code>$(function() {  \n    $('.typeahead .input-medium search-query').typeahead({source:[gon.firms]});\n}\n<\/code><\/pre>\n<p>My application .js also has the following libraries<\/p>\n<pre><code>\/\/= require jquery\n\/\/= require jquery_ujs\n\/\/= require jquery-ui\n\/\/= require twitter\/bootstrap\n\/\/= require_tree .\n<\/code><\/pre>\n<p>I have checked that gon.firms is available as a variable, but the dev console has the following error<\/p>\n<pre><code>uncaught syntax error: Unexpected token\n<\/code><\/pre>\n<p>any ideas what may be causing this?<\/p>\n<p>Is there anything obviously wrong?<\/p>\n<ol>\n<li>\n<p>First make sure <code>gon.firms<\/code> is populated as you expect (check in your web dev tool console). Then while you&#8217;re there make sure there aren&#8217;t js errors as you type in the box. Finally, as per the docs, it looks like you want to attach the plugin to the text field, not the form:<\/p>\n<pre><code>$('.typeahead .search-query').typeahead( { source: gon.firms } );\n<\/code><\/pre>\n<\/li>\n<li>This is because gon.firms is a ruby array not a js array.\n<p>You can tranfer a string to js and then split it to a array like this:<\/p>\n<pre><code>$(function() {\n    var col = \"\".split(\",\");\n    $(\".search-query\").typeahead({ source: col });\n});\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2013-11-15 09:07:32. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>I would like the names of my &#8216;firms&#8217;to be passed into an auto completing typeahead on a form. I am using twitter bootstrap and the gon gem to pass the data into Json and make it available to the js. However i cannot get the field to respond, i dont think that the data is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1380","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1380"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1380\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}