Form_with is Turbo the missing link for me?

1

Hi
Im trying to get a Rails application to do with hotwired html from the server. Im considering if im missing the use of Turbo or if have just created a defect for my self by mixing one to many examples :slight_smile:
My break down of the work to be done:
1 Call new_my_thing_path get a new @myThing (works)
2 Call using stimulus and get html back (works)
3 In stimulus append HML to my target (works)
4 Fill in form and post back as remote (fails)
5 Catch XHR in stimulus on ajax success and fill in HTML response (controller dp_appender_list is created land oaded but not called as step 4 fails)

1 (from index.html.erb):

  <div data-controller="dp-bs-modal"
                          data-dp-bs-modal-url-value="<%= new_default_job_discipline_path %>"
                          data-dp-bs-modal-modal-id-value="modal"
                          data-dp-bs-modal-modal-placeholder-id-value="modalPlaceholderId"
                          data-action="click->dp-bs-modal#newModal">
                          <%= link_to (fa_icon "plus"),'javascript:void(0)' %>
                        </div>
                        <div id="modalPlaceholderId"></div>
                      </div>

Here modalPlaceholderId is outside the controller scope. Its a quick-fix, if it is inside scope, data-action=“click->dp-bs-modal#newModal” grabs every interactions with the modal.

2-3: from( dp_bs_modal_controller)
import { Controller } from “stimulus”
const bs = require(‘bootstrap’);

export default class extends Controller {
static targets = [“modal”];
static values = { url: String,
modalId: String,
modalPlaceholderId: String
};

newModal() {
    if (this.hasModalTarget) {
        this.modalTarget.remove();
    }
        fetch(this.urlValue)
            .then((r) => r.text())
            .then((html) => {
                const fragment = document
                    .createRange()
                    .createContextualFragment(html);

                //this.element.appendChild(fragment);
                console.log(fragment);
                console.log(this.modalPlaceholderIdValue)
                document.getElementById(this.modalPlaceholderIdValue).appendChild(fragment);
                let dpBsModal = new bs.Modal(document.getElementById(this.modalIdValue), {keyboard: false})
                dpBsModal.show();
            });}}

The remove part " this.modalTarget.remove()" should may-haps live somewhere else, for now this is what i could do.

3: (new.html.erb)

Add Default Job Discipline

    <%= render 'form', default_job_discipline: @default_jpb_discipline %>

    </div>
    </div>

and (_form.html.erb)

<%= form_with(model: [@default_job_discipline],  data: { action: "ajax:success->appender-list#apppend" } )do |form| %>
  <div class="<%= form_field_style() %>">
    <%= form.text_field :code, class: "form-control", id: "labelFormName", placeholder: "Something", type: "text" %>
    <%= form.label :name, "Code", class: "form-label", for: "labelFormName" %>
  </div>
  <div class="<%= form_field_style() %>">
    <%= form.text_field :discipline, class: "form-control", id: "labelFormName", placeholder: "Something", type: "text" %>
    <%= form.label :name, "Discipline", class: "form-label", for: "labelFormName" %>
  </div>
  </div>
  <div class="<%= modal_footer_style %>">
    <%= form.submit "Save", class: form_button_save_style() %>

<% end %>
<button type="button" class="<%=modal_footer_cancel_style()%>" data-bs-dismiss="modal" aria-label="Close">Close</button>

generated HTML on modal pop-up:

    <div data-controller="dp-appender-list">

<form data-action="ajax:success->appender-list#apppend" action="/default_job_disciplines" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" name="authenticity_token" value="RgOatoaIpJklRsMOuNUR372JM0JfVHDj0zaXwBqwyppcgjdENKfbmpPYY2GYz1eJuQG39H0ER1c8KNquqBBoDg==">
  <div class="form-floating mb-3">
    <input class="form-control" id="labelFormName" placeholder="Something" type="text" name="default_job_discipline[code]">
    <label class="form-label" for="labelFormName">Code</label>
  </div>
  <div class="form-floating mb-3">
    <input class="form-control" id="labelFormName" placeholder="Something" type="text" name="default_job_discipline[discipline]">
    <label class="form-label" for="labelFormName">Discipline</label>
  </div>
  </form></div>
  <div class="modal-footer">
    <input type="submit" name="commit" value="Save" class="btn btn-success" data-disable-with="Save">

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>

    </div>
    </div>
</di

My problem is here that the save button does fire a call to the backend. I cant find any trace of it neither in browser of rails logs. The button just toggles and then nothing else.
My thoughts are:
-I dont fully understand the limitations of ujs and should use Turbo instead?
-I dont fully understand the implications of my doings and have created a bug somewhere?
-I going about this with an incorrect mental model (step 1-5) and need help to understand where my mental model of this falls short.

Any help and guidance are much appreciated.
Best
Jens

2

Hi
Found the dumb double div in the form. Now it works :slight_smile:
Im still wondering when the shift to Turbo is the right, can any give pointers to this?

Best
Jens