You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Dmitriy Vsekhvalnov <dv...@gmail.com> on 2010/07/20 18:10:41 UTC
T5: AjaxCheckbox
Hello all,
i have a question about ajax form submission in T5. I was needed checkbox
implementation which 'onClick' submits entire form linked to zone (wrapped
inside zone).
I ended up with simple implementation, which i post at the end of message.
Everything is fine, except i found that before sending actual AjaxRequest
form is restored to original state and only updated after new rendered form
is returned from tapestry.
Simply, i set checkbox -> form is restored (checkbox is cleared) -> ajax
request -> process ajax reply (checkbox is set). And vice-versa if i clear
checkbox. if server has some lag it causes some sloppy behavior to user,
because they do not see change immediately and waiting while new form
returned. But this is not what ajax is for, right? :)
I found it happens right between (in tapestry.js) :
linkZone : function(element, zoneId, url)
element.sendAjaxRequest(url, {
onSuccess : successHandler
});
and
processReply : function(reply) {.....}
, but can't find what exactly happening. Any help greatly appreciated
Here is my implementation of AjaxCheckbox
............................................................................
@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;
}
}
............................................................................
............................................................................
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')
{
$$('input').each(function(e)
{
if(e.type=='checkbox')
{
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();
}
// alert(this.element.checked)
// return true;
}
});
Tapestry.Initializer.ajaxCheckbox = function(formId, clientId,
selectAllMode, radioMode)
{
new Tapestry.AjaxCheckbox(formId, clientId, selectAllMode, radioMode);
}
............................................................................
Re: T5: AjaxCheckbox
Posted by Dmitriy Vsekhvalnov <dv...@gmail.com>.
Guys anyone? Is it not possible with T5?
On Tue, Jul 20, 2010 at 8:10 PM, Dmitriy Vsekhvalnov <dvsekhvalnov@gmail.com
> wrote:
> Hello all,
> i have a question about ajax form submission in T5. I was needed
> checkbox implementation which 'onClick' submits entire form linked to zone
> (wrapped inside zone).
>
> I ended up with simple implementation, which i post at the end of message.
> Everything is fine, except i found that before sending actual AjaxRequest
> form is restored to original state and only updated after new rendered form
> is returned from tapestry.
>
> Simply, i set checkbox -> form is restored (checkbox is cleared) -> ajax
> request -> process ajax reply (checkbox is set). And vice-versa if i clear
> checkbox. if server has some lag it causes some sloppy behavior to user,
> because they do not see change immediately and waiting while new form
> returned. But this is not what ajax is for, right? :)
>
> I found it happens right between (in tapestry.js) :
> linkZone : function(element, zoneId, url)
>
> element.sendAjaxRequest(url, {
> onSuccess : successHandler
> });
>
> and
> processReply : function(reply) {.....}
>
>
> , but can't find what exactly happening. Any help greatly appreciated
>
> Here is my implementation of AjaxCheckbox
>
> ............................................................................
> @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;
> }
> }
>
> ............................................................................
>
>
> ............................................................................
> 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')
> {
> $$('input').each(function(e)
> {
> if(e.type=='checkbox')
> {
> 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();
> }
>
> // alert(this.element.checked)
> // return true;
> }
> });
>
> Tapestry.Initializer.ajaxCheckbox = function(formId, clientId,
> selectAllMode, radioMode)
> {
> new Tapestry.AjaxCheckbox(formId, clientId, selectAllMode, radioMode);
> }
>
> ............................................................................
>