RAILS 6 - using jquery-ui - autocomplete is not a function - jquery-ui

I want to use the autocomplete function in jquery-ui in a RAILS 6 application.
So I followed this guide : gist.github.com/.../#jquery-jquery-ui
I was able to run rails assets:precompile.
When I start the RAILS server in production mode and check the browser console, I see this error:
jQuery.Deferred exception: $(...).autocomplete is not a function
So this javascript pack is no correct bundled by webpacker.
Any idea ?

Related

Sweet Alert 2 is not working properly in Rails 7 Application

I attempted to integrate the Sweet Alert 2 java-script library for customising standard alert boxes into a Rails 7 application, but I received the following error message: "Swal is not defined."
I'm using Ruby 3 and Rails 7.
I initially attempted to use the "sweet-alert2-rails" gem in my Rails application, but there are no current updates available. I therefore attempted to accomplish this using import map, and I did so by running the following line.
bin/importmap pin sweetalert2
On top of that, I added the lines below to the application.js
import Swal from "sweetalert2"
I encountered the aforementioned problem when attempting to use "Sweet Alert 2" in my view files.
Swal.fire(
  'Good job!',
  'You clicked the button!',
  'success'
)
To integrate Sweet Alerts into my Rails application, I used these links.
https://sweetalert2.github.io/
https://github.com/sweetalert2/sweetalert2
You defined Swal in application.js using import Swal from "sweetalert2", and then you are trying to use it in your view files, so it is saying that Swal is not defined.
Previously, in rails 6, we added "sweet alert" using "yarn install," and the same error occurred. Hence, to solve this error either in Rails 6 or in Rails 7, you need to add the following line inside your application.js.
import Swal from 'sweetalert2';
window.Swal = Swal;
Adding window.Swal will undoubtedly fix your problem in Rails 7.
You can find references on my blog and in my GitHub repository. I have written this article for Rails 7.0.4 and Ruby 3.1.0. and also implemented the code for the same version.
Blog : https://rutikkpatel.medium.com/sweet-alert-2-in-ruby-on-rails-7-3f4cffe1ea5f
GitHub Repository : https://github.com/rutikkpatel/Sweet-Alert-Rails
I hope that will help you with your issue.

upgrading to rails 5.1.2 from rails 4.20 breaks Angular integration

I am upgrading my rails 4.2.0 app to 5.1.2 which is going fine. I had used Angular 1.x to enhance my rails app pages selectively. My rails views are in HAML. Here is a snippet of a page which loads fine in 4.2.0, but not in 5.1.2:
.well{"ng-app" => "billing", "ng-controller" => "BillableCtrl"}
= simple_form_for #billable do |f|
.row
.col-md-4
This loads angular fine in this view. However, I get the following stack trace in my javascript console when I try to load this in Rails 5.1.2.
Uncaught SyntaxError: Unexpected token &
angular.self-26d045c60a96c782aa8ef9f5709b1b4fd1ec8578bc37ec2c6c2b9c4370f4bac0.js?body=1:64
Uncaught Error: [$injector:modulerr] Failed to instantiate module
billing due to: Error: [$injector:nomod] Module 'billing' is not
available! You either misspelled the module name or forgot to load it.
If registering a module ensure that you specify the dependencies as
the second argument.
I am using ngannotate-rails version 1.2.2 in rails 5.1.2 upgrade. The version of ngannotate-rails used in rails 4.2.0 version was 0.15.4.
Has anyone else run into this issue? What are some options to investigate?
It turned out NOT to be an angular problem but a Rails to Javascript messaging problem. Take a look at the following line code in one of my javascript functions:
$scope.billable_item = #{#billable.to_json};
Up until Rails 4.2.0 in my experience, this was the standard way to pass the Rails data into javascript. However, for some reason that I do not understand yet, it is broken. That was causing Angular to throw very confusing messages. I have been using the 'Gon' gem to pass data from Rails to Javascript for some time and I switched to that which worked fine. I will now switch my entire Rails to Javascript communication to the Gon gem.

ckeditor not working in rails_admin: Uncaught TypeError: CKEDITOR.style.customHandlers[e.type] is not a constructor

I am having problems getting ckeditor to work in rails_admin in production. It is working in local development mode. ckeditor is working on my app, but it is not working in rails_admin. I am getting this error in the Google Chrome console:
Uncaught TypeError: CKEDITOR.style.customHandlers[e.type] is not a constructor
I am using:
Rails 4.2.2
Ruby 2.2.4
Heroku
gem galetahub/ckeditor (4.2.2)
gem sferik/rails_admin (0.8.1)
ckeditor's external plugin mediaembed
This is the code I am using to get the ckeditor to show up in rails_admin:
field :description, :ck_editor
I have tried fetching the gems from github, but the same problem persists.
Any idea what I am not doing right, given that ckeditor does work in my heroku app?
Let me know if I am missing information that might be helpful to debug this. Thanks in advance!
I added the following line to app/assets/javascripts/rails_admin/custom/ui.js:
//= require ckeditor/init
and it works now! I previously only added to application.js

ActionCable issues on app upgraded to Rails 5

ActionCable is not working on my app that I just upgraded to Rails 5.0.1.
I generated a channel with rails g channel.
When I run the server I don't see any line in the log that indicates ActionCable is doing anything. On the client side I get App is not defined
I created a new app with rails new and ActionCable works fine in it. I compared all the relevant files in and they look the same in both apps.
Are there some gems that I need to install in my upgraded app that would be installed by default in a new Rails 5 app? I checked and I have actioncable.
My problem was that cable.js was not included in application.js because I have my javascript files included explicitly by name and forgot to add cable.
Don't know if this Q&A will help anyone else, but if it does....

Heroku and HighCharts Rails Gem -

I created a rails app using the HighCharts gem and an external API to seed the db. Everything works perfectly on my local server but when I deployed to Heroku (using postgreSQL) and running all the heroku run rake db:migrate, db:seed commands, my chart does not load.
I get the following error in my console:
Mixed Content: The page at 'https://myappname.herokuapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Signika:400,700'. This request has been blocked; the content must be served over HTTPS.
I am using a theme which I require in my application.js file that uses googlefonts via HTTP (NOT HTTPS) and I think I need to change this to //fonts.google... but I don't know how since I'm using the gem.
When I tell my browser (Chrome) to display the insecure scripts, the chart still does not appear and the console spits out an empty array which tells me my data is not in Heroku.
Please let me know what other info I can provide. As you can see I think I have 2 issues.
Thank you!
With the help of the HighCharts Rails gem folks, I was able to manually download the source code and change the pertinent parts to be protocol independent. All it required was copying the theme.js code into app/assets/javascripts, make the changes, and load that file instead of //= require highcharts/themes/sand-signika in my application.js.
Am still having an issue with data not migrating from my local db to Heroku...

Resources