When submitting the club form, my goal is to automatically generate a club admin within the user list in activeadmin

My dashboard.rb setup looks like this:

ActiveAdmin.register_page "Dashboard" do

  menu priority: 1, label: proc{ I18n.t("active_admin.dashboard") }

  content title: proc{ I18n.t("active_admin.dashboard") } do
    # form render 'form'
    # This code snippet demonstrates a basic dashboard layout with columns and panels.

    columns do
      column class: "users" do
        table_for User.all.order(:created_at), input_html: { class: "table table-bordered" } do
          column "User Id", :id
          column "Email", :email
          column "User Role" do |role|
            role.profile.role
          end
        end
      end

      column do
        render partial: 'form', locals: { club: Club.new }
      end

    end
  end
end

The form partial can be found at app/views/admin/dashboard/_form.html.erb and it is as follows:

<%= semantic_form_for :club, url: admin_clubs_url, method: :post, builder: ActiveAdmin::FormBuilder, remote: true do |club| %>
<%= club.inputs "Details" do %>
    <%= club.input :name, label: 'Club Name' %>
    <%= club.input :email, label: 'Club Admin Email', input_html: { value: '' } %>
    <%= club.inputs for: [:club_profile_attributes] do |ff| %>
        <%= ff.input :country_id, as: :select, collection: Country.get_id_and_name, include_blank: false %>
        <%= ff.input :logo, as: :file %>
        <%= ff.input :email, label: 'Club Email' %>
        <%= ff.input :phone_number_1, label: 'Phone Number' %>
    <% end %>
    <%= club.actions %>
<% end %>

I am looking to implement an ajax request in my dashboard.rb file to dynamically update the list of users whenever a new club is created. How can I achieve this functionality?

Answer №1

$('#form_id').on('ajax:success', function(event, data, status, xhr){});

ajax:success and various other personalized events are great for managing responses from forms that use remote: true. Make sure to include the updated user list in the response data, then proceed with appending or replacing the user list.

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

Cricket score update features on the client side

Looking for assistance with client-side code development! I am currently working on an Android application using Ionic that involves live cricket scores. I have purchased a cricket API and understand how to connect to it using Node.js on the server side. ...

Discovering which page the form was submitted from using xsl template

Incorporating code like <input type="hidden" value="contact-form-1" name="getpage"> into my form is something I'm interested in, as it allows me to retrieve the URL of the page from which the form was submitted. The challenge arises because the ...

Connecting the mat-progress bar to a specific project ID in a mat-table

In my Job Execution screen, there is a list of Jobs along with their status displayed. I am looking to implement an Indeterminate mat-progress bar that will be visible when a Job is executing, and it should disappear once the job status changes to stop or ...

Assign the filename to the corresponding label upon file upload

I've customized my file uploader input field by hiding it and using a styled label as the clickable element for uploading files. You can check out the implementation on this jsFiddle. To update the label text with the actual filename once a file is s ...

Assigning binary messages a structure similar to JSON for the purpose of easy identification

Is there a way to differentiate binary messages from a server by tagging them with a type attribute? Currently, I am working with node.js and sending binary images as blobs to my client. However, I now also need to send other file types like .txt over the ...

Stop the Nav bar item from collapsing

Alright, let's talk about the scenario: The situation is that I have a basic, plain, nav nav-tabs navigation bar with a few elements and a rightmost item (with pull-right) positioned as an <li> element which includes a dropdown. As the window ...

How to access and retrieve selected checkbox values using jQuery

<form id="myform"> <input type='checkbox' name='foo[]' value='1'> <input type='checkbox' name='foo[]' checked='true' value='2' > <input type='checkbox' ...

Retrieving a JavaScript variable in PHP on the identical page by simply altering the div tag within the URL

I have a webpage called abc.php that showcases a table of image names. When a user clicks on an image name, an overlay page is loaded at #openModal on the same abc.php page. This new overlay page displays a list of sensor values related to the selected ima ...

Issue with Custom Tooltip in Mootools 1.2 - Images displaying prematurely before hover action

Encountering an issue with Mootools 1.2 Tips (custom tooltips) We are currently utilizing Joomla with the latest update that includes Mootools 1.2, and I am working with the following JS code: $$('.tipz').each(function(element,index) { ...

Organizing a set of div elements based on their ID attributes

I am faced with the challenge of sorting a list of divs based on their ID values, which are in the format "indexNumber123". Instead of arranging them alphabetically, I want to sort them numerically as "indexNumber1", "indexNumber2", "indexNumber3" before d ...

Having trouble retrieving parameters from the ajax call in the Razor controller

My task involves dynamically retrieving a PartialView using an AJAX call to update a div on the main page after the value of an input select (dropdown list) changes. Here are the steps I followed: I created a view (without a PageModel) with the model dec ...

Updating state within an eventListener in useEffect with an empty array does not trigger a re-render

This text is unique because I tried to enhance it with an updater function that did not yield the desired result. Here is the code snippet: const [counter, setCounter] = useState(0); useEffect(()=> { const fetchSessions =async ()=> ...

Flashing text compatibility across all browsers

I'm looking for a way to create text that blinks on all major web browsers. Initially, I attempted using the <blink> HTML tag, but unfortunately, it only works in Mozilla Firefox. Next, I experimented with CSS: <style> .blink {text-deco ...

Ways to select the element based on a specific CSS property value in the inline style

As a novice in the world of Javascript, I am currently attempting to select an element within an array of images where the opacity is set to 1. Could someone please guide me on how to achieve this? I've tried using hasAttribute, but I'm unsure ho ...

JavaScript doesn't pause for the data to come back, resulting in an undefined value

When I call the function "classTableData" on a button click, my allData variable becomes undefined. The problem seems to be that it processes the next line of code without waiting for the results, causing allData to remain empty. Can anyone provide some ...

The table width is malfunctioning on Firefox when viewed in HTML

I have been puzzled by the fact that I am unable to adjust the width of the table th in Firefox browser to the smallest value. However, in Chrome browser, this functionality works perfectly. I simply want to divide the values of my td into three rows as sh ...

infinite loop issue with beforeRouteEnter

I'm experiencing an issue with Vue Router. The scenario is to load / initially, retrieve data from there, and then navigate to the /chat/:chatId route to display the interface using the :chatId parameter obtained from an API. The routes configured a ...

Modify the href value by matching it with the parent div attribute

I am working on an HTML project <div class="1" style="" title="NeedthisText TextIDontneed"> <div class="2> <div class="3"> <a target="_blank" href="/NeedToChange/DispForm.aspx?ID=1"></a> </div> </div> &l ...

Is it feasible to create that specific character using Google Charts?

Quick question here. Can a Char be generated in Google Charts? Also, do you have any advice on how to do this? Chart1 The blank space under the chart is crucial. ...

Following the upgrade of Angular, the webpack module source-map-loader is encountering an error: "this.getOptions is not a function"

Currently in the process of constructing my angular project using webpack alongside source-map-loader to extract source maps, like this: module.exports = { // ... module: { rules: [ { test: /\.js$/, enforce: "pre&quo ...