What is the best method to run JavaScript code once Rails' remote form has finished executing the `disable_with` functionality?

While using the disable_with feature, I am facing an issue where the button text does not persist due to the functionality of disable_with overriding it. Upon removing the data: { disable_with: '...' section, the buttons update correctly.

Is there a way to execute actions after the completion of the disable_with functionality?

form:

<%= form_for @user, html: {id: 'follow-form'}, remote: true do |f| %>
    <%= button_tag id: 'follow-btn', data: { disable_with: '...' } do %>
        Follow
    <% end %>
<% end %>

js:

$('#follow-form').on('ajax:success',function(data, status, xhr){
    if (status.action == 'follow') {
        $('#follow-btn').text('Unfollow');
    } else {
        $('#follow-btn').text('Follow');
    }
}

Answer №1

Perhaps try it without using disable_with and:

$('#follow-form').on('ajax:send',function(data, status, xhr){
    $('#follow-btn').text('Please be patient...').attr({disabled: true});
});

Then, when the AJAX request is successful:

$('#follow-form').on('ajax:success', function(data, status, xhr){
    if (status.action == 'follow') {
        $('#follow-btn').text('Unfollow').attr({disabled: false});
    } else {
        $('#follow-btn').text('Follow').attr({disabled: false});
    }
});

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

Upon initialization, navigate to the specified location in the route by scrolling

My page has various components stacked one after the other, such as: <about></about> <contact></contact> I am utilizing the ng2-page-scroll to smoothly scroll to a particular section when a navigation link is clicked. However, I a ...

Error Alert: JQuery Pop Up Issue

Struggling with getting my JQuery Pop-Up Box to work properly. Any guidance for a newbie like me on how to fix it would be greatly appreciated. Here's the code I've been working on: <!-- POP UP HTML --> <div class="infocontainer"> ...

Encountering difficulties while attempting to delete with a router.delete command - receiving a 404 not

Within my application, I am passing the request parameter 'id' in the router.delete method and communicating it with the Vuex service. However, when triggering the action, an API call is made but it results in a 404 error indicating "not found" a ...

Using AJAX for form submission and managing the response in a Wordpress site

I have a website built on Wordpress. I have created a contact form that is submitted using AJAX. Below is the code snippet: <script type="text/javascript"> jQuery(document).ready(function(){ $("#error_box").hide(); $('#contact_form&ap ...

Implementing jQuery Rollovers for Independent Elements

Hello everyone, I'm a new user seeking assistance on the site! I am currently working on implementing buttons that reveal a table when rolled over and change their own image to a tab, but here lies the problem - I want the tab image to remain visible ...

How can I prevent text highlighting on a website?

Is there a way to lock the copy button on my site without restricting the save as button, which is activated by right click? I want users to be able to save the website as an HTML file, but prevent them from copying text. Can this be achieved using Javas ...

There was an issue with the RouteHandler function at line 21 in the ./.cache/root.js

Attempting to create a Gatsby project without using the CLI to gain insight into how the CLI-generated components work. However, encountering the following runtime error popup in the browser: Unhandled Runtime Error One unhandled runtime error has been de ...

Creating a dashed circle in Three.js

I attempted to create a dashed circle following the pattern for dashed line, but unfortunately, the result was not as expected. Here is the code snippet I used: var dashMaterial = new THREE.LineDashedMaterial( { color: 0xee6666, dashSize: 0.5, gapSize: 0. ...

What is preventing me from displaying the results on the webpage?

Currently, I am utilizing Express alongside SQLite and SQLite3 modules. However, upon running the server, the data fails to display on the initial request. It is only after a page refresh that the data finally appears. I attempted a potential solution by ...

Combining React Material UI with an endless scrolling component to dynamically load table data

I need some help with using react infinite scroll within a react material table. I attempted to implement it but the scrolling affected the entire page instead of just the table body. I want the headers to remain sticky while only the table body should h ...

Chrome will automatically retry an AJAX POST request if it times out after 10 seconds

I am in the process of creating a React JavaScript application using a back end powered by Node.js and Express. The software versions being used are as follows: React: ^16.0.0 Node: v8.0.0 Express: ^4.14.0 Chrome: Version 63.0.3239.84 (Official Build) (64 ...

The data tables on the server side transmit POST data in JSON format

I am attempting to implement server-side processing with data tables: $("#my-table-id").DataTable( { serverSide: true, ajax: { url: '/request/path/', type: 'POST', } }); The current method of sending data as UR ...

What could be causing the error message "Uncaught ReferenceError: responseParsedJSON is not defined" in the ajax function?

I've encountered a problem while working on a project that involves retrieving available beds based on the selected ward. If the bed is already taken by another ward, only show available beds; otherwise, display all beds. I attempted to use ajax as a ...

Best practices for managing CSV files in Next.js with TypeScript

Hello, I am currently working on a web application using nextjs and typescript. One of the features I want to implement is a chart displaying data from a csv file. However, I am not sure if using a csv file is the best choice in the long run. I may end up ...

What is the best way to add information stored in localStorage to an element on the webpage?

At the moment, I am developing a Bookmark manager that stores data in localstorage and then adds the saved data from localstorage to the DOM. However, I am facing an issue where the code inside fetchUrl() is not getting appended to the DOM. Here is what I ...

The ASPX validation will not be able to access the .js file

I am facing an issue with client-side validation using JavaScript (.js). Despite linking the path in the head section, the ASP file doesn't seem to reach the JavaScript file. <head runat="server"> <meta http-equiv="Content-Type" content="tex ...

How can I utilize jQuery to add tags in a box?

I have an idea for a feature similar to the Stack Overflow tag insert. My goal is to have a box where I can type in a tag, click 'Add', and see it appear above. Additionally, I want this action to update an array called 'SelectedTags'. ...

Modifying the Carousel Interval on the Fly: A Guide

I've been trying to figure out how to adjust the interval time on a Bootstrap carousel. I know you can set it initially using: $('.carousel').carousel({interval: 1000 }); But what if I want the interval to change to 2 seconds after, let&ap ...

unable to make a request to the express server with axios

I am in the process of developing a chat application similar to whatsapp. One of the key features I'm working on is that when a user clicks on another person's name, their chats will be displayed. However, currently, I'm facing an issue wher ...

Deactivate debugging data for Tensorflow JS

Is there a way to turn off all debugging logs in Tensorflow JS similar to what can be done in Python with setting an environment variable and calling a function? Disable Debugging in Tensorflow (Python) According to the top answer: import os os.environ[ ...