Skip to main content

Dynamic Nested Forms with Stimulus JS Discussion

General • Asked by Chris Oliver

Yes this is what ive been waiting for!


Great, I like your screencasts about Stimulus a lot!


That's a great one!

I'd suggest using <button type="button"> elements instead of links. This way you don't have to use event.preventDefault() because by default a button doesn't do anything.

Also, for both links and buttons, the default Stimulus action is click so the click-> part in the data-action is optional.

I included these revisions and the code still works fine, and is now more readable.

Thanks for sharing.


Great episode !
I use cocoon often in my invoicing apps projects to allow people to add items into a bill.
Next, I'll give stimulus way definetly a chance !


Well done! Keep the Stimulus JS tutorials coming!

I wonder if there is a tutorial you could assemble where we'd see Turbolinks and Stimulus working together, to provide some context around why Basecamp promotes them.

Even cooler would be a use case where someone today is typically reaching for Rails with React, but instead having the tutorial depicting how the Rails/Turbolinks/Stimulus combo would solve the same use case.

Thanks!


Great episode Chris! Totally bypassed an entire gem.


Keep the stimulus stuff coming!


This is really great stuff. Stimulus with rails just completes the toolkit so nicely.


How do you display the Tasks in the Project Index and Show Views?

Nevermind, got it working.


Great episode, I've been using Cocoon in past projects to add a "content section block" to a page, which then has different types of content associated to it (ie textarea, text with image, image gallery, etc.), so that it can then be reordered if needed.

I'd like to use more Stimulus moving forward, so interested in trying this technique out.

One part that I could never quite suss out, was when adding a content section block with a file auto uploader, such as jQuery File Upload (for multiple images/or documents) I couldn't upload anything until the content section block was saved to the database via a page save.

I guess with Stimulus, a new nested field could be saved to the database within the Stimulus controller, when it's added to the form? Then there would be an ID to use for any files to upload against.

Saying that, with a move away from jQuery, would Stimulus be able to deal with file uploads in a simular way to jQuery File Upload or is it best to leave that sort of thing to ActiveStorage?

I've been playing around with Stimulus over the last couple of evenings, trying to implement drag and drop sorting. Everything is working as expected when swapping elements on the page around. I seem to be fighting a battle, however, getting an AJAX post to send data from my stimulus controller to my rails controller. No parameters are being passed in the AJAX post.

In my stimulus contrller I have the following code

var data =  {
      data: {
        name: "test"
      }
    };

    Rails.ajax({
      dataType: 'json',
      type: 'POST',
      url: '/projects/test',
      data: { data },
      success: function(data) {
        console.log(data);
      },
      error: function (response) {
        console.log(response);
      }
    })

When the code is triggered I'm not seeing anything parameters passed over in the log. All I see is

Started POST "/projects/test" for ::1 at 2019-03-06 22:30:42 +0000
Processing by ProjectsController#test as JSON
<ActionController::Parameters {"controller"=>"projects", "action"=>"test"} permitted: false>

Looking in the Chrome Inspector, it looks like the data is being sent as [object Object]. If I add a query string to the URL, the parameters show as expected. I've tried all sorts of combinations of using JSON.stringify and JSON.parse, but no joy.

If I change the type to "GET" I get the following in my log

Started GET "/projects/test?[object%20Object]" for ::1 at 2019-03-06 22:47:40 +0000
Processing by ProjectsController#show as JSON
  Parameters: {"object Object"=>nil, "id"=>"test"}

It feels like i've exhausted all options, with no luck. I'm probably missing someting obvious. If anyone has an pointers or suggestions, they'd be most welcome. Think in the meantime I'll go back to Cocoon, just to get it working and then refine it later


Hey there! first comment here, trying to follow up the tutorial but missing the template.rb file you're using to start the project... i'm quite sure missing something basic :)

can someone help?

thanks!

you can find it here: https://github.com/excid3/jumpstart. See readme for instructions.

But frankly, I don't like using this template. In more than a few tutorials that this template is used, I encounted bugs that only slowed down the progress of following through the tutorial, instead of helping it.

Because the jumpstart script is constantly updated, older tutorials using it see a breakage.

then what way you'd suggest to follow up tutorials? cloning the project?
thx!


interesting replacement for cocoon. Wondering, does anyone see something here that cocoon does cover and this does not? Weighing options here, and want to be wary of moving away from the mature cocoon implementation and perhaps missing some implicit functionality it offers, gotchas, etc that this may not cover.

side note:
I have implemented a text_field_tag version of this using stimulus where it wasn't attached to a nested association directly and used a similar setup to this...template is a cool alternative to building the inputs in JS - thanks!


Great episode.. (I also would love to see the same stuff with JSON(B) fields (I mean child elements as part of a hash, I have always great troubles with validation and types regarding Hash-type columns)
I also have an idea for a follow up video:
How to use stimulus to manage multi-step forms (with or without AJAX -but I don't know if doing this without AJAX makes sense since it will need JS anyway)

Without AJAX, I wonder how to embed the elements of the next steps in the first page?
Using the template element for each subsequent steps?

And with AJAX, I wonder how to insert the server response as a replacement of the current form?

BTW keep the good work!


Hey Chris! I'm really enjoying episodes like this one that seek to replace common jQuery solutions. There's a number of people on my team who come from the WP world, who used jQuery a lot, but are now trying to stay away from it. The simplicity and quickness here is hard to beat.

One thing I ran into, and I don't know if it's something with Firefox, is that the items within the template were submitting to the server, causing it to not properly convert the strong params. Any one else seeing this? Rails didn't like "NEW_VALUE" as a hash key. (I'm using it for a nested has_many)

I was able to solve it by adding a disabled: local_assigns.fetch(:disabled, false) attribute to all inputs in my fields partial, passing that value as true for my template partial, and then removing that disabling in Stimulus via our "addAssociation" method.


Would there be a way to order the objects returned on edit? For example, each item I have has a date, quantity, and notes field. How would I sort by date?


here is how I did it with asset pipeline and coffee script (adapted from your code)

class window.NestedFormController extends Stimulus.Controller
  @targets = ["links", "template"]

  add_association: (event) ->
    event.preventDefault()

    content = @templateTarget.innerHTML.replace(/NEW_RECORD/g, u.rand())
    @linksTarget.insertAdjacentHTML("beforebegin", content)

  remove_association: (event) ->
    event.preventDefault()

    wrapper = event.target.closest(".nested-fields")

    if wrapper.dataset.newRecord == "true"
      wrapper.remove()
    else
      wrapper.querySelector("input[name*='_destroy']").value = 1
      wrapper.style.display = "none"

window.application.register 'nested-form', window.NestedFormController

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 20,000+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.