I'm trying to set up my app to have autocomplete options in text fields for my forms. So far, I've been able to successfully seed db and index through the Algolia dashboard. I can see my records are syncing correctly, so I know everything is good on the backend.
I'm now trying to implement the easiest possible way to get autocomplete on the homepage of my app. The page itself is a simple, static page with a basic page controller.
I've followed the setup instructions for autocomplete on github but haven't been able to get it to work. Here's what I currently have set up.
home.html.erb
<div id="autocomplete" class="border"></div>
<script src="https://cdn.jsdelivr.net/npm/#algolia/autocomplete-js"></script>
<script>
const { autocomplete } = window['#algolia/autocomplete-js'];
</script>
As far as I'm aware, this should work with no issue. But nothing displays, except the border class. I also tried the yarn install method but it also didn't seem to work.
In application.js,
import "#hotwired/turbo-rails"
import "./controllers"
import { autocomplete } from '#algolia/autocomplete-js';
const autocomplete = autocomplete({
container: '#autocomplete',
// ...
});
//= require jquery
//= require jquery_ujs
But when I keep that in there, as well as the can script on my home page, I get the error: Uncaught SyntaxError: Identifier 'autocomplete' has already been declared so as far as I can tell I've implemented it all correctly. I'm completely stuck here - if anyone has any insight, please let me know!
Related
I am really wanting to know how to integrate jqTree as a webpacker webpack in my Rails 6 application
UPDATE:-
Using yarn add jqtree seems to have magically cleared up most of my issues however I am currently facing tree is not a function error
I am using the Ancestry gem to organise menu items and I need a drag and drop javascript tree view solution that will work nicely with the Ancestry gem. I have picked on jqTree as my desired solutions but I am happy to be persuaded to use an alternative as there seem to be a lot around but initially I would just like to be able to at least get a tree view working within Rails 6
Presumably I have to start by setting up jQuery, for which there are plenty of resources on how to do this so I guess this is more about how to get any jQuery component up and running in a Rails 6 app
I guess I'll have to start with a jsx file and import some stuff and import some css into application.scss but just what this should look like I really am unsure of
So far I have setup jQuery according to the instructions here https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker
I can confirm with a simple alert that this is all hooked up and working
I have made some more progress
Instead of downloading the jqTree files, I have used yarn to install jqTree
replacing
I have downloaded the jqTree files and unpacked them to folder called jqTree inside my javascript/packs folder
with
yarn add jqtree
and now I have sorted out the require which is as it should be without the ;
So
require ;'jqTree/tree.jquery.js'
becomes
require('jqtree')
also in my javascript/packs folder I have created a sortable.js file which did contain the following
require ;'jqTree/tree.jquery.js'
jQuery(window).on('load', function () {
alert("Done"); //This works!
});
$(function() {
$('#tree1').tree({
data: data,
autoOpen: true,
dragAndDrop: true
});
})
the ; in the require statement confuses me a lot but the console error was demanding it
This now looks like this
require("jqtree");
$(function() {
alert($('#tree1').data('items'));
});
$('#tree1').tree({
data: $('#tree1').data('items'),
autoOpen: true,
dragAndDrop: true
});
With the above code I get an reference error: data is not defined
In a view I have the following code
<%=javascript_pack_tag("sortable")%>
<%= content_tag "div", id: "tree1", data: {items: #menu_items} do %>
Loading items...
<% end %>
The issue I have now is that my browser is reporting an error that tree is not a function.
In my application.css.scss I have
*= require "jqtree.css"
Which doesn't work
I have a detailed answer for this that has taken me quite sometime to put together, I will update this answer with that detail over the coming days but it starts with getting everything hooked up properly with jQuery, jQuery-ui and the componment itself which in this case is jqTree
Yarn is definitely the answer
Starting with the command line to add the relevant packages
yarn add jquery
yarn add jquery-ui
yarn add jqtree
Once the relevant yarn packages are installed I needed to make jQuery and jQuery-ui available for reasons that I am yet to fully comprehend, a simple require is not enough
Following this post https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker
I setup my environment.js file in the config/webpacker folder to look like this
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
);
const aliasConfig = {
'jquery': 'jquery-ui-dist/external/jquery/jquery.js',
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};
environment.config.set('resolve.alias', aliasConfig);
module.exports = environment
After restarting my server I created a simple js file called test.js in the app/javascript/packs folder which as far as I can tell is where all javascript now resides although there is still the possibility of using sprockets by putting javascript in the assets/javascript folder, I have been advised, with no explanation as to why, that it is not a good idea to mix webpacker with sprockets for serving javascript.
Webpacker does has the ability to serve stylesheets as well, however I still prefer my stylesheets to be served by sprockets in the app/assets folder and using stylesheet link tags as traditionally done in Rails apps as testing proved to be more efficient this way so mixing sprockets with webpacker in this way doesn't seem to be an issue.
I just chucked a simple alert message into the test.js file just to check that webpacker and jQuery was all hooked up properly.
So test.js looks like this
require("jquery-ui");
require("jqtree");
$(function() {
alert($('#tree1').data('items'));
});
Then to use the javascript I just included a javascript pack tag in the view I wanted to use it in like so.
in a random edit.html.erb view
<h1>Editing Menu Item</h1>
<%= render 'form', menu_item: #menu_item %>
<%= link_to 'Show', [:admin, #menu_item] %> |
<%= link_to 'Back', admin_menu_items_path %>
<%=javascript_pack_tag("test")%>
No need for paths or extensions to the file name, it just works!
I find this approach to be really neat for two reasons
1) I am not unnecessarily bloating out web pages by including page specific javascript in every single page by including it in the application.js file which gets included by default in the layout and therefore in every page.
2) I don't seem to have to worry about DOM loaded events and so far no issues with turbolinks interfering with it, although I suspect that may be more by luck than judgement and I may have to revise that thought in the future and make use of 'data-turbolinks-track': 'reload' option, but so far so good and this has not been necessary.
So now that all is hooked up and working it was time to make the jqTree component work with ancestry gem to be able to structure and organise the menu items for the site,
But up to this point it has been a simple matter of using yarn top install components and hooking up jQuery properly. I didn't use yarn initially and that led me to all sorts of problems resulting in my original question.
The rest is to follow...
I'm using Rails with webpacker with react.
I'm loading my components like this in my view file:
<div id="mycomponent"></div>
<%= javascript_pack_tag 'components/mycomponent' %>
In mycomponent, I have:
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<MyComponent />,
document.getElementById('mycomponent'),
)
})
So on initial page load, mycomponent is mounted.
But when I visit another page, hit back or click on a link to the dashboard (in this case), the component doesn't load. Had to hit refresh to load it.
I think it has something to do with some caching techinques that Rails is using?
How do I get the components to load on every request
So turbolinks was doing some optimizations behind.
Realized that the url in chrome inspector remained the same when I changed pages.
Pages were loading fully after removing //= require turbolinks from app/assets/javascript/application.js.
Seen some people pointing to jquery.turbolinks for onload issues with turbolink. Not tested though.
I have problem injecting the select2 library in my TypeScript/Angular project. I don't know what else to do to make it working, I searched for some working example of but without success.
jQuery gets loaded
select2.js gets loaded
definition file select2.d.ts is there (I also have matching version)
Module is injected like that:
public init() {
var myApp = angular.module('app', [
'ui.router',
'ngCookies',
'ui.bootstrap',
'select2'
]);
...
I get an error:
Module 'select2' is not available! You either misspelled the module name or forgot to load it.
What am I doing wrong there? Any help appreciated.
You are trying to inject Select2 into your application like an Angular module. This is throwing an error because Select2 is not an angular module, it's a jQuery component.
Angular UI provides ui-select which is an Angular native version of Select2.
So I resolved this by initializing select2 in jQuery style direct in my controller...
$('select').select2();
It is probably not very nice solution but it works. If anyone got better solution feel free to post it
I'm trying to implement the bootstrap datepicker one of my forms. I've already tried these paths https://github.com/Nerian/bootstrap-datepicker-rails// github.com/lubieniebieski/bootstrap-datetimepicker-rails and the bootstrap css is not showing.
Currently I'm using this version https://github.com/lubieniebieski/bootstrap-datetimepicker-rails and have this /= require bootstrap-datetimepicker in my application.js and this #import 'bootstrap-datetimepicker'; in my boostrap_and_overidescss.scss. The following is my script:
<script type="text/javascript">
$(document).ready(function(){
$('#insurance_start_date').datepicker();
});
</script>
Any light onto this soul would be greatly appreciated!
If you just want a date picker, I think this has been upgraded to support BS3: https://github.com/eternicode/bootstrap-datepicker
If you want date and time, I think this is the one: https://github.com/Eonasdan/bootstrap-datetimepicker
I have not tried the latter because of some other frameworks that don't work yet (mostly simpleform), but these were what I came up with when I evaluated my upgrade path 2 weeks ago.
I'm working on the exact same gem you are, right now.
Not sure how much help I will be, though, but here's pointing out 2 things that may help.
1) It could be a typo, but your bootstrap_and_overrides.css.scss appears to have the improper file extension. yours seems to be missing a period between overides and css.
2) What I did with this, to get the bootstrap working, was to just import it into my application css layout directly using *= require bootstrap-datetimepicker. With that, I do have the bootstrap 'd calendar...although, I'm still having issues with getting the calendar to close after you've selected the date.
Good luck, hope this helps.
I am trying to use jquery UI based transition sliders on my homepage. I tried different jquery plugins but I always get an error in the console : jQuery is not a function or some function error related to jQuery . Plugins i have tried are Lof JSliderNews 1.0,featured-content-slider, etc..
Even after following several posts on the web , iam not able to make the plugin work at all. Jquery part doesn't work. I have used carousels and other plugins with jquery.noConflict but this time nothing works!
Here's what iam doing:
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
I also tried replacing all $ with jQuery in the included scripts but that too doesn't work in magento. Please help, i need to finish the project soon
Have you tried putting all the jQuery stuff into a function and map the window.jQuery variable as an argument? Like so:
(function($){
//... do your jQuery thing here
})(jQuery);
BTW: "jQuery is not a function" might also be a hint that you forgot to load the jQuery library into your project.
Do you have "JS file merging" enabled? If yes, try to disable it, clear your cache and try again. It helped me once when I had a smiliar issue.
Regards