Issue with updating bookmark symbol after delete, experiencing error 500 in AJAX on Rails

Seems like the bookmark is being destroyed, but there's a problem causing an error 500 in the console and preventing the bookmark from being unselected. This issue arises when I update the page, indicating that it is indeed being destroyed, but for some reason, the AJAX request isn't completed. Here's the code snippet:

Bookmarks controller:

  def destroy
@bookmark = Bookmark.find(params[:id])
@recommendation = Recommendation.find(@bookmark.recommendation_id)
if @bookmark.destroy
  respond_to do |format|
    format.html { redirect_to recommendation_path(@recommendation) }
    format.js  # <-- will render `app/views/reviews/create.js.erb`
  end
else
  flash[:notice] = "Couldn't delete bookmark"
  redirect_back(fallback_location: root_path)
  return
end

end

Routes:

      resources :bookmarks, only: [:destroy]
  get "/recommendations", to: "recommendations#index"
  resources :recommendations, not: [:index] do
    resources :reviews, only: [:new, :create, :destroy]
    resources :bookmarks, only: [:create, :destroy]
  end

Destroy.js.erb:

function refreshForm2() {
  var els = document.querySelector("a[href='/bookmarks/<%<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dde09dbfb2b2b6b0bcafb6f3b4b9">[email protected]</a>%>']");
  els.setAttribute("data-method", "post");
  els.setAttribute("href", "/recommendations/<%= recommendation.id %>/bookmarks");
  els.querySelector("i").setAttribute("class", "far fa-bookmark fa-xs")
}

refreshForm2();

The following error occurs:

application-852f66c6902b94f224b15c5a88c6c45599d9e733ce132ce9a28ec6a092031d74.js:216 DELETE http://localhost:3000/bookmarks/27 500 (Internal Server Error)

I'm at a loss here. What could be the mistake? The creation process works smoothly and updates the bookmark icon as expected.

Answer №1

Wow, I made such a silly error! Huge shoutout to @Yurii for the helpful logs tip. I'm still learning the ropes here and had no idea how to check that, haha!

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

Error: The 'getters' property is undefined in @vue/test-utils and cannot be read

I've been utilizing @vue-test-utils for unit testing in VueJS. This is what my store setup looks like: export default { root: true, state: { batches: [] }, getters: { getBatches: state => { return state.batches } } } The componen ...

Displaying a list in Angular 2/4 without keeping track of any modifications

Is there a way to display a list of strings without tracking changes? (I'm experiencing performance issues). Fetching a list of languages from a REST API and then dynamically generating dropdowns for each language using *ngFor is causing the app to s ...

Difficulty in jQuery's clone() function: cloning an input element without its value

I have successfully implemented jquery's .clone() method, but I'm facing an issue where the value of the previous input field is also getting cloned along with it. How can I prevent this from happening? Below is my code snippet: function addrow ...

Make sure to query MySQL database to see if the data already exists, and if not, go ahead and insert it using PHP

I am encountering difficulties in writing PHP code to insert values into a MySQL database only if they do not already exist. I am transmitting an array from JavaScript to a PHP file using $.ajax with the POST method. Do I need to include an additional &a ...

URL Construction with RxJS

How can I efficiently create a urlStream using RxJS that incorporates multiple parameters? var searchStream = new Rx.ReplaySubject(1); var pageStream = new Rx.ReplaySubject(1); var urlStream = new Rx.Observable.create((observer) => { //Looking to ge ...

Icon: When clicked, initiate a search action

I am looking to make the icon clickable so that it can be used as an alternative to pressing the "return key" for searching. Check out this bootply example at . You simply need to click on the magnifying glass icon and it will initiate the search. ...

Determining the frequency of a specific pattern within an array

I am working with an array that looks like this: a= ["foo", "bar", "baz", "foo", "bar", "baz", "foo", "bar", "BAD," "baz"] It's clear that there is a repeating pattern in the array: "foo", "bar", "baz" except for the last pattern, which includes ...

image background not appearing in HTML, CSS, and JavaScript game

When working on a simple HTML, CSS, and JavaScript game, I decided to make a change in the CSS code. Instead of setting the background color to green as before, I opted to use an image with the following line: background-image: url(flappybird.png); I also ...

Tips for updating server-side variables from the client-side in Next.js

There is a code snippet in api/scraper.js file that I need help with. const request = require("request-promise"); const cheerio = require("cheerio"); let url = "https://crese.org/distintivo-azul/"; let result; request(url, ...

Developing a feature that triggers an event upon closing a window with Javascript

I am developing a popup that enables me to choose values from it. Once I have selected the values, I need to close the window and transfer the data to my main form. Below is the code in my main form: onClick="cust=window.open('popup.php?count=<?= ...

The JavaScript function fails to give back the parameter values

After creating a function in the script tag within the head section that takes two parameters, a and b, to return the product of a multiplied by b, I encountered an issue. When calling the function with the values 3 and 4, nothing was displayed. To troubl ...

What is the process for adding parameters to a Fetch GET request?

I have developed a basic Flask jsonify function that returns a JSON Object, although I am not certain if it qualifies as an API. @app.route('/searchData/<int:id>',methods=["GET"]) def searchData(id): return jsonify(searchData(id)) Curr ...

Advantages of using ConfigService instead of dotenv

What are the benefits and drawbacks of utilizing @NestJS/Config compared to using dotenv for retrieving environment variables? Although I can create a class to manage all envvars in both scenarios, is it necessary? I am aware that @NestJS/Config relies on ...

The communication layer connecting MVC and an HTML page, utilizing AJAX functionality

I have developed a web application and believe that all components are complete. However, I am unsure about how to establish connections within it. The HTML page consists of one field where users can input a word, and my program should parse the top 5 resu ...

perform a single update using Ajax in Rails

Within my remote_form_for, I have incorporated a way to inform users if their form submission was successful using the :success=>'updateMain() method. I am now looking to implement an ajax update request in the updateMain function. However, I am s ...

Retrieve information from a form in AngularJS without relying on two-way data binding

Utilizing two-way data binding, the code operates effectively. However, there is a stipulation - instead of using =, use <. Upon the initial launch of the application, the text inputs will contain predefined values. The objective is to enable users to ...

Download attachments using Django from a web browser

Trying to send an image as an attachment. This is the code I am using: resp = FileResponse(open(fullImgPath, "rb")) resp['Content-Disposition'] = 'attachment; filename="{}"'.format(os.path. basename(fullImgPath)) resp["Content-Type"]= ...

Tips for ensuring all data is downloaded in Firebase (Firestore) Storage before proceeding?

I am currently developing a light dashboard in Vue that connects to Firestore and Storage. As someone who is not an expert, I have encountered a roadblock in what should be a simple task. The issue lies with a function that is meant to retrieve all URLs ba ...

Validating Code Retrieved from Database Using Ajax Requests

I can't figure out why my code isn't working as expected. I'm attempting to validate a code by calling a function in the controller. If the code already exists, I want to display a 'failed' message and prevent the form from being s ...

When executing a JavaScript program, an error with the message 'MODULE_NOT_FOUND' appeared, causing the internal module loader in Node to throw an error at line 1145

node:internal/modules/cjs/loader:1145 throw err; ^ Error: Module 'C:\Users\sande\3D Objects\JavaScript-Lesson\lesson08.js' not found at Module._resolveFilename (node:internal/modules/cjs/loader:1142:15) at Mo ...