Trying To Get ChatGPT 4 To Solve My Hotwire Form Submission Problem
As I've been updating my ColdFusion blog to use Hotwire, I've been running into compatibility issues that need to be addressed. For the most part, these issues are easy to solve; but, I have one that I can't quite get working: When Turbo Drive submits a form, it scrolls back to the top of the page (to be expected). However, my form action historically uses a fragment to scroll the user back down to the form element. Unfortunately, Turbo Drive does not honor this fragment. Everyone has been talking about how awesome ChatGPT is at writing code. So, I figured this might be a good opportunity to sign-up for Open AI and give it a shot.
TL;DR
It was really cool to see ChatGPT iterate on a solution. Heretofore, this is only something I've heard people talk about - so, seeing it for myself was quite thrilling. That said, ChatGPT ultimately kept going in circles, offering up the same problematic approaches. I felt like I needed to be an expert in the Hotwire framework just so I could guide ChatGPT away from solutions that didn't work.
What follows is my ChatGPT transcript.
BEN NADEL: Using JavaScript and the Hotwire framework, how can I get a form to scroll back down to itself after Turbo Drive executes the form submission?
To scroll a form back to itself after Turbo Drive executes the form submission using JavaScript and Hotwire framework, you can use the scrollIntoView() method in the DOMContentLoaded event listener.
Here's an example code snippet that demonstrates how to do this:
document.addEventListener("DOMContentLoaded", function() {
// Get the form element
const form = document.querySelector("form");
// Listen for the Turbo Drive form submission event
form.addEventListener("turbo:submit-end", function() {
// Scroll the form back into view
form.scrollIntoView();
});
});
In this example, we're listening for the turbo:submit-end event, which is triggered by Turbo Drive after the form submission is complete. When the event is fired, we call the scrollIntoView() method on the form element, which scrolls the form back into view.
Note that this code assumes that you have a form element on the page that you want to scroll back to. If you have multiple forms on the page and want to target a specific one, you'll need to update the selector used to get the form element.
BEN NADEL: Turbo Drive performs scroll restoration after the page has loaded, including the
turbo:submit-endevent. As such, Turbo Drive will override thescrollIntoView()call in your event handler.
You're correct! Turbo Drive automatically restores the scroll position of the page after a navigation or form submission, including the turbo:submit-end event. This means that if you use scrollIntoView() to scroll to a specific element after a form submission, Turbo Drive will override that scroll position with the previously saved scroll position.
To work around this issue, you can use the scrollIntoView() method inside a setTimeout function with a timeout of 0 milliseconds. This will allow the Turbo Drive scroll restoration to complete before your scrollIntoView() method is executed.
Here's an updated code snippet that demonstrates this approach:
document.addEventListener("DOMContentLoaded", function() {
// Get the form element
const form = document.querySelector("form");
// Listen for the Turbo Drive form submission event
form.addEventListener("turbo:submit-end", function() {
// Scroll the form back into view after a short delay
setTimeout(function() {
form.scrollIntoView();
}, 0);
});
});
In this example, we're using setTimeout with a timeout of 0 milliseconds to defer the scrollIntoView() method until after the Turbo Drive scroll restoration is complete. This ensures that your scroll position is not overridden by Turbo Drive.
Note that using setTimeout with a timeout of 0 milliseconds is a commonly used technique to defer execution of code until after the current JavaScript execution context has completed.
BEN NADEL: This doesn't work because Turbo Drive is swapping the content of the
bodytag. As such, theformreference no longer exists in the DOM after the page is loaded.
You're right, if Turbo Drive is swapping the content of the body tag, the form element referenced in the original code may no longer exist in the DOM after the page is loaded. In that case, you can use event delegation to listen for the turbo:submit-end event on a parent element that is not being replaced by Turbo Drive.
Here's an updated code snippet that demonstrates using event delegation to listen for the turbo:submit-end event on the document object:
document.addEventListener("turbo:submit-end", function(event) {
const form = event.target;
// Scroll the form back into view after a short delay
setTimeout(function() {
form.scrollIntoView();
}, 0);
});
In this example, we're listening for the turbo:submit-end event on the document object, which will capture the event regardless of which element triggered it. When the event is fired, we use event.target to get a reference to the form element that triggered the event. We then use setTimeout with a timeout of 0 milliseconds to defer the scrollIntoView() method until after the Turbo Drive scroll restoration is complete.
Note that with event delegation, you can listen for events on a parent element that is not being replaced by Turbo Drive, such as the document object, to ensure that your event listeners continue to work correctly after navigation or form submissions.
BEN NADEL: While the
documentobject will be persistent, theevent.targetstill becomes irrelevant for the same reason (the DOM element no longer exists).
You're correct, if the form element no longer exists in the DOM after the page is replaced by Turbo Drive, then event.target will no longer be a reference to the original form element. In that case, you can use the event.detail.formSubmission.formElement property to get a reference to the original form element.
Here's an updated code snippet that demonstrates using event.detail.formSubmission.formElement to get a reference to the original form element:
document.addEventListener("turbo:submit-end", function(event) {
const form = event.detail.formSubmission.formElement;
// Scroll the form back into view after a short delay
setTimeout(function() {
form.scrollIntoView();
}, 0);
});
In this example, we're using the event.detail.formSubmission.formElement property to get a reference to the original form element that triggered the turbo:submit-end event. We then use setTimeout with a timeout of 0 milliseconds to defer the scrollIntoView() method until after the Turbo Drive scroll restoration is complete.
Note that the event.detail.formSubmission.formElement property is part of the Turbo Drive API and provides a reference to the original form element that triggered the form submission. Using this property ensures that you're getting a reference to the correct form element, even if the original form element no longer exists in the DOM.
BEN NADEL: You keep making the same mistake. You keep trying to find a way to reference the original form element. But, the problem is, I need to scroll down to the new form that is rendered after the body content is swapped-out.
You're absolutely right, I apologize for the confusion. To scroll to the new form element that is rendered after the body content is swapped-out, you can use the turbo:load event instead of the turbo:submit-end event.
Here's an updated code snippet that demonstrates using the turbo:load event to scroll to the new form element:
document.addEventListener("turbo:load", function(event) {
const form = event.target.querySelector("form");
if (form) {
// Scroll the form back into view after a short delay
setTimeout(function() {
form.scrollIntoView();
}, 0);
}
});
In this example, we're using the turbo:load event to listen for when the new content has been rendered after a Turbo Drive navigation or form submission. We use event.target to get a reference to the new content that was loaded, and then use querySelector to find the new form element within that content. If a form element exists, we use setTimeout with a timeout of 0 milliseconds to defer the scrollIntoView() method until after the Turbo Drive scroll restoration is complete.
Note that using the turbo:load event ensures that the form element referenced in the event listener is the new form element that was rendered after the body content was swapped-out by Turbo Drive.
BEN NADEL: This will also scroll to the form on initial page load; however, I only want to scroll to the form after the form is submitted.
You're right, the turbo:load event will fire both on initial page load and after a form submission, which may not be what you want. To only scroll to the form after a form submission, you can add a check for the data-turbo-permanent attribute on the form element.
Here's an updated code snippet that only scrolls to the form after a form submission:
document.addEventListener("turbo:load", function(event) {
const form = event.target.querySelector("form[data-turbo-permanent]");
if (form) {
// Scroll the form back into view after a short delay
setTimeout(function() {
form.scrollIntoView();
}, 0);
}
});
In this example, we're using the turbo:load event to listen for when the new content has been rendered after a Turbo Drive navigation or form submission. We use event.target to get a reference to the new content that was loaded, and then use querySelector to find the new form element with the data-turbo-permanent attribute. The data-turbo-permanent attribute is used by Turbo Drive to mark elements that should persist across page loads, so this check ensures that we're only scrolling to a form element that was submitted in the current Turbo Drive session.
If a form element with the data-turbo-permanent attribute exists, we use setTimeout with a timeout of 0 milliseconds to defer the scrollIntoView() method until after the Turbo Drive scroll restoration is complete.
Note that using the data-turbo-permanent attribute check ensures that the form element referenced in the event listener is only the form element that was submitted in the current Turbo Drive session.
BEN NADEL: When you add the
data-turbo-permanentattribute to theform, its contents are no longer updated as a result of the form submission.
You're right, adding the data-turbo-permanent attribute to the form element will prevent its contents from being updated after the form submission. Instead, you can add the data-turbo-permanent attribute to a container element that wraps the form element, and then use querySelector to find the form element within that container.
Here's an updated code snippet that scrolls to the form element inside a container element with the data-turbo-permanent attribute:
document.addEventListener("turbo:load", function(event) {
const container = event.target.querySelector("[data-turbo-permanent]");
if (container) {
const form = container.querySelector("form");
if (form) {
// Scroll the form back into view after a short delay
setTimeout(function() {
form.scrollIntoView();
}, 0);
}
}
});
In this example, we're using the turbo:load event to listen for when the new content has been rendered after a Turbo Drive navigation or form submission. We use event.target to get a reference to the new content that was loaded, and then use querySelector to find the container element with the data-turbo-permanent attribute. We assume that the form element is a direct child of this container element, and use querySelector again to find the form element within the container.
If a form element exists within the container, we use setTimeout with a timeout of 0 milliseconds to defer the scrollIntoView() method until after the Turbo Drive scroll restoration is complete.
Note that using a container element with the data-turbo-permanent attribute ensures that the form element can still be updated with new content after a form submission.
BEN NADEL: That is not true, by moving the
data-turbo-permanentattribute up in the DOM, all you're doing is preventing a larger portion of the DOM from being updated as a result of the form submission.
You are correct, I apologize for the confusion in my previous response. Adding the data-turbo-permanent attribute to a container element will not prevent the form element from being updated after a form submission, but it will prevent the container and its children from being replaced during a Turbo Drive navigation.
To scroll to the form element after a form submission, you can use the turbo:submit-end event, which is triggered when a form has been successfully submitted via Turbo Drive. Here's an updated code snippet that scrolls to the form element after a form submission:
document.addEventListener("turbo:submit-end", function(event) {
const form = event.target.querySelector("form");
if (form) {
// Scroll the form back into view after a short delay
setTimeout(function() {
form.scrollIntoView();
}, 0);
}
});
In this example, we're using the turbo:submit-end event to listen for when a form has been successfully submitted via Turbo Drive. We use event.target to get a reference to the new content that was loaded after the form submission, and then use querySelector to find the form element within the new content.
If a form element exists, we use setTimeout with a timeout of 0 milliseconds to defer the scrollIntoView() method until after the Turbo Drive scroll restoration is complete.
Note that using the turbo:submit-end event ensures that we only scroll to the form element after a form submission, and not on initial page load or other Turbo Drive navigations.
BEN NADEL: This breaks for the same reasons as before - you keep trying to scroll down to the form element that is in the DOM prior to the
bodycontent being changed. Once Turbo Drive swaps out thebodycontent, thatformreference will no longer be there.
You are correct, I apologize for the confusion in my previous responses. In order to scroll to the form element after a form submission using Turbo Drive, we need to wait for the turbo:load event to trigger after the new content has been rendered.
Here's an updated code snippet that waits for the turbo:load event and then scrolls to the form element:
document.addEventListener("turbo:load", function(event) {
const form = event.target.querySelector("form");
if (form) {
// Scroll the form back into view after a short delay
setTimeout(function() {
form.scrollIntoView();
}, 0);
}
});
In this example, we're using the turbo:load event to listen for when the new content has been rendered after a Turbo Drive navigation or form submission. We use event.target to get a reference to the new content that was loaded, and then use querySelector to find the form element within the new content.
If a form element exists, we use setTimeout with a timeout of 0 milliseconds to defer the scrollIntoView() method until after the Turbo Drive scroll restoration is complete.
Note that using the turbo:load event ensures that we only scroll to the form element after the new content has been rendered, and not on initial page load or other Turbo Drive navigations.
BEN NADEL: This will also scroll down to the form on initial page load. However, I only want to scroll down to the form after the form submission has been processed.
You are correct, I apologize for the confusion in my previous responses. To scroll to the form only after a form submission has been processed, we can listen for the turbo:submit-end event instead of the turbo:load event.
Here's an updated code snippet that waits for the turbo:submit-end event and then scrolls to the form element:
document.addEventListener("turbo:submit-end", function(event) {
const form = event.target.querySelector("form");
if (form) {
// Scroll the form back into view after a short delay
setTimeout(function() {
form.scrollIntoView();
}, 0);
}
});
.... more ChatGPT content.
Going Around in Circles
At this point, it became clear that ChatGPT was just going around in circles. The last solution that it offered was, more or less, the same solution that it offered at the beginning. Perhaps if I put more time into telling ChatGPT what was going wrong it would eventually come up with a working solution. I'm not sure.
There's no doubt this is a cool experience. However, it makes me wonder how much of this is just carefully regurgitated code that it is seeing on the internet and how much of it is some sort of deduced combination of techniques? At the very least, it makes me feel a bit more secure in my job .... for now.
Want to use code from this post? Check out the license.
Reader Comments
Extremely interesting and insightful... Thanks for sharing your experience. These LLMs are evolving so rapidly though, you may check back next week (or tomorrow even) and have better luck. I love the idea of using LLM-based tools to enhance productivity and would like to check out GitHub's copilot!
@Chris,
It is pretty cool stuff! I haven't personally tried co-pilot, but I know some people at work who really enjoy it, especially for more "boilerplate" code generation tasks. I think the hardest part for me will be to remember to go check with tools like Open AI to see if they can be helpful - I tend to get very lost in my own workflow.
Post A Comment — ❤️ I'd Love To Hear From You! ❤️
Post a Comment →