I have a task that looks quite simple, but still have a problem
accomplishing it.

Suppose you have a form with Select control, and onChange event on that
control should generate form submission event.

I've created a simple mixin for that.

public class SubmitOnChange {

    @Environmental

    private RenderSupport renderSupport;



    @Environmental

    private FormSupport formSupport;



    @InjectContainer

    private AbstractField container;



    @Inject

    private ComponentResources resources;



    @Parameter(required=true,allowNull=false,defaultPrefix="literal")

    private String submitEvent;



    @Parameter(required=false,allowNull=true,defaultPrefix="prop")

    private Object[] submitContext;



    public void afterRender () {

        final String formId = formSupport.getClientId ();

        final Link link = resources.createEventLink ( submitEvent,
submitContext );

        renderSupport.addInit ( "submitOnChange",

                new JSONArray ( formId, container.getClientId (),
link.toAbsoluteURI () ) );

    }


}

And accompanying JS:

Tapestry.Initializer.submitOnChange = function(formId, elementId, eventUrl)
{

    $(elementId).observe ("change", function(event) {

        $(formId).action = eventUrl;

        if ( $(elementId).value ) $(formId).submit ();

    });

};


Now, there is a problem. onChange event really submits the form, but the
event is fired on Select component instead of Form component and form values
are obviously lost during submission. If we comment out 3rd line in JS part,
it works correctly (because default form action is not altered), but this
way I lose an ability to control submission events names and I can intercept
events only by component names.

My goal is to simulate 'real' submit behavior. I believe it must be simple,
but I'm stuck. Any ideas?

-- 
Ilya Obshadko

Reply via email to