AjaxCheckbox component
Hello all, i think i've asked similar questions some time ago, but receive no answers. And since i've done no progress on this myself, i'd like to ask: - any ideas how to implement checkbox which onClick auto-submits entire form via ajax, and on server side it rolls ordinary tapestry 5 form processing? Do not suggest me chenille kit component, it's not what i'm looking for.
Re: AjaxCheckbox component
Check this out... http://jumpstart.doublenegative.com.au:8080/jumpstart/ http://jumpstart.doublenegative.com.au:8080/jumpstart/ http://lombok.demon.co.uk/tapestry5Demo/ http://lombok.demon.co.uk/tapestry5Demo/ Good Luck :) -- View this message in context: http://tapestry.1045711.n5.nabble.com/AjaxCheckbox-component-tp3218716p3218738.html Sent from the Tapestry - User mailing list archive at Nabble.com. - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: AjaxCheckbox component
I'm sorry what exactly you suggested me to look into? i can't see any example of ajax-checkbox on those page. On Tue, Oct 19, 2010 at 1:26 PM, ael alan-lua...@dash.com.ph wrote: Check this out... http://jumpstart.doublenegative.com.au:8080/jumpstart/ http://jumpstart.doublenegative.com.au:8080/jumpstart/ http://lombok.demon.co.uk/tapestry5Demo/ http://lombok.demon.co.uk/tapestry5Demo/ Good Luck :) -- View this message in context: http://tapestry.1045711.n5.nabble.com/AjaxCheckbox-component-tp3218716p3218738.html Sent from the Tapestry - User mailing list archive at Nabble.com. - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: AjaxCheckbox component
add a javascript function to the onClick event of the checkbox that do trigger the form.submit() with regards Sven Homburg Founder of the Chenille Kit Project http://chenillekit.codehaus.org 2010/10/19 Dmitriy Vsekhvalnov dvsekhval...@gmail.com: I'm sorry what exactly you suggested me to look into? i can't see any example of ajax-checkbox on those page. On Tue, Oct 19, 2010 at 1:26 PM, ael alan-lua...@dash.com.ph wrote: Check this out... http://jumpstart.doublenegative.com.au:8080/jumpstart/ http://jumpstart.doublenegative.com.au:8080/jumpstart/ http://lombok.demon.co.uk/tapestry5Demo/ http://lombok.demon.co.uk/tapestry5Demo/ Good Luck :) -- View this message in context: http://tapestry.1045711.n5.nabble.com/AjaxCheckbox-component-tp3218716p3218738.html Sent from the Tapestry - User mailing list archive at Nabble.com. - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: AjaxCheckbox component
I mean the link that i posted are components therefore they are the same as checkbox... -- View this message in context: http://tapestry.1045711.n5.nabble.com/AjaxCheckbox-component-tp3218716p3218786.html Sent from the Tapestry - User mailing list archive at Nabble.com. - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: AjaxCheckbox component
yeah, i've tried this but, the checkbox in-browser state is NOT set until Zone returned from from handler. Ok honestly it is set when you click, but RESET to original state when form submission via XHR started and updated only when zone is received. Just check it: public Object onSuccess() { Thread.sleep(15000); return zone.getBody(); } This is artificially, but in reality users start complaining if they see delay ~0.5s when clicking checkbox. And this delay can be just network or db on server side. And i'm looking for component which will NOT reset state while submitting form. On Tue, Oct 19, 2010 at 2:10 PM, ael alan-lua...@dash.com.ph wrote: I mean the link that i posted are components therefore they are the same as checkbox... -- View this message in context: http://tapestry.1045711.n5.nabble.com/AjaxCheckbox-component-tp3218716p3218786.html Sent from the Tapestry - User mailing list archive at Nabble.com. - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: AjaxCheckbox component
On Tue, 19 Oct 2010 08:24:46 -0200, Dmitriy Vsekhvalnov dvsekhval...@gmail.com wrote: yeah, i've tried this but, the checkbox in-browser state is NOT set until Zone returned from from handler. Make your click handling code set the checkbox immediately then submit the form. Most probably the state reset you're experiencing is caused by submitting the form before the value was set in JavaScript. -- Thiago H. de Paula Figueiredo Independent Java, Apache Tapestry 5 and Hibernate consultant, developer, and instructor Owner, Ars Machina Tecnologia da Informação Ltda. http://www.arsmachina.com.br - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: AjaxCheckbox component
Thiago, is not. Here is the mechanics i debug using fire-bug: 1. checkbox in-browser (which means visible to user) set immediately. 2. usual Tapestry form submission JS loop is started 3. linkZone : function(element, zoneId, url) { . //until this browser shows modified version of checkbox state element.sendAjaxRequest(url, { onSuccess : successHandler }); .. is executed and checkbox in-browser state is RESTORED to what was before. 4. when browser got response from server: linkZone : function(element, zoneId, url) { var successHandler = function(transport) { //after this call form is rendered to new state zoneManager.processReply(transport.responseJSON); }; . is executed and form is refreshed to new state. So, if there is delay between (3) and (4) - that's a problem. Ideas? It's not my code. It's tapestry. On Tue, Oct 19, 2010 at 2:59 PM, Thiago H. de Paula Figueiredo thiag...@gmail.com wrote: On Tue, 19 Oct 2010 08:24:46 -0200, Dmitriy Vsekhvalnov dvsekhval...@gmail.com wrote: yeah, i've tried this but, the checkbox in-browser state is NOT set until Zone returned from from handler. Make your click handling code set the checkbox immediately then submit the form. Most probably the state reset you're experiencing is caused by submitting the form before the value was set in JavaScript. -- Thiago H. de Paula Figueiredo Independent Java, Apache Tapestry 5 and Hibernate consultant, developer, and instructor Owner, Ars Machina Tecnologia da Informação Ltda. http://www.arsmachina.com.br - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: AjaxCheckbox component
Hi, Dmitriy! Isn't this the natural delay between a request, its processing and the reception of the response? In this case, it's not Tapestry itself, it's using AJAX. On Tue, 19 Oct 2010 09:24:23 -0200, Dmitriy Vsekhvalnov dvsekhval...@gmail.com wrote: Thiago, is not. Here is the mechanics i debug using fire-bug: 1. checkbox in-browser (which means visible to user) set immediately. 2. usual Tapestry form submission JS loop is started 3. linkZone : function(element, zoneId, url) { . //until this browser shows modified version of checkbox state element.sendAjaxRequest(url, { onSuccess : successHandler }); .. is executed and checkbox in-browser state is RESTORED to what was before. 4. when browser got response from server: linkZone : function(element, zoneId, url) { var successHandler = function(transport) { //after this call form is rendered to new state zoneManager.processReply(transport.responseJSON); }; . is executed and form is refreshed to new state. So, if there is delay between (3) and (4) - that's a problem. Ideas? It's not my code. It's tapestry. On Tue, Oct 19, 2010 at 2:59 PM, Thiago H. de Paula Figueiredo thiag...@gmail.com wrote: On Tue, 19 Oct 2010 08:24:46 -0200, Dmitriy Vsekhvalnov dvsekhval...@gmail.com wrote: yeah, i've tried this but, the checkbox in-browser state is NOT set until Zone returned from from handler. Make your click handling code set the checkbox immediately then submit the form. Most probably the state reset you're experiencing is caused by submitting the form before the value was set in JavaScript. -- Thiago H. de Paula Figueiredo Independent Java, Apache Tapestry 5 and Hibernate consultant, developer, and instructor Owner, Ars Machina Tecnologia da Informação Ltda. http://www.arsmachina.com.br - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org -- Thiago H. de Paula Figueiredo Independent Java, Apache Tapestry 5 and Hibernate consultant, developer, and instructor Owner, Ars Machina Tecnologia da Informação Ltda. Consultor, desenvolvedor e instrutor em Java, Tapestry e Hibernate Coordenador e professor da Especialização em Engenharia de Software com Ênfase em Java da Faculdade Pitágoras http://www.arsmachina.com.br - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: AjaxCheckbox component
Is it what AJAX stands for? :) i was thinking that ajax is to do things in background, while letting user see something immediately. And i don't think checkbox falls to area where it should get response from server to display new state, isn't it? anyway you can try it yourself and see that it is CHANGED but then restored back when sending form data. On Tue, Oct 19, 2010 at 7:52 PM, Thiago H. de Paula Figueiredo thiag...@gmail.com wrote: Hi, Dmitriy! Isn't this the natural delay between a request, its processing and the reception of the response? In this case, it's not Tapestry itself, it's using AJAX. On Tue, 19 Oct 2010 09:24:23 -0200, Dmitriy Vsekhvalnov dvsekhval...@gmail.com wrote: Thiago, is not. Here is the mechanics i debug using fire-bug: 1. checkbox in-browser (which means visible to user) set immediately. 2. usual Tapestry form submission JS loop is started 3. linkZone : function(element, zoneId, url) { . //until this browser shows modified version of checkbox state element.sendAjaxRequest(url, { onSuccess : successHandler }); .. is executed and checkbox in-browser state is RESTORED to what was before. 4. when browser got response from server: linkZone : function(element, zoneId, url) { var successHandler = function(transport) { //after this call form is rendered to new state zoneManager.processReply(transport.responseJSON); }; . is executed and form is refreshed to new state. So, if there is delay between (3) and (4) - that's a problem. Ideas? It's not my code. It's tapestry. On Tue, Oct 19, 2010 at 2:59 PM, Thiago H. de Paula Figueiredo thiag...@gmail.com wrote: On Tue, 19 Oct 2010 08:24:46 -0200, Dmitriy Vsekhvalnov dvsekhval...@gmail.com wrote: yeah, i've tried this but, the checkbox in-browser state is NOT set until Zone returned from from handler. Make your click handling code set the checkbox immediately then submit the form. Most probably the state reset you're experiencing is caused by submitting the form before the value was set in JavaScript. -- Thiago H. de Paula Figueiredo Independent Java, Apache Tapestry 5 and Hibernate consultant, developer, and instructor Owner, Ars Machina Tecnologia da Informação Ltda. http://www.arsmachina.com.br - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org -- Thiago H. de Paula Figueiredo Independent Java, Apache Tapestry 5 and Hibernate consultant, developer, and instructor Owner, Ars Machina Tecnologia da Informação Ltda. Consultor, desenvolvedor e instrutor em Java, Tapestry e Hibernate Coordenador e professor da Especialização em Engenharia de Software com Ênfase em Java da Faculdade Pitágoras http://www.arsmachina.com.br - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: AjaxCheckbox component
On Tue, 19 Oct 2010 14:10:00 -0200, Dmitriy Vsekhvalnov dvsekhval...@gmail.com wrote: Is it what AJAX stands for? :) Yes! :) i was thinking that ajax is to do things in background, while letting user see something immediately. And i don't think checkbox falls to area where it should get response from server to display new state, isn't it? anyway you can try it yourself and see that it is CHANGED but then restored back when sending form data. Please post your JavaScript code. It doesn't seem related to Tapestry. -- Thiago H. de Paula Figueiredo Independent Java, Apache Tapestry 5 and Hibernate consultant, developer, and instructor Owner, Ars Machina Tecnologia da Informação Ltda. http://www.arsmachina.com.br - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: AjaxCheckbox component
Here you go. JS + Java. Let me know if you find something in, which can cause such behavior :) JS Tapestry.AjaxCheckbox = Class.create({ initialize: function(formId, clientId, selectAllMode, radioMode) { this.selectAllMode=selectAllMode; this.radioMode=radioMode; this.form = $(formId); this.element = $(clientId); //this.element.stopObserving(click,this.onClick); this.element.observe(click, this.onClick.bindAsEventListener(this)); }, createHidden : function() { var hidden = new Element(input, { type:hidden, name: this.element.id + :hidden, value: this.element.id}); this.element.insert({after:hidden}); }, onClick : function(event) { Event.stop(event); if(this.radioMode=='true') { $$('input').each(function(e) { if(e.type=='checkbox') { e.checked=0; } }); //set self this.element.checked=1; } else if(this.selectAllMode=='true') { this.form.getInputs('checkbox').each(function(e) { e.checked=1; }); //clean self this.element.checked=0; } var onsubmit = this.form.onsubmit; if (onsubmit == undefined || onsubmit.call(window.document, event)) { this.createHidden(); this.form.submit(); } } }); Tapestry.Initializer.ajaxCheckbox = function(formId, clientId, selectAllMode, radioMode) { new Tapestry.AjaxCheckbox(formId, clientId, selectAllMode, radioMode); } === === Java === @IncludeJavaScriptLibrary(ajaxcheckbox.js) public class AjaxCheckbox extends AbstractField { @Parameter(required = false, autoconnect = false) private boolean value; @Parameter(required = false) private boolean selectAllMode; @Parameter(required = false) private boolean radioMode; @Inject private RenderSupport renderSupport; @Environmental private FormSupport formSupport; @Inject private ComponentResources resources; @Environmental private ValidationTracker tracker; @Inject private Request request; @BeginRender void begin(MarkupWriter writer) { String asSubmitted = tracker.getInput(this); boolean checked = asSubmitted != null ? Boolean.parseBoolean(asSubmitted) : value; writer.element(input, type, checkbox, name, getControlName(), id, getClientId(), checked, checked ? checked : null); resources.renderInformalParameters(writer); //decorateInsideField(); } @AfterRender void after(MarkupWriter writer) { writer.end(); // input renderSupport.addInit(ajaxCheckbox, formSupport.getClientId(), getClientId(), valueOf(selectAllMode), valueOf(radioMode)); } @Override protected void processSubmission(String elementName) { String postedValue = request.getParameter(elementName); // record as true or false tracker.recordInput(this, Boolean.toString(postedValue != null)); value = postedValue != null; } === On Tue, Oct 19, 2010 at 9:25 PM, Thiago H. de Paula Figueiredo thiag...@gmail.com wrote: On Tue, 19 Oct 2010 14:10:00 -0200, Dmitriy Vsekhvalnov dvsekhval...@gmail.com wrote: Is it what AJAX stands for? :) Yes! :) i was thinking that ajax is to do things in background, while letting user see something immediately. And i don't think checkbox falls to area where it should get response from server to display new state, isn't it? anyway you can try it yourself and see that it is CHANGED but then restored back when sending form data. Please post your JavaScript code. It doesn't seem related to Tapestry. -- Thiago H. de Paula Figueiredo Independent Java, Apache Tapestry 5 and Hibernate consultant, developer, and instructor Owner, Ars Machina Tecnologia da Informação Ltda. http://www.arsmachina.com.br - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: AjaxCheckbox component
what happens if you omit Event.stop(event); in you onClick function ? On Tue, Oct 19, 2010 at 21:10, Dmitriy Vsekhvalnov dvsekhval...@gmail.com wrote: Here you go. JS + Java. Let me know if you find something in, which can cause such behavior :) JS Tapestry.AjaxCheckbox = Class.create({ initialize: function(formId, clientId, selectAllMode, radioMode) { this.selectAllMode=selectAllMode; this.radioMode=radioMode; this.form = $(formId); this.element = $(clientId); //this.element.stopObserving(click,this.onClick); this.element.observe(click, this.onClick.bindAsEventListener(this)); }, createHidden : function() { var hidden = new Element(input, { type:hidden, name: this.element.id + :hidden, value: this.element.id}); this.element.insert({after:hidden}); }, onClick : function(event) { Event.stop(event); if(this.radioMode=='true') { $$('input').each(function(e) { if(e.type=='checkbox') { e.checked=0; } }); //set self this.element.checked=1; } else if(this.selectAllMode=='true') { this.form.getInputs('checkbox').each(function(e) { e.checked=1; }); //clean self this.element.checked=0; } var onsubmit = this.form.onsubmit; if (onsubmit == undefined || onsubmit.call(window.document, event)) { this.createHidden(); this.form.submit(); } } }); Tapestry.Initializer.ajaxCheckbox = function(formId, clientId, selectAllMode, radioMode) { new Tapestry.AjaxCheckbox(formId, clientId, selectAllMode, radioMode); } === === Java === @IncludeJavaScriptLibrary(ajaxcheckbox.js) public class AjaxCheckbox extends AbstractField { �...@parameter(required = false, autoconnect = false) private boolean value; �...@parameter(required = false) private boolean selectAllMode; �...@parameter(required = false) private boolean radioMode; �...@inject private RenderSupport renderSupport; �...@environmental private FormSupport formSupport; �...@inject private ComponentResources resources; �...@environmental private ValidationTracker tracker; �...@inject private Request request; �...@beginrender void begin(MarkupWriter writer) { String asSubmitted = tracker.getInput(this); boolean checked = asSubmitted != null ? Boolean.parseBoolean(asSubmitted) : value; writer.element(input, type, checkbox, name, getControlName(), id, getClientId(), checked, checked ? checked : null); resources.renderInformalParameters(writer); //decorateInsideField(); } �...@afterrender void after(MarkupWriter writer) { writer.end(); // input renderSupport.addInit(ajaxCheckbox, formSupport.getClientId(), getClientId(), valueOf(selectAllMode), valueOf(radioMode)); } �...@override protected void processSubmission(String elementName) { String postedValue = request.getParameter(elementName); // record as true or false tracker.recordInput(this, Boolean.toString(postedValue != null)); value = postedValue != null; } === On Tue, Oct 19, 2010 at 9:25 PM, Thiago H. de Paula Figueiredo thiag...@gmail.com wrote: On Tue, 19 Oct 2010 14:10:00 -0200, Dmitriy Vsekhvalnov dvsekhval...@gmail.com wrote: Is it what AJAX stands for? :) Yes! :) i was thinking that ajax is to do things in background, while letting user see something immediately. And i don't think checkbox falls to area where it should get response from server to display new state, isn't it? anyway you can try it yourself and see that it is CHANGED but then restored back when sending form data. Please post your JavaScript code. It doesn't seem related to Tapestry. -- Thiago H. de Paula Figueiredo Independent Java, Apache Tapestry 5 and Hibernate consultant, developer, and instructor Owner, Ars Machina Tecnologia da Informação Ltda. http://www.arsmachina.com.br - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org -- Andreas Andreou - andy...@apache.org - http://blog.andyhot.gr Tapestry PMC / Tacos developer Open Source / JEE Consulting - To unsubscribe,
Re: AjaxCheckbox component
i can't see any visual difference if i remove Event.stop(..). I grad idea for code from some Tapestry standard component, may be LinkSubmit or so. And i think it behave pretty standard. On the other hand i've noticed that when i use it in 'select-all' mode, where one checkbox sets all others (but not itself) - it do not wait for zone refresh. Can it be some Prototype issue? On Tue, Oct 19, 2010 at 10:33 PM, Andreas Andreou andy...@di.uoa.gr wrote: what happens if you omit Event.stop(event); in you onClick function ? On Tue, Oct 19, 2010 at 21:10, Dmitriy Vsekhvalnov dvsekhval...@gmail.com wrote: Here you go. JS + Java. Let me know if you find something in, which can cause such behavior :) JS Tapestry.AjaxCheckbox = Class.create({ initialize: function(formId, clientId, selectAllMode, radioMode) { this.selectAllMode=selectAllMode; this.radioMode=radioMode; this.form = $(formId); this.element = $(clientId); //this.element.stopObserving(click,this.onClick); this.element.observe(click, this.onClick.bindAsEventListener(this)); }, createHidden : function() { var hidden = new Element(input, { type:hidden, name: this.element.id + :hidden, value: this.element.id}); this.element.insert({after:hidden}); }, onClick : function(event) { Event.stop(event); if(this.radioMode=='true') { $$('input').each(function(e) { if(e.type=='checkbox') { e.checked=0; } }); //set self this.element.checked=1; } else if(this.selectAllMode=='true') { this.form.getInputs('checkbox').each(function(e) { e.checked=1; }); //clean self this.element.checked=0; } var onsubmit = this.form.onsubmit; if (onsubmit == undefined || onsubmit.call(window.document, event)) { this.createHidden(); this.form.submit(); } } }); Tapestry.Initializer.ajaxCheckbox = function(formId, clientId, selectAllMode, radioMode) { new Tapestry.AjaxCheckbox(formId, clientId, selectAllMode, radioMode); } === === Java === @IncludeJavaScriptLibrary(ajaxcheckbox.js) public class AjaxCheckbox extends AbstractField { @Parameter(required = false, autoconnect = false) private boolean value; @Parameter(required = false) private boolean selectAllMode; @Parameter(required = false) private boolean radioMode; @Inject private RenderSupport renderSupport; @Environmental private FormSupport formSupport; @Inject private ComponentResources resources; @Environmental private ValidationTracker tracker; @Inject private Request request; @BeginRender void begin(MarkupWriter writer) { String asSubmitted = tracker.getInput(this); boolean checked = asSubmitted != null ? Boolean.parseBoolean(asSubmitted) : value; writer.element(input, type, checkbox, name, getControlName(), id, getClientId(), checked, checked ? checked : null); resources.renderInformalParameters(writer); //decorateInsideField(); } @AfterRender void after(MarkupWriter writer) { writer.end(); // input renderSupport.addInit(ajaxCheckbox, formSupport.getClientId(), getClientId(), valueOf(selectAllMode), valueOf(radioMode)); } @Override protected void processSubmission(String elementName) { String postedValue = request.getParameter(elementName); // record as true or false tracker.recordInput(this, Boolean.toString(postedValue != null)); value = postedValue != null; } === On Tue, Oct 19, 2010 at 9:25 PM, Thiago H. de Paula Figueiredo thiag...@gmail.com wrote: On Tue, 19 Oct 2010 14:10:00 -0200, Dmitriy Vsekhvalnov dvsekhval...@gmail.com wrote: Is it what AJAX stands for? :) Yes! :) i was thinking that ajax is to do things in background, while letting user see something immediately. And i don't think checkbox falls to area where it should get response from server to display new state, isn't it? anyway you can try it yourself and see that it is CHANGED but then restored back when sending form data. Please post your JavaScript code. It doesn't seem related to Tapestry. -- Thiago H. de Paula