Executing a JavaScript file following an AJAX request in Ruby on Rails

Currently, I am utilizing prismjs to add syntax highlighting to my Rails application. The stylesheet and js file have been included in my layout, however, an issue arises where the code is only highlighted once during the initial page load. Subsequently, after an ajax call triggers a partial refresh, the code highlighting ceases to function. Interestingly, if I include the prismjs file within the partial itself, the highlighting works as expected. Are there any alternative methods to ensure consistent functionality without having to include the file in each partial?

layout.html.erb

<%= stylesheet_link_tag :prism %>
<%= javascript_include_tag :prism %>

The above code successfully highlights the syntax on the initial page load. However, for subsequent ajax calls, it becomes necessary to include the following:

partial.html.erb

<%= javascript_include_tag :prism %>

Are there any alternative solutions to achieve the same result, such as calling the file through a custom event or utilizing another method?

Answer №1

When you make changes to your HTML, whether through an Ajax call or by updating it with JSON, the section of the page that is affected will lose the PrismJS highlighting applied during page load. In order to re-enable the highlight effect, you must call the highlight function again.

You can find the necessary methods for this process here. After updating the HTML, simply use either highlightAll or highlightAllUnder depending on the scope of your update.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to use Ionic 3 to automatically scroll ion-scroll content all the way to the bottom

My ion-scroll component is experiencing some challenges <ion-scroll scrollY="true" style="height: 52vh;"> {{ text }} </ion-scroll> The content inside the ion-scroll keeps expanding, exceeding the designated height. Users can manually scroll ...

Angular component fails to display

Below is the code snippet: import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['../assets/css/app.component.css'] }) export class Main ...

Tips for utilizing two renderCell functions in a datagrid from Material UI without encountering duplication or repetition

Utilizing Material UI, I have designed a table to showcase my data. In this setup, I am required to use renderCell for two specific properties: 'level by user' and 'level by referent'. Issue: The problem arises when Material UI displa ...

Troubleshoot: Issue with Multilevel Dropdown Menu Functionality

Check out the menu at this link: The issue lies with the dropdown functionality, which is a result of WordPress's auto-generated code. Css: .menu-tophorizontalmenu-container { margin: 18px auto 21px; overflow: hidden; width: 1005px; ...

Is there a way for me to either fulfill a promise or face failure?

Currently, I am working on creating a Thennable function that may return a promise based on its parameters. However, there is a possibility that the parameters are invalid which would require breaking the promise chain with something unexpected. What can b ...

Guide to creating jQuery event handlers for active elements

After encountering a frustrating issue with Internet Explorer where an input cursor remained visible behind a div with z-index, I came across a solution here. However, I wanted to convert the solution into jQuery code. Original JavaScript: document.query ...

Passing PHP loop values to JavaScript

In my current project, I made a decision to avoid using a database and instead opted for files and folders. Each folder in a directory is represented as a button, clicking on which displays a list of files within that folder on the screen. Now, my challeng ...

Tips for incorporating JavaScript modules into non-module files

Learning how to use js modules as a beginner has been quite the challenge for me. I'm currently developing a basic web application that utilizes typescript and angular 2, both of which heavily rely on modules. The majority of my app's ts files ...

Design a sleek and polished calendar for an online form that exudes professionalism

In the process of designing a form that involves booking, I am in need of a calendar component where users can input their desired date. Is there an existing calendar solution available rather than starting from scratch? My development stack includes html ...

Sending a 2-dimensional array from JavaScript to the server using AJAX

My JavaScript code involves working with a 2D array. var erg = new Array(); for (var i in val) { erg[i] = new Array(); for (var j in val[i]()) { erg[i][j] = val[i]()[j](); } } However, I encountered an issue where only the 1D array ...

Using jQuery to dynamically disable links based on their HTML content

I am looking for a way to disable links based on the content within their HTML tags. In my website, there are several classified sections that may not always have content filled out. My goal is to visibly indicate to viewers when a classified section is em ...

My Instagram stream using the Ionic framework's infinite-scroll feature is experiencing issues with repeated duplicates in the repeater

I am currently working on developing a mobile app for IOS and Android using the Ionic Framework. The app will feature an Instagram Feed with the Instagram API, displaying all photos shared under a specific hashtag (for example, #chocolat). I am also lookin ...

Issue with Moment.js: inability to append hours and minutes to a designated time

I have a starting time and I need to add an ending time to it. For example: start=19:09 end=00:51 // 0 hours and 51 minutes I want to add the 51 minutes to the 19:09 to make it 20:00. I've attempted several different methods as shown below, but none ...

What are some tips for managing the hover effect using CSS3?

Here's a demonstration of my current setup. When you hover over the black box, a transition occurs and reveals my tooltip. However, I only want the tooltip to appear when hovering over the black box itself. Currently, the transition also triggers if y ...

Tips for implementing the data.map function in Reactjs

I am currently exploring Reactjs with nextjs, and I am facing an issue with fetching data using the "map" function. Can anyone provide guidance on how to approach this? Below is my current code snippet: import { useEffect, useState } from "react" export ...

A more efficient way to have Vue import files from the assets folder rather than manually inserting script tags into the index.html file

I have a simple structure and would like to utilize assets from cdnjs.com in my project. The issue arises when I try to import these assets from src/assets/lib instead of directly from the CDN. For example, importing jQuery like this: Main.js: import &a ...

The value of a variable fails to update when attempting to increment it with the useState hook

My variable is initially set up like this: let [count_farmers, set_count_farmers] = useState(0); My goal is to increment the variable when a user registers on my page. Here's what I'm trying to do: let handleAddUser = (userinfo) => { ...

Avoiding the duplication of selected items in a dropdown within a gridview can be achieved effectively by implementing a JavaScript/jQuery

In my gridview, which contains multiple rows, each row has a dropdown (select in HTML). My goal is to prevent the user from selecting the same item from the dropdown list for different rows. For instance, if a user selects "New York": Assigning rooms: U ...

Unable to retrieve a return value from an asynchronous waterfall function within a node module

A custom node module that utilizes async waterfall is working properly when run independently, but the AJAX callback does not receive the return value. //Node module var boilerplateFn = function(params){ async.waterfall([ function(callback){ ...