Instructions for appending an id to the URL of events in fullcalendar using Rails

Looking for a way to attach an ID to the URL of a fullcalendar event in a Rails application?

I am using a json.jbuilder file:

json.array!(@estudiante.clases) do |clase|
  json.extract! clase, :id
  json.id clase.id
  json.title clase.name
  json.start clase.start
  json.end clase.end
  json.dow [1, 4]
  json.url listar_clases_estudiante_url(clase, format: :html)

Additionally, I have a JavaScript snippet for the fullcalendar:

var initialize_calendar;
initialize_calendar = function() {
  $('.calendar').each(function() {
    var calendar = $(this)
    calendar.fullCalendar({
      defaultView: 'agendaWeek',
      events: '/estudiantes/listar_clases.json'
    });
  })
};
$(document).on('turbolinks:load', initialize_calendar);

The issue is that the events are fetched from the URL /estudiantes/listar_clases.json. However, I would like the URL to be dynamic based on the estudiante ID.

For instance:

/estudiantes/listar_clases/1.json
or
/estudiantes/listar_clases/7.json
, with the number changing according to @estudiante.id.

So, how can I include the estudiante's ID in the JSON events URL dynamically?

Thank you!

Answer №1

In order to pass the student's ID to the fullcalendar JavaScript, I had to make a modification in the listar_clases.html.erb view:

<div id="idestudiante" style='display:none;'>
  <%a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80bdc0e5f3f4f5e4e9e1eef4e5aee9e4">[email protected]</a>%>
</div>

Then, within the fullcalendar JavaScript code:

var initialize_calendar;
initialize_calendar = function() {
  $('.calendar').each(function() {
    var calendar = $(this)
    calendar.fullCalendar({
      defaultView: 'agendaWeek',
      events: '/students/show_classes/' + $("#idestudiante").text() + '.json'
    });
  })
};
$(document).on('turbolinks:load', initialize_calendar);

This allows for the appending of the current student's ID at the end of the fullcalendar events URL.

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

jQuery AJAX call failing to return to page

Currently, my form is set up to upload multiple text fields and a file to a PHP script for saving. The script successfully saves the file and text fields to an SQL database. At the end of the PHP script, I have the following code snippet: ('state&apo ...

real-time update of gauge value from soap

I am trying to update the value shown in my justgage widget with the value returned from $("#spanrWS_Measured").text(data[0]);. The current value is 123. Any assistance would be greatly appreciated. See the complete code below. <script src="scripts/r ...

Exploring JSON without taking into account letter case

Looking to conduct a case-insensitive search in a JSON file? Here's the JSON data you can work with: { "Data" : [ {"Name": "Widget", "Price": "25.00", "Quantity": "5" }, {"Name": "Thing", "Price": "15.00", "Quantity": "5" }, {"Nam ...

Having trouble retrieving JSON data using ajax

I am currently working with JSON data that is being generated by my PHP code. Here is an example of how the data looks: {"Inboxunreadmessage":4, "aaData":[{ "Inboxsubject":"Email SMTP Test", "Inboxfrom":"Deepak Saini <*****@*****.co.in>"} ...

Click on the child element while it is already being clicked by manually implementing the 'declick' function in Javascript

Hey there, I'm looking for suggestions on a better title for this issue. I couldn't come up with the right wording myself. Problem I currently have a Google Maps element with pointer events set to none, preventing it from being scrolled when ho ...

What could be the reason for the malfunctioning of my React Native vector icons?

My react native vector icons are not working despite following all the steps mentioned in the documentation. I am unable to use a camera icon in my app. I tried importing { Entypo } from 'react-native-vector-icons'; and then using \<Entyp ...

React component that enables radio inputs to repeat upon selection

My current project involves creating a quiz app where users can answer single questions using React on Codepen. I am utilizing an API to fetch a question, along with 3 incorrect answers and 1 correct answer, then storing them in the app's state. Howev ...

How can I save variable values to a text file or Excel file using Cypress.io?

Is there a way to write the values of a variable on a Text or Excel sheet? I have a variable called tex that stores string values, and I want to output these values onto text files or an Excel sheet if possible. beforeEach(() => { cy.visit('ht ...

What is the best way to convert a collection of data into JSON format using Reason programming language?

Imagine having a record type along with a set of records: type memo = { message: string, identifier: string }; let memos: list complete_memo = [{message: "hello", identifier: "1"}, {message: "bye", identifier: "2"}] Is there a way to convert this da ...

JavaScript parameter not found

I am currently working on a block type plugin for Moodle and encountering some difficulties with my JS code. Due to my limited knowledge in JS and JSON, I am having trouble identifying the issue at hand. My code includes a function that adds a custom actio ...

Invoking JavaScript function from an Android Activity

I have a simple JS function that is supposed to set values of some html contents, but it doesn't seem to be working properly. Here is the code for the JS function: function SetEdits(name,email,pic,date) { document.getElementById("myPic").src=pic; doc ...

Error occurred when attempting to fetch data from a nested JSON object in React/Next.JS

Having trouble retrieving data from my API and encountering this error message. I suspect it may be related to the JSON structure. Interestingly, when using a different URL with nested arrays, it works fine. However, my current data is not cooperating. Any ...

NodeJS JSONStream causing memory exhaustion issue

I've encountered an issue while trying to stream a large JSON file (94mb in size) from an HTTP request to a local file using the JSONStream library in NodeJS. Despite setting a memory flag of 256mb with node --max-old-space-size=256 .\main.js, th ...

Is there a way to refresh a webpage without the need to reload it

Imagine a scenario where a tab on a website triggers the loading of a specific part of the webpage placed within a div. For example, clicking on a tab may trigger the loading of a file named "hive/index.php". Now, if a user selects an option from an auto ...

The AngularJS ngModel directive encounters issues when used within a ui-bootstrap tabset

Check out the code snippet below to see the issue at hand: <!DOCTYPE html> <html ng-app="plunker"> <head> <title>AngularJS Plunker</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/cs ...

Struggling with configuring a 'post' endpoint in an express server problem

My goal is to validate that my client is able to successfully post information to its server. I have configured a specific 'route' on my Express server for this purpose. // server.js this is the server for the PvdEnroll application. // var ex ...

Hiding the initial parent SVG element in the list will also hide all subsequent SVG elements within each section, excluding the container

I encountered a strange issue with my code in the Next framework. When using getServerSideProps, I made a request to my api folder, which resulted in a simple JSON response. Everything seemed to be working fine. The content was displayed perfectly without ...

Error: The value of "$tweetId" cannot be parsed as it is set to "undefined". Please ensure that string values are properly enclosed

I am utilizing sanity, and if you require more details, I will furnish it promptly. When I try to access http://localhost:3000/api/getComments, I encounter the following error message: ClientError: Unable to process value of "$tweetId=undefined". Kindly ...

Exploring the intricacies of ODATA SAPUI5 mockup with nested JSON structures

Having a challenge with accessing nested data from a JSON file used as mockup data in an ODATA SAPUI5 application. Below is the JSON content: [{ "testcase": { "specification": "SRS PR 28717 – Deposit in Brazilian Reais", "execution": { ...

Is there a way to remove a certain child category post from appearing in a parent category?

I'm having trouble with displaying related posts by category while excluding a specific category. I've tried different methods but none seem to work, and I'm not sure how else to approach this issue. <?php $categories = get_the_terms ...