Adam Wenham

Joined

120 Experience
0 Lessons Completed
0 Questions Solved

Activity

I'm using standard Rails views (rather than an API) with quite a lot of Vue components - but on page load, all of my those components are not rendered for a split second. They then all blink into existence all at once, which obviously isn't a great UX. How can I combat this effect?
Alternativel you can just answer here "How would you test a Vue component in Rails?"

Loving the Vue vids so far, but it would be great to hear your thoughts on testing the front end. Would this be a Capybara/clickety-click kind of thing, or would you recommend a JS testing library etc.

Posted in Global Autocomplete Search Discussion

Would love to see this in Vue within an app-wrapper (data-behavior='vue') like you talked bout in ep 239! I've been banging my head against a number of these options (https://github.com/vuejs/awesome-vue#autocomplete) within the context of a Rails app.

Posted in Sortable Drag and Drop Discussion

Thanks for the great video Chris! I'm running into a 'sortable is not a function' error that I'm hoping you can help with:
# Gemfile
gem 'jquery-ui-rails', '~> 6.0', '>= 6.0.1'
gem 'acts_as_list', '~> 0.9'

# application.js
//= require jquery
//= require rails-ujs
//= require turbolinks
//= require jquery.easy-autocomplete
//= require trix
//= require jquery-ui/widget
//= require jquery-ui/widgets/sortable
//= require_tree .

# application.html
...
<head>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
  <%= yield %>
</body>
...

# projects/index.html.erb
<div id="projects-index-body">
  <%= render @projects %>
</div>

# _project.html.erb
<div class="index-item">
  <div class="index-title">
    <%= link_to project.name, project %>
  </div>
</div>

# projects.js
document.addEventListener('turbolinks:load', function() {
  $('#projects-index-body .index-item').sortable();
});

The error I get is:
Uncaught TypeError: $(...).sortable is not a function
    at HTMLDocument.<anonymous> (projects.self-aa444772b5cec4b7d7c04af684612adbe666b794a474b2ed041a79415d330c43.js?body=1:2)
    at Object.Turbolinks.dispatch (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6)
    at e.notifyApplicationAfterPageLoad (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7)
    at e.pageLoaded (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7)
    at turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6
(anonymous) @ projects.self-aa444772b5cec4b7d7c04af684612adbe666b794a474b2ed041a79415d330c43.js?body=1:2
Turbolinks.dispatch @ turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6
e.notifyApplicationAfterPageLoad @ turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7
e.pageLoaded @ turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7
(anonymous) @ turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6

Interestingly I also get a buttload of other errors like:
Uncaught TypeError: Cannot read property 'dialog' of undefined
Uncaught TypeError: Cannot read property 'bridge' of undefined
Uncaught TypeError: Cannot read property 'mouse' of undefined
Uncaught TypeError: $.widget is not a function
Uncaught TypeError: Cannot set property 'position' of undefined
Uncaught TypeError: Cannot set property 'focusable' of undefined
Uncaught TypeError: Cannot set property 'keyCode' of undefined
Uncaught TypeError: Cannot set property 'escapeSelector' of undefined
Uncaught TypeError: Cannot set property 'formResetMixin' of undefined
Uncaught TypeError: Cannot set property 'plugin' of undefined
Uncaught TypeError: Cannot set property 'safeBlur' of undefined

Which makes me think that I'm missing a require in my application.js - I just have no idea which one!

Thanks in advance for taking a look, I totally understand if this error is too specific for you to help with.
logo Created with Sketch.

Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

© 2020 GoRails, LLC. All rights reserved.