Question

I’ve read multiple times that this is the recommended approach to adding client side callbacks when a form is submitted, however it isn’t working for me:

<t:form t:id="myForm" id="myForm">
    <t:submit />
</t:form>

<script type="text/javascript">
    $("myForm").observe(Tapestry.FORM_PREPARE_FOR_SUBMIT_EVENT, function() {
        alert("submitting");
    });
    alert("listening");
</script>

Can someone point out what I have done wrong?

I’m using tapestry 5.1.0.5

Answer 1

There is an interesting defect in 5.1.0.5 (fixed in newer versions)

A simple page with only doesn’t cause any of the core
tapestry javascript libraries to load (tapestry.js, prototype.js, etc) So the form is not even hooking onSubmit. Adding validation to a field in the form would fix this, but if you don’t have a field that’s hard.

If you don’t even have tapestry.js loading in the page then the first step is to make sure you’re doing something that will tell the framework you want it. One way to do this is by calling RenderSupport#addScript. Passing an empty string is ignored so you can stick a semi-colon in it to essentially get a no-op.

@Inject
private RenderSupport renderSupport;

void setupRender() {
    // non-blank addScript causes stack to get added
    renderSupport.addScript(";");
}

The next thing to do would be to call getFormEventManager on your form element to initialize the form for tapestry, and make sure the event handlers are attached.

I also updated the TML to wait for the dom to load so you don’t get strange timing errors:

<t:form t:id="myForm">
   <t:submit/>
</t:form>

<script type="text/javascript">
    Tapestry.onDOMLoaded(function() {
    $('myForm').getFormEventManager(); // forces the form to start listening for submits
    $("myForm").observe(Tapestry.FORM_PREPARE_FOR_SUBMIT_EVENT, function() {
       alert("submitting");
    });
    alert("Dom loaded");
  });
</script>

Obnoxious, but fixed in later versions of the framework.