[prev in list] [next in list] [prev in thread] [next in thread]
List: tapestry-user
Subject: Re: prevent ajax form submit
From: Chris Poulsen <mailinglist () nesluop ! dk>
Date: 2014-12-11 19:36:01
Message-ID: CAFKtUSvU05+oVL4WCcjszsgpqCrGZcsdGR+J2MMsMoc7KCzD8w () mail ! gmail ! com
[Download RAW message or body]
http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Form.html
On Thu, Dec 11, 2014 at 6:37 PM, George Christman <gchristman@cardaddy.com>
wrote:
> async
>
> On Thu, Dec 11, 2014 at 12:37 PM, George Christman <
> gchristman@cardaddy.com>
> wrote:
>
> > Chris I wasn't aware of this :) What is the sync flag?
> >
> > On Thu, Dec 11, 2014 at 11:31 AM, Chris Poulsen <mailinglist@nesluop.dk>
> > wrote:
> >
> > > In 5.4 you can also use the async flag on the form (instead of wrapping
> in
> > > a zone)
> > >
> > > --
> > > Chris
> > >
> > > On Thu, Dec 11, 2014 at 5:15 PM, George Christman <
> > > gchristman@cardaddy.com>
> > > wrote:
> > > >
> > > > Yes, you always wrap an ajax form with a zone and akshay is correct,
> you
> > > > need to return multiple zones as he showed you. Sorry, I missed that.
> > > > Unless your doing some sort of backend processing where you need to
> load
> > > > some data within your second zone from the backend, I would avoid the
> > > round
> > > > trip to the app server and just use the confirm mixin. If your using
> > > > tapestry-jquery they already provide you with the mixin, so no js
> > > needed.
> > > >
> > > > On Thu, Dec 11, 2014 at 3:42 AM, akshay <akshayestation@gmail.com>
> > > wrote:
> > > >
> > > > > Hi Carlos,
> > > > >
> > > > > Ah is just see that i just missed adding the following code :-
> > > > > ajaxResponseRenderer.addRender(zone1).addRender(zone2);
> > > > > This will work for sure :)
> > > > >
> > > > > Answer for your question:
> > > > >
> > > > > Yes we have to bind the form under the zone if you want it to be
> ajax:
> > > > > Taken from Tapestry doc:- the zone parameter will cause the form
> > > > submission
> > > > > to be handled as an Ajax request that updates the indicated zone.
> > > Often a
> > > > > Form will update the same zone that contains it.
> > > > >
> > > > > Just remove the javascript that you use , as tapestry provides you
> > > with
> > > > an
> > > > > inbuilt solution as above. You donot specifically need to do
> > > > > event.preventDefault();
> > > > >
> > > > >
> > > > > Try it out.
> > > > >
> > > > > Regards
> > > > > Akshay
> > > > >
> > > > >
> > > > >
> > > > >
> > > > > On Thu, Dec 11, 2014 at 8:27 AM, Carlos Gómez Montiel <
> > > iberck@gmail.com>
> > > > > wrote:
> > > > >
> > > > > > Any last question:
> > > > > >
> > > > > > Have you ALWAYS wrap an ajax form inside a zone like below?
> > > > > >
> > > > > > <t:zone t:id='zone1' id='zone1'>
> > > > > > <t:form t:id='form1' t:zone="^">
> > > > > > <t:submit value="send"/>
> > > > > > </t:form>
> > > > > > </t:zone>
> > > > > >
> > > > > > In my first example the form isn't wrapped but it works fine. I
> > > wonder
> > > > if
> > > > > > it is correct:
> > > > > > <t:form t:id='form1' t:zone='zone1'>
> > > > > > <t:submit value="send"/>
> > > > > > </t:form>
> > > > > >
> > > > > > <t:zone t:id='zone1' id='zone1'>
> > > > > > </t:zone>
> > > > > >
> > > > > >
> > > > > > Thanks in advance
> > > > > >
> > > > > >
> > > > > > 2014-12-11 0:05 GMT-06:00 Carlos Gómez Montiel <iberck@gmail.com
> > >
> > > > > >
> > > > > > > George, yes I'm using tapestry-jquery but in the links you wrote
> > > is
> > > > the
> > > > > > > solution:
> > > > > > >
> > > > > > > $("#form1").submit(function(event) {
> > > > > > > event.preventDefault();
> > > > > > > event.stopImmediatePropagation(); // it prevents the
> submit
> > > hit
> > > > > > > });
> > > > > > >
> > > > > > > Thank you for your feedback and comments.
> > > > > > >
> > > > > > >
> > > > > > >
> > > > > > > 2014-12-10 23:20 GMT-06:00 George Christman <
> > > gchristman@cardaddy.com
> > > > > >
> > > > > > >
> > > > > > > hmm I see your using jquery and I know 3.7 uses prototype. Are
> you
> > > > > using
> > > > > > > > Tapestry-Jquery or bringing in jquery with no conflict?
> > > > > > > >
> > > > > > > > You can write your own mixin to handle this, your not required
> to
> > > > have
> > > > > > to
> > > > > > > > use 5.4 to get this to work.
> > > > > > > >
> > > > > > > > Here's an example of how Tapestry-Jquery is getting this to
> work
> > > > using
> > > > > > > > jquery in 3.7
> > > > > > > >
> > > > > > > > http://tapestry5-jquery.com/mixins/docsconfirm
> > > > > > > >
> > > > > > > >
> > > > > > > >
> > > > > >
> > > > >
> > > >
> > >
> https://github.com/got5/tapestry5-jquery/blob/v3.3.7/src/main/java/org/got5/tapestry5/jquery/mixins/Confirm.java
>
> > > > > > > >
> > > > > > > >
> > > > > > > >
> > > > > >
> > > > >
> > > >
> > >
> https://github.com/got5/tapestry5-jquery/blob/v3.3.7/src/main/resources/org/got5/tapestry5/jquery/assets/mixins/confirm/confirm.js
>
> > > > > > > >
> > > > > > > > On Thu, Dec 11, 2014 at 12:06 AM, Carlos Gómez Montiel <
> > > > > > iberck@gmail.com>
> > > > > > > > wrote:
> > > > > > > >
> > > > > > > > > Thank you for your answer George:
> > > > > > > > >
> > > > > > > > > > The other more recommended way if it's just a simple
> confirm
> > > box
> > > > > is
> > > > > > to
> > > > > > > > > use the confirm mixin
> > > > > > > > > I'm using tapestry 5.3.7
> > > > > > > > >
> > > > > > > > > I had change my example with your recomendations:
> > > > > > > > >
> > > > > > > > > .tml
> > > > > > > > > <head>
> > > > > > > > > <script>
> > > > > > > > > $(document).ready(function() {
> > > > > > > > > $("#form1").submit(function() {
> > > > > > > > > return false;
> > > > > > > > > });
> > > > > > > > > });
> > > > > > > > > </script>
> > > > > > > > > </head>
> > > > > > > > >
> > > > > > > > > <t:zone t:id="zone1" id="zone1">
> > > > > > > > > <t:form t:id='form1' t:zone='^'>
> > > > > > > > > <t:submit value="enviar"/>
> > > > > > > > > </t:form>
> > > > > > > > > </t:zone>
> > > > > > > > >
> > > > > > > > > <t:zone t:id='zone2' id='zone2'>
> > > > > > > > > </t:zone>
> > > > > > > > >
> > > > > > > > > .java
> > > > > > > > > @Inject
> > > > > > > > > private AjaxResponseRenderer ajaxResponseRenderer;
> > > > > > > > > @InjectComponent
> > > > > > > > > private Zone zone2;
> > > > > > > > >
> > > > > > > > > void onSelected() {
> > > > > > > > > ajaxResponseRenderer.addRender(zone2);
> > > > > > > > > }
> > > > > > > > >
> > > > > > > > >
> > > > > > > > > But the effect is the same, the ajax post is sent to server.
> > > > Anyone
> > > > > > can
> > > > > > > > > help me how can I stop the ajax form submit?
> > > > > > > > >
> > > > > > > > > Thanks in advance
> > > > > > > > >
> > > > > > > > > 2014-12-10 22:25 GMT-06:00 George Christman <
> > > > > gchristman@cardaddy.com
> > > > > > > >
> > > > > > > > >
> > > > > > > > > > Take a look at this page, it will show you the life cycle
> of
> > > the
> > > > > > > > tapestry
> > > > > > > > > > methods. You are returning zone2 in your onSuccess method.
> > > and
> > > > > > > > probably
> > > > > > > > > > should use onSelected
> > > > > > > > > >
> > > > > > > > > >
> > > > > > > > > >
> > > > > > > > >
> > > > > > > >
> > > > > >
> > > > >
> > > >
> > >
> http://jumpstart.doublenegative.com.au/jumpstart7/examples/navigation/whatiscalledandwhen
>
> > > > > > > > > >
> > > > > > > > > > One way to do it to use an event handler and on the backend
> > > > return
> > > > > > the
> > > > > > > > > zone
> > > > > > > > > > from the event handler. example
> > > > > > > > > >
> > > > > > > > > > <t:submit t:event="confirm"/>
> > > > > > > > > >
> > > > > > > > > > Object onConfirm() {
> > > > > > > > > > return yourZone;
> > > > > > > > > > }
> > > > > > > > > >
> > > > > > > > > > The other more recommended way if it's just a simple
> confirm
> > > box
> > > > > is
> > > > > > to
> > > > > > > > > use
> > > > > > > > > > the confirm mixin. This will prevent the loop to the
> backend
> > > and
> > > > > > just
> > > > > > > > do
> > > > > > > > > > everything in the UI via javascript.
> > > > > > > > > >
> > > > > > > > > > <t:submit t:mixins="confirm" message="some message"
> > > title="some
> > > > > > > > title"/>
> > > > > > > > > >
> > > > > > > > > >
> > > > > > > > > >
> > > > > > > > >
> > > > > > > >
> > > > > >
> > > > >
> > > >
> > >
> https://github.com/apache/tapestry-5/blob/5.4-beta-22/tapestry-core/src/main/java/org/apache/tapestry5/corelib/mixins/Confirm.java
>
> > > > > > > > > >
> > > > > > > > > > On Wed, Dec 10, 2014 at 7:28 PM, Carlos Gómez Montiel <
> > > > > > > > iberck@gmail.com>
> > > > > > > > > > wrote:
> > > > > > > > > >
> > > > > > > > > > > Hi akshay, thank you for your answer.
> > > > > > > > > > >
> > > > > > > > > > > I had changed my example with your recomendation but the
> > > > problem
> > > > > > > > > persist
> > > > > > > > > > > and the ajax post is sent when you press the submit:
> > > > > > > > > > >
> > > > > > > > > > > Test.tml
> > > > > > > > > > > <head>
> > > > > > > > > > > <script>
> > > > > > > > > > > $(document).ready(function() {
> > > > > > > > > > > $("#form1").submit(function(e) {
> > > > > > > > > > > return false;
> > > > > > > > > > > });
> > > > > > > > > > > });
> > > > > > > > > > > </script>
> > > > > > > > > > > </head>
> > > > > > > > > > >
> > > > > > > > > > > <t:zone t:id="zone1" id="zone1">
> > > > > > > > > > > <t:form t:id='form1' t:zone='^'>
> > > > > > > > > > > <t:submit value="enviar"/>
> > > > > > > > > > > </t:form>
> > > > > > > > > > > </t:zone>
> > > > > > > > > > >
> > > > > > > > > > > <t:zone t:id='zone2' id='zone2'>
> > > > > > > > > > > ${name}
> > > > > > > > > > > </t:zone>
> > > > > > > > > > >
> > > > > > > > > > > Test.java
> > > > > > > > > > > @Inject
> > > > > > > > > > > private AjaxResponseRenderer ajaxResponseRenderer;
> > > > > > > > > > > @InjectComponent
> > > > > > > > > > > private Zone zone1, zone2;
> > > > > > > > > > >
> > > > > > > > > > > @Log
> > > > > > > > > > > public String getName() {
> > > > > > > > > > > return "bierck" + Math.random();
> > > > > > > > > > > }
> > > > > > > > > > >
> > > > > > > > > > >
> > > > > > > > > > > void onSuccess() {
> > > > > > > > > > > ajaxResponseRenderer.addRender(zone2);
> > > > > > > > > > > }
> > > > > > > > > > >
> > > > > > > > > > >
> > > > > > > > > > > Anyone can help me? how can I prevent the ajax form's
> > > submit ?
> > > > > > > > > > >
> > > > > > > > > > > Thank you
> > > > > > > > > > >
> > > > > > > > > > > 2014-12-10 16:45 GMT-06:00 akshay <
> > > akshayestation@gmail.com>:
> > > > > > > > > > >
> > > > > > > > > > > > Hi,
> > > > > > > > > > > >
> > > > > > > > > > > > your structure should look like this:
> > > > > > > > > > > > .tml strcuture:-
> > > > > > > > > > > >
> > > > > > > > > > > > <t:zone t:id='zone1' id='zone1'>
> > > > > > > > > > > > <t:form t:id='form1' t:zone="^">
> > > > > > > > > > > > <t:submit value="send"/>
> > > > > > > > > > > > </t:form>
> > > > > > > > > > > > </t:zone>
> > > > > > > > > > > >
> > > > > > > > > > > > <t:zone t:id='zone2' id='zone2'>
> > > > > > > > > > > > Your Content
> > > > > > > > > > > > </t:zone>
> > > > > > > > > > > >
> > > > > > > > > > > >
> > > > > > > > > > > >
> > > > > > > > > > > > The .java file structure
> > > > > > > > > > > > @InjectComponent
> > > > > > > > > > > > private Zone zone1,zone2;
> > > > > > > > > > > > @Inject
> > > > > > > > > > > > private AjaxResponseRender
> > > > > > > > > > > > OnSuccess(){
> > > > > > > > > > > > ajaxResponseRenderer.addRender(zone2) or
> zone2.getBody();
> > > > > > > > > > > > }
> > > > > > > > > > > >
> > > > > > > > > > > > Regards
> > > > > > > > > > > > Akshay
> > > > > > > > > > > >
> > > > > > > > > > > > On Wed, Dec 10, 2014 at 11:25 PM, Carlos Gómez Montiel
> <
> > > > > > > > > > iberck@gmail.com
> > > > > > > > > > > >
> > > > > > > > > > > > wrote:
> > > > > > > > > > > >
> > > > > > > > > > > > > Thank you for your answer George.
> > > > > > > > > > > > >
> > > > > > > > > > > > > > Are you trying to create an ajax form submit? If
> so,
> > > you
> > > > > > > > should
> > > > > > > > > be
> > > > > > > > > > > > > wrapping the form with the zone
> > > > > > > > > > > > >
> > > > > > > > > > > > > Yes, I'm trying to create an ajax form submit, I
> don't
> > > > > > > > understand
> > > > > > > > > > why I
> > > > > > > > > > > > > should be wrapping the form with the zone, what is
> the
> > > > > reason?
> > > > > > > > as
> > > > > > > > > > far I
> > > > > > > > > > > > > know in my example I'm sending the form via ajax and
> > > then
> > > > > > > > > refreshing
> > > > > > > > > > > the
> > > > > > > > > > > > > zone 'zone1' returning the zone1's body in the
> > > onsuccess()
> > > > > > > > event in
> > > > > > > > > > the
> > > > > > > > > > > > > .java
> > > > > > > > > > > > >
> > > > > > > > > > > > > > As far as the confirm dialog goes, you could either
> > > > > > > > > > > > > use a confirm mixin or if you chose to use a zone
> style
> > > > > > > > approach,
> > > > > > > > > on
> > > > > > > > > > > > submit
> > > > > > > > > > > > > return another zone for your confirm dialog.
> > > > > > > > > > > > >
> > > > > > > > > > > > > I'm using a mixin for show the confirm dialog (with
> > > > > bootstrap)
> > > > > > > > but
> > > > > > > > > > > don't
> > > > > > > > > > > > > found how to prevent the ajax form's submit. Any one
> > > can
> > > > > help
> > > > > > me
> > > > > > > > > with
> > > > > > > > > > > it?
> > > > > > > > > > > > >
> > > > > > > > > > > > > Thanks in advance
> > > > > > > > > > > > >
> > > > > > > > > > > > >
> > > > > > > > > > > > >
> > > > > > > > > > > > > 2014-12-10 7:44 GMT-06:00 George Christman <
> > > > > > > > > gchristman@cardaddy.com
> > > > > > > > > > > >
> > > > > > > > > > > > >
> > > > > > > > > > > > > > Are you trying to create an ajax form submit? If
> so,
> > > you
> > > > > > > > should
> > > > > > > > > be
> > > > > > > > > > > > > wrapping
> > > > > > > > > > > > > > the form with the zone. As far as the confirm
> dialog
> > > > goes,
> > > > > > you
> > > > > > > > > > could
> > > > > > > > > > > > > either
> > > > > > > > > > > > > > use a confirm mixin or if you chose to use a zone
> > > style
> > > > > > > > approach,
> > > > > > > > > > on
> > > > > > > > > > > > > submit
> > > > > > > > > > > > > > return another zone for your confirm dialog.
> > > > > > > > > > > > > >
> > > > > > > > > > > > > > On Wed, Dec 10, 2014 at 3:47 AM, Carlos Gómez
> > > Montiel <
> > > > > > > > > > > > iberck@gmail.com>
> > > > > > > > > > > > > > wrote:
> > > > > > > > > > > > > >
> > > > > > > > > > > > > > > Hi there
> > > > > > > > > > > > > > >
> > > > > > > > > > > > > > > How can I prevent ajax form's event submit when
> the
> > > > user
> > > > > > > > > clicks a
> > > > > > > > > > > > > submit
> > > > > > > > > > > > > > > button?
> > > > > > > > > > > > > > > I need to prevent the event for show an confirm
> > > dialog
> > > > > > > > before
> > > > > > > > > it
> > > > > > > > > > > will
> > > > > > > > > > > > > be
> > > > > > > > > > > > > > > submited.
> > > > > > > > > > > > > > >
> > > > > > > > > > > > > > > My form:
> > > > > > > > > > > > > > >
> > > > > > > > > > > > > > > <t:form t:id='form1' t:zone='zone1'>
> > > > > > > > > > > > > > > <t:submit value="send"/>
> > > > > > > > > > > > > > > </t:form>
> > > > > > > > > > > > > > >
> > > > > > > > > > > > > > > <t:zone t:id='zone1' id='zone1'>
> > > > > > > > > > > > > > > </t:zone>
> > > > > > > > > > > > > > >
> > > > > > > > > > > > > > > Thanks in advance
> > > > > > > > > > > > > > >
> > > > > > > > > > > > > >
> > > > > > > > > > > > > >
> > > > > > > > > > > > > >
> > > > > > > > > > > > > > --
> > > > > > > > > > > > > > George Christman
> > > > > > > > > > > > > > CEO
> > > > > > > > > > > > > > www.CarDaddy.com
> > > > > > > > > > > > > > P.O. Box 735
> > > > > > > > > > > > > > Johnstown, New York
> > > > > > > > > > > > > >
> > > > > > > > > > > > >
> > > > > > > > > > > >
> > > > > > > > > > > >
> > > > > > > > > > > >
> > > > > > > > > > > > --
> > > > > > > > > > > > Cheers!!
> > > > > > > > > > > > Akshay
> > > > > > > > > > > >
> > > > > > > > > > >
> > > > > > > > > >
> > > > > > > > > >
> > > > > > > > > >
> > > > > > > > > > --
> > > > > > > > > > George Christman
> > > > > > > > > > CEO
> > > > > > > > > > www.CarDaddy.com
> > > > > > > > > > P.O. Box 735
> > > > > > > > > > Johnstown, New York
> > > > > > > > > >
> > > > > > > > >
> > > > > > > >
> > > > > > > >
> > > > > > > >
> > > > > > > > --
> > > > > > > > George Christman
> > > > > > > > CEO
> > > > > > > > www.CarDaddy.com
> > > > > > > > P.O. Box 735
> > > > > > > > Johnstown, New York
> > > > > > > >
> > > > > > >
> > > > > > >
> > > > > >
> > > > >
> > > > >
> > > > >
> > > > > --
> > > > > Cheers!!
> > > > > Akshay
> > > > >
> > > >
> > > >
> > > >
> > > > --
> > > > George Christman
> > > > CEO
> > > > www.CarDaddy.com
> > > > P.O. Box 735
> > > > Johnstown, New York
> > > >
> > >
> >
> >
> >
> > --
> > George Christman
> > CEO
> > www.CarDaddy.com
> > P.O. Box 735
> > Johnstown, New York
> >
> >
>
>
> --
> George Christman
> CEO
> www.CarDaddy.com
> P.O. Box 735
> Johnstown, New York
>
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic