All threads / Integrating Turbolinks into rails 5 app

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Integrating Turbolinks into rails 5 app

Alex Deering asked in Gems / Libraries

Turbolinks has been giving me a world of trouble and there is a lot of randomness with it depending on where I put it in the application.js file. Right now I have this:

//= require jquery3
//= require jquery
//= require jquery.turbolinks
//= require best_in_place
//= require jquery_ujs
//= require jquery.remotipart
//= require jquery-ui
//= require tether
//= require popper
//= require bootstrap
//= require selectize
//= require dropzone
//= require jquery.infinite-pages
//= require jquery.raty
//= require jquery.validate
//= require social-share-button
//= require init
//= require turbolinks
//= require turbolinks-compatibility
//= require_tree .

My javascript here works with this code:

$(document).on('turbolinks:load', function(){
    /* Activating Best In Place */
    jQuery(".best_in_place").best_in_place();
});

But I get errors in some of my code for my page coffee scripts..this code here works:

$(document).on 'ready page:load', ->
    Dropzone.options.recipeImageDropzone = 
        init: ->
            myDropzone = this
            @on 'addedfile', (file) ->
                options =
                    extension: file.name.match(/(\.\w+)?$/)[0]
                    _: Date.now()
                $.getJSON '/images/cache/presign', options, (result) ->
                    file.additionalData = result['fields']
                    myDropzone.options.url = result['url']
                    myDropzone.processQueue()
                    return
                return
            @on 'sending', (file, xhr, formData) ->
                $.each file.additionalData, (k, v) ->
                    formData.append k,v
                    return
                return
            @on 'success', (file) ->
                image = 
                    id: file.additionalData.key.match(/cache\/(.+)/)[1]
                    storage: 'cache'
                    metadata:
                        size: file.size
                        filename: file.name.match(/[^\/\\]+$/)
                        mime_type: file.type
                $('#recipe_image').val(JSON.stringify(image))
                $('.dz-image').css
                    'width': '100%'
                    'height': 'auto'
            @on 'removedfile', (file) ->
                $('#recipe_image').val("")
            @on 'thumbnail', (file, dataUrl) ->
                $('.dz-image').last().find('img').attr
                    width: '100%'
                    height: '100%'
            return
        paramName: 'file'
        maxFiles: 1
        autoProcessQueue: false
        addRemoveLinks: true
        acceptedFiles: 'image/*'

But if I change the first line to be turbolinks:load most things work but that dropzone code throws an error now and I get a Invalid JSON response from server and the console shows

POST http://localhost:8000/images 404 (Not Found)

Weird that 1 thing breaks and not sure why...also noticed that all of my elements in the body tag have this added to every html tag:
data-original-title title
This goes away if I move the //= require turbolinks to the bottom of the application.js file but then I cant use the turbolinks:load in any of the other coffeescript files. Been searching for a guide on how to implement turbolinks correctly but nothing I find shows all the steps

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 38,311+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    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.