inspinia | This is only a copy of INSPINIA - Responsive Admin Theme | Dashboard library

I'm fairly new to developing in Rails (developing in general to be honest), so I hope somebody can give a clue on how to solve this...

I'm creating a rails web-app (ruby 2.6.5, rails 6.0.1) using the Inspinia template from WrapBootstrap.

The template has a navigation side-bar with pre-configured behavior (drop-down/collapsible second level menu items and such). This was working fine.

However I need to create a view page to control commissions, so to mark the paid commissions I created a simple_form form with a single checkbox that will toggle the 'paid' vs. 'not-paid' attribute.

What happens is that when I click the checkbox, I get an error that the turbolinks was not found, even though I have the turbolinks gem.

So I included //= require turbolinks in application.js

But when I do this, the collapsible menu items with sub-levels in the navigation side-bar just stay open and don't collapse anymore.

I'm not sure what to do, because I need to require turbolinks for my form to work properly, but I also want the side-bar menus to collapse.

screenshot of the issue

Example of HTML menu item (when inspecting the HTML in the browser, with the side-bar working properly, there is class called 'aria-expanded' that doesn't show on my normal HTML):

I am using Inspinia theme and I can't get the carousel image to resize on mobile devices. The example of the page is here. The stylesheet can be seen here.

Now for the page the images are specified like:

My problem is with the inspinia.js file in rails 6.

I have the file inspinia.js and application.js in :-

app / javascript / pack

Try to integrate it in the following ways:

Here is my problem:

In PHP Laravel I have a foreach loop that displays messages on the screen including a checkbox. Every message has its own checkbox. I also have a checkbox at the top of all the messages. I would like to assign a function to that checkbox to check all the checkboxes. I know this question has been asked in the past, but unfortunately those answers didn't work for me. Does someone have a solution for me?

I'm using: Laravel, Inspinia, Bootstrap 4

Thanks in advance!

Here is my code:

Original Post

My custom dashboard has buttons that contain both a Font Awesome icon and a text description of the button or form action. I have a problem with my forms and buttons that a form doesn't submit upon clicking on a font awesome icon within a button that has a jQuery click event. I could use some help figuring out what I'm doing incorrectly.

In this image example, there is a font awesome magnifying glass "search" icon, followed by the text "Search".

If I click anywhere on the button, my jQuery works correctly by replacing the inner HTML of the button with the font awesome icon spinner icon and with text "Searching ...". If I click directly on the font awesome icon, the form does not submit. If I click anywhere else on the button aside from the font awesome icon, the form submits properly. If I remove my jQuery click() functions that replace the innerHTML when buttons are clicked, the form submits properly even when the font awesome icon is directly clicked. It has something to do with the jquery click html code but I'm not sure what I'm doing incorrectly.

What am I doing wrong with my jQuery that's causing the form to not submit when the font awesome icon is clicked within the button?

This image shows that the jQuery correctly replaced the inner HTML of the button, but the form doesn't submit when the font awesome icon is clicked on directly. The form only submits when the button is clicked anywhere else except for directly on the font awesome icon.

Here's my jQuery and HTML for this Search button