T.5.4 ajax forms

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

T.5.4 ajax forms

Qbyte Consulting
I can't get an form in a zone to work with ajax to get an email address,
events get fired, but the form data is not passed back to the page class
property and the page goes black due to redirect! It seems like the form
isn't working thru ajax.

   @Property
    @Persist(PersistenceConstants.FLASH)
    private String email;

    @InjectComponent
    private Zone registermeZone;

    @Component
    private Form registermeForm;

    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;

    @OnEvent(value = EventConstants.VALIDATE, component = "registermeForm")
    public void validateFromRegistermeform() {
        System.out.println("V>" + email);
    }

    @OnEvent(value = "submit", component = "registermeForm")
    public void successFromRegistermeform() {
        System.out.println("S>" + email);
       // return registermeZone.getBody();
        this.ajaxResponseRenderer.addRender(registermeZone);
    }



 <div t:type="zone" t:id="registermeZone" id="registermeZone" class="tab">
        <form t:type="form" t:id="registermeForm" t:zone="registermeZone">
            <t:errors />
            <t:label for="email" class="left">Please provide an email
address, we will send you a registration code.</t:label>
            <input t:type="TextField" t:id="email"
t:validate="email,required,minlength=6" size="45" placeholder="email"/>
            <input t:type="submit" value="Register"/>
        </form>
    </div>
Reply | Threaded
Open this post in threaded view
|

Re: T.5.4 ajax forms

Qbyte Consulting
I found out the cause of this.

My app was using the jquery mobile library and this damages the forms ajax
capability. A soon as I removed the dependency then my ajax form works! But
of course now the left swipe ability I had on one of my divs doesn't work!

Can't have it all I suppose. I'm now looking for an easy way to add swipe
capability back? AngularJS looks like it would integrate well without
fudging up the jquery, but it's swipe seems hard to implement and really
I'd like to stay with jquery.

On Sat, Aug 13, 2016 at 10:32 PM, Qbyte Consulting <
[hidden email]> wrote:

> I can't get an form in a zone to work with ajax to get an email address,
> events get fired, but the form data is not passed back to the page class
> property and the page goes black due to redirect! It seems like the form
> isn't working thru ajax.
>
>    @Property
>     @Persist(PersistenceConstants.FLASH)
>     private String email;
>
>     @InjectComponent
>     private Zone registermeZone;
>
>     @Component
>     private Form registermeForm;
>
>     @Inject
>     private AjaxResponseRenderer ajaxResponseRenderer;
>
>     @OnEvent(value = EventConstants.VALIDATE, component = "registermeForm")
>     public void validateFromRegistermeform() {
>         System.out.println("V>" + email);
>     }
>
>     @OnEvent(value = "submit", component = "registermeForm")
>     public void successFromRegistermeform() {
>         System.out.println("S>" + email);
>        // return registermeZone.getBody();
>         this.ajaxResponseRenderer.addRender(registermeZone);
>     }
>
>
>
>  <div t:type="zone" t:id="registermeZone" id="registermeZone" class="tab">
>         <form t:type="form" t:id="registermeForm" t:zone="registermeZone">
>             <t:errors />
>             <t:label for="email" class="left">Please provide an email
> address, we will send you a registration code.</t:label>
>             <input t:type="TextField" t:id="email"
> t:validate="email,required,minlength=6" size="45" placeholder="email"/>
>             <input t:type="submit" value="Register"/>
>         </form>
>     </div>
>