Avoiding the utilization of automatically generated JSON files as a data source in Rails when

I have implemented javascript code that uses JSON to generate a timeline. The JSON is being created using json_builder and it contains only the current user's information. The JSON displays correctly when accessed directly through its URL, but when this URL is used in the JS code, it fails to find the data, causing the timeline to get stuck on the loading screen.

Is it possible that the JSON doesn't actually get generated when it is accessed by the javascript? How can I solve this issue so that the javascript can access the correct data? Interestingly, if I provide the javascript with a static JSON file to work with, it works perfectly fine.

I believe what I need to do is somehow store the JSON within a variable in the javascript code, which can then be used as the data source instead of relying on a URL. Alternatively, is there a way to execute the json_builder within a javascript function?

I'm relatively new to working with Rails, so any guidance on how to resolve this issue would be greatly appreciated. Thank you in advance for your help.

Javascript:

<script>
    $(document).ready(function() {
        createStoryJS({
            type: 'timeline',
            width: '800',
            height: '600',
            source: 'users/<%= current_user.id %>/events.json',
            embed_id: 'my-timeline'
        });
    });
</script>

Answer №1

Is it necessary for the source to begin with /?

source: '/users/<%= current_user.id %>/events.json'

Answer №2

It's surprising how this solution actually works, even though the reason behind it is unclear to me! All I did was append ?callback to the URL like so:

path: '/members/<%= current_user.id %>/activity.json?callback',

Amazingly, this simple addition retrieves the accurate information.

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

Is there a way to avoid waiting for both observables to arrive and utilize the data from just one observable within the switchmap function?

The code snippet provided below aims to immediately render the student list without waiting for the second observable. However, once the second observable is received, it should verify that the student is not enrolled in all courses before enabling the but ...

Creating a String Array and linking it to an Input Field

I'm currently working on a code that involves mapping through an array of strings using observables. My objective is to display the value from this array inside an input field. However, despite being able to view the array in the console, I encountere ...

Using FUELPHP to make Ajax requests without relying on jQuery

After conducting thorough research, I have come to the conclusion that FUELPHP does not handle Ajax requests as efficiently and natively as some other frameworks like RubyOnRails. It seems that in order to perform Ajax requests with FUELPHP, one must manu ...

What is the best way to eliminate "?" from the URL while transferring data through the link component in next.js?

One method I am utilizing to pass data through link components looks like this: <div> {data.map((myData) => ( <h2> <Link href={{ pathname: `/${myData.title}`, query: { ...

Expanding the List View with JSON data

Is there a way to implement an ExpandableListView that retrieves data from a server response in JSON array format for both its groups and children? I have used SimpleCursorTreeAdapter before, but it only works with cursors. I'm looking for an equiva ...

The variable that contains a function is invoked, but the result is undefined

I'm having trouble with a function that should return John temp (2021) when called, but instead it's returning John undefined (undefined) const user = { username : 'John', type: 'temp', yearJoin: 2021, user ...

Can anyone point out where the mistake lies in my if statement code?

I've encountered an issue where I send a request to a page and upon receiving the response, which is a string, something goes wrong. Here is the code for the request : jQuery.ajax({ url:'../admin/parsers/check_address.php', meth ...

Locate the Highest Number within a Multi-Dimensional Array and Store it in a Fresh Array

I'm currently tackling a coding challenge that involves working with nested arrays. The task is to find the largest number in each sub-array and then create a new array containing only the largest numbers from each one. Initially, my approach was to d ...

Access an attribute using slashes in Jquery

I've been struggling to use jQuery to select an object based on a unique filename attribute. However, I'm facing issues with escaping slashes when the selector is created using a variable. Despite spending hours trying different combinations, I s ...

The module named "jquery" has not been loaded in this context: _. Please use require() to load it

As I work on migrating my Javascript files to Typescript, I encountered an issue when trying to use the transpiled javascript file in an HTML page. The error message I received is as follows: https://requirejs.org/docs/errors.html#notloaded at makeError (r ...

Populating a ListBox without the need to constantly scroll upwards

I'm currently facing an issue with a ListBox that displays online users fetched from a MySQL database. Every second, the ListBox is updated with new users. The problem arises when adding an item to the ListBox causes it to scroll up, which I want to a ...

Implementing dotenv in a Node JS package

I'm in the process of developing a Node application that retrieves search results through a Google Custom Search Engine (CSE). To streamline the process, I plan to extract the component responsible for sending requests to Google and receiving the res ...

Jquery ajax is failing to achieve success, but it is important not to trigger an error

My jQuery ajax request seems to be stuck in limbo - it's not throwing an error, but it also never reaches the success function. This is how my code looks: function delete() { $("input[name='delete[]']:checked").each(function() { ...

What is the best way to extract text from a list item in an unordered list (

I am trying to search a ul list that populates a ddSlick dropdown box. ddSlick adds pictures to list items, making it a visually appealing choice. To see more about ddSlick, you can visit their website here: Here is the code I am using to loop through the ...

Provide JSON data from the index method to the index.html file located in the public directory

I'm currently working on building a single page application using Rails as the backend, since it's the only framework I am familiar with. All my project files are stored in the public folder, and I've also set up npm and jspm to incorporate ...

Styling a modal popup using session storage in CSS

I recently created a modal popup using CSS by following a helpful tutorial that can be found at this link: Now, I am curious about how to store the value entered in a textbox as session data. I came across some code in another tutorial that demonstrated h ...

Incorporating React components into your current Django project

My goal is to enhance the interactivity of a specific part of my Django website by incorporating React components into the template HTML file. Instead of replacing the entire template with React, I want to focus on integrating React for its ease in handlin ...

Master the art of utilizing angular-filter

Encountering some challenges while attempting to utilize angular-filter: The following links have been imported into the HTML file: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <script src=" ...

Accessing JavaScript results in PHP

Hello everyone! I am working on creating a dropdown menu for selecting time using JavaScript to get the computer's current time. My goal is to have an output that automatically selects the option in the dropdown if it matches the computer's time. ...

Recursive instruction malfunctioning

I'm currently trying to develop a custom recursion directive, but unfortunately it's not functioning as expected. I have followed the instructions outlined here: Recursion in Angular directives For reference, you can view the fiddle here: http ...