Turbolinks not allowing the addition of JavaScript classes for background images

Question

Turbolinks not allowing the addition of JavaScript classes for background images

While trying to merge a front end html theme with my Laravel app, I encountered an issue with turbolinks that is preventing Javascript from appending div classes. This is resulting in background images only being displayed on page refresh.

<div class="intro-banner" data-background-image="/storage/images/hero.jpg">
    <div class="container">

custom.js

/*----------------------------------------------------*/
/*  Inline CSS replacement for backgrounds
/*----------------------------------------------------*/
function inlineBG() {

    // Common Inline CSS
    $(".single-page-header, .intro-banner").each(function() {
        var attrImageBG = $(this).attr('data-background-image');

        if(attrImageBG !== undefined) {
            $(this).append('<div class="background-image-container"></div>');
            $('.background-image-container').css('background-image', 'url('+attrImageBG+')');
        }
    });

} inlineBG();

// Fix for intro banner with label
$(".intro-search-field").each(function() {
    var bannerLabel = $(this).children("label").length;
    if (bannerLabel > 0 ){
        $(this).addClass("with-label");
    }
});

// Photo Boxes
$(".photo-box, .photo-section, .video-container").each(function() {
    var photoBox = $(this);
    var photoBoxBG = $(this).attr('data-background-image');

    if(photoBox !== undefined) {
        $(this).css('background-image', 'url('+photoBoxBG+')');
    }
});

javascript css laravel turbolinks

Answer 1

Answer №1

Upon closer inspection, it appears that this code executes only once, specifically during the initial page load. In order to ensure it runs every time the page loads, it should be triggered on turbolinks:load. Additionally, since the script adds elements to the page, precautions must be taken to prevent redundant duplicate elements. Turbolinks preserves a copy of the final state of the page before a user navigates away, including any appended HTML. Therefore, it is essential for your code to check for existing appended elements before adding new ones or remove them prior to caching.

A more cautious approach involves removing elements using turbolinks:before-cache:

/*----------------------------------------------------*/
/*  Inline CSS replacement for backgrounds
/*----------------------------------------------------*/

$(document).on('turbolinks:load', function () {
    $(".single-page-header, .intro-banner").each(function() {
        var attrImageBG = $(this).attr('data-background-image');

        if(attrImageBG !== undefined) {
            $(this).append('<div class="background-image-container"></div>');
            $('.background-image-container').css('background-image', 'url('+attrImageBG+')');
        }
    });

    // Fix for intro banner with label
    $(".intro-search-field").addClass(function () {
        if ($(this).children("label").length) return "with-label";
    });

    // Photo Boxes
    $(".photo-box, .photo-section, .video-container").css('background-image', function () {
        return 'url('+$(this).attr('data-background-image')+')'
    })
});

$(document).on('turbolinks:before-cache', function () {
    $(".single-page-header, .intro-banner").each(function() {
        $(this).children(".background-image-container").remove();
    });
});

In addition, I have optimized some of the jQuery code by utilizing functions as arguments, which streamlines the process and eliminates the need to iterate over a jquery selection using each.

Lastly, relying heavily on

$(document).on('turbolinks:load', function () {…}

for various snippets is not advisable as it creates a dependency on Turbolinks. Should you decide to transition to a different platform in the future, substantial updates would be required wherever this method is implemented. For a more versatile solution, you might consider developing a mini-framework akin to the one showcased here:

Answer 2

Upon closer inspection, it appears that this code executes only once, specifically during the initial page load. In order to ensure it runs every time the page loads, it should be triggered on turbolinks:load. Additionally, since the script adds elements to the page, precautions must be taken to prevent redundant duplicate elements. Turbolinks preserves a copy of the final state of the page before a user navigates away, including any appended HTML. Therefore, it is essential for your code to check for existing appended elements before adding new ones or remove them prior to caching.

A more cautious approach involves removing elements using turbolinks:before-cache:

/*----------------------------------------------------*/
/*  Inline CSS replacement for backgrounds
/*----------------------------------------------------*/

$(document).on('turbolinks:load', function () {
    $(".single-page-header, .intro-banner").each(function() {
        var attrImageBG = $(this).attr('data-background-image');

        if(attrImageBG !== undefined) {
            $(this).append('<div class="background-image-container"></div>');
            $('.background-image-container').css('background-image', 'url('+attrImageBG+')');
        }
    });

    // Fix for intro banner with label
    $(".intro-search-field").addClass(function () {
        if ($(this).children("label").length) return "with-label";
    });

    // Photo Boxes
    $(".photo-box, .photo-section, .video-container").css('background-image', function () {
        return 'url('+$(this).attr('data-background-image')+')'
    })
});

$(document).on('turbolinks:before-cache', function () {
    $(".single-page-header, .intro-banner").each(function() {
        $(this).children(".background-image-container").remove();
    });
});

In addition, I have optimized some of the jQuery code by utilizing functions as arguments, which streamlines the process and eliminates the need to iterate over a jquery selection using each.

Lastly, relying heavily on

$(document).on('turbolinks:load', function () {…}

for various snippets is not advisable as it creates a dependency on Turbolinks. Should you decide to transition to a different platform in the future, substantial updates would be required wherever this method is implemented. For a more versatile solution, you might consider developing a mini-framework akin to the one showcased here:

Turbolinks not allowing the addition of JavaScript classes for background images

Answer №1

Similar questions

Display table rows that are hidden in an HTML/Angular toggle function

I would like to retrieve my data using my personal API and have them displayed as checkboxes

Utilizing JSON data to populate a modal window in HTML

How to Use CSS to Perfectly Align Form Elements in the Center of

Is there a more efficient method for implementing server side rendering in a Next.js application?

Prevent divs from jumping to a new line with the float property

"Create a new row in the list by selecting an option from the drop-down

What is the most effective method for organizing and handling uploaded files within my editing software?

Avoid duplicate submissions while still enforcing mandatory fields

JavaScript and jQuery syntax are essential for web development. Understanding how

Cloned bootstrap nav tabs are controlled just like the original version

CRUD operations are essential in web development, but I am encountering difficulty when trying to insert data using Express

Tips for resolving the issue with "Text Animation"

Would someone be able to clarify the purpose of this await useState React code?

JSON.Parse function does not return a valid value

Invoking a function containing an await statement does not pause the execution flow until the corresponding promise is fulfilled

Trouble with minification in Sencha cmd 5

The successful loading of tab favicons in the DOM of an angular chrome extension is a triumph, however, explicit XHR requests are unfortunately

Difficulty altering link hover background color

Transmit a base64-encoded image in an HTTP request to the server