You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@click.apache.org by Nicholas Dierauf <ni...@autodesk.com> on 2011/07/15 22:17:30 UTC
Update multiple panels using Ajax?
Hello,
I have figured out to dynamically update a single control using behaviors and Ajax, but I need to dynamically update multiple controls (panels and forms) when a user clicks a button. I know that I can return a response of concatenated html for each of these controls and have the resulting JavaScript parse out and update the controls. But I am looking for a more elegant solution. Is it possible to make individual Ajax calls to return html for each of the controls, and if so, how would I set up AjaxBehviors (on a Panel, for example) and call these Behaviors (url's, parameters, etc)?
Thank you,
Nick.
Re: Update multiple panels using Ajax?
Posted by Mike Hoolehan <mi...@hoolehan.com>.
Yes, as my example is written, it's currently up to you. My example
of setting up that link is straight from the Click docs
(http://click.apache.org/docs/user-guide/html/ch04s04.html). I agree
though that it doesn't seem consistent to write this javascript in the
templates.
I think the solution is either to a) create a custom ActionLink
descendent (e.g. AjaxActionLink) that would automatically add its own
click handler and "makeRequest" javascript or b) create a custom
Behavior which can add the same stuff to any control.
Mike
On Mon, Jul 18, 2011 at 15:59, Gilberto <gi...@gmail.com> wrote:
> Hi Mike,
>
> Thanks for you time!
> I've not used ajax yet and would like to make a question in relation
> to javascript generated in the template:
> Is that js code (jQuery(document).ready(function() and function
> makeRequest()) of my responsibility? Having I several controls(the
> controls's ID) in my page, would I have to replicate these code for
> them(of course, just the controls that we need to make ajaxware!)?
>
> Good work,
>
> Gilberto Caetano de Andrade
> www.secad.to.gov.br
> http://blog.gilbertoca.com
>
> On Sun, Jul 17, 2011 at 9:01 AM, Mike Hoolehan <mi...@hoolehan.com> wrote:
>> I wrote up a more complete description (with some code examples) of
>> the possible solution I mentioned here:
>> http://www.hoolehan.com/computer/apache_click_dom_event_actionresults.html
>>
>> I hope it's helpful.
>>
>> On Sat, Jul 16, 2011 at 20:27, Nicholas Dierauf
>> <ni...@autodesk.com> wrote:
>>> Wonderful. Thanks very much for your explanation. I will definitely investigate this.
>>>
>>> I implemented a kludgy work-around by adding an additional ActionLink to my form with a "visibility" style of "none" and added a DefaultAjaxBehavior. Then, after the behavior for the Submit button was executed, the JavaScript code then performs an onclick event on this hidden link to update other controls. Not so elegant, but works ... Your suggestion sounds much more elegant. Either way, it is a lot of hoops to jump through in order to achieve a more "desktop" app look and feel :-).
>>>
>>> I am still interested in understanding how I can attach an AjaxBehavior to a control such as a Panel and how I can call that behavior via JavaScript. In a subsequent email from Bob Schellink (thanks Bob), he mentions that I would need to send the Control's ID in an Ajax request in order to target that Control and it's behavior. I feel like I've tried this with no success. I'm probably doing it wrong somehow. I would be interested in seeing what a URL would look like to call the targeted Control and behavior. Some sample code would be lovely!
>>>
>>> Thanks very much Mike and Bob.
>>> Nick.
>>>
>>> -----Original Message-----
>>> From: Mike Hoolehan [mailto:mike@hoolehan.com]
>>> Sent: Saturday, July 16, 2011 12:22 AM
>>> To: user@click.apache.org
>>> Subject: Re: Update multiple panels using Ajax?
>>>
>>> I came across something similar when evaluating Click and here's the solution I came up with. I don't know if it precisely answers your
>>> question, but maybe it will help. The sample code has jquery
>>> dependency, but you could recode without.
>>>
>>> The overview: A custom ActionResult child is used to trigger a DOM
>>> event of any given type. One or more target elements are bound this
>>> event type by a custom Behavior, which causes custom js to be executed whenever the event is "heard". So in your case your initial Ajax request would result in a simple event trigger, and all the other panels and forms would listen for it. When they heard it, they would each send out their own ajax requests to retrieve their new content.
>>>
>>> Here's my addEvent method on ActionResultWithDomEvent which extends
>>> ActionResult:
>>> public void addEvent(String name) {
>>> if (this.getContent() != null)
>>> this.setContent(this.getContent() + "jQuery('body').trigger('" + name + "');");
>>> else
>>> this.setContent("jQuery('body').trigger('" + name + "');");
>>> }
>>> Note the content type is set to javascript for by constructors.
>>>
>>> And here's a sample Behavior class that causes some Jquery effect when the event is heard. There really should be a base class "JavascriptOnEventBehavior" and then you could make your own "AjaxCallOnEventBehavior" or something that inherits... Anyway:
>>>
>>> public class JqueryEffectOnEventBehavior implements Behavior {
>>> ... effect settings and so on....
>>> protected String effect_type = "default_effect_evt";
>>>
>>> public void preRenderHeadElements(Control source) {
>>> String id = source.getId();
>>> String fxOptionString = JSONValue.toJSONString(this.options);
>>> String jsText = "$('body').bind('" + this.event_type + "',
>>> function(event){" + "$('#" + id + "').effect('" + this.effect_type + "',"
>>>
>>> + fxOptionString + "," + this.speed + ");});";
>>> JsScript jsScript = new JsScript(jsText);
>>> jsScript.setExecuteOnDomReady(true);
>>> source.getHeadElements().add(jsScript);
>>> }
>>>
>>> Mike
>>>
>>>
>>> On Fri, Jul 15, 2011 at 23:17, Nicholas Dierauf <ni...@autodesk.com> wrote:
>>>> Hello,
>>>>
>>>>
>>>>
>>>> I have figured out to dynamically update a single control using
>>>> behaviors and Ajax, but I need to dynamically update multiple controls
>>>> (panels and
>>>> forms) when a user clicks a button. I know that I can return a
>>>> response of concatenated html for each of these controls and have the
>>>> resulting JavaScript parse out and update the controls. But I am
>>>> looking for a more elegant solution. Is it possible to make individual
>>>> Ajax calls to return html for each of the controls, and if so, how
>>>> would I set up AjaxBehviors (on a Panel, for example) and call these Behaviors (url's, parameters, etc)?
>>>>
>>>>
>>>>
>>>> Thank you,
>>>>
>>>> Nick.
>>>
>>
>
Re: Update multiple panels using Ajax?
Posted by Gilberto <gi...@gmail.com>.
Hi Mike,
Thanks for you time!
I've not used ajax yet and would like to make a question in relation
to javascript generated in the template:
Is that js code (jQuery(document).ready(function() and function
makeRequest()) of my responsibility? Having I several controls(the
controls's ID) in my page, would I have to replicate these code for
them(of course, just the controls that we need to make ajaxware!)?
Good work,
Gilberto Caetano de Andrade
www.secad.to.gov.br
http://blog.gilbertoca.com
On Sun, Jul 17, 2011 at 9:01 AM, Mike Hoolehan <mi...@hoolehan.com> wrote:
> I wrote up a more complete description (with some code examples) of
> the possible solution I mentioned here:
> http://www.hoolehan.com/computer/apache_click_dom_event_actionresults.html
>
> I hope it's helpful.
>
> On Sat, Jul 16, 2011 at 20:27, Nicholas Dierauf
> <ni...@autodesk.com> wrote:
>> Wonderful. Thanks very much for your explanation. I will definitely investigate this.
>>
>> I implemented a kludgy work-around by adding an additional ActionLink to my form with a "visibility" style of "none" and added a DefaultAjaxBehavior. Then, after the behavior for the Submit button was executed, the JavaScript code then performs an onclick event on this hidden link to update other controls. Not so elegant, but works ... Your suggestion sounds much more elegant. Either way, it is a lot of hoops to jump through in order to achieve a more "desktop" app look and feel :-).
>>
>> I am still interested in understanding how I can attach an AjaxBehavior to a control such as a Panel and how I can call that behavior via JavaScript. In a subsequent email from Bob Schellink (thanks Bob), he mentions that I would need to send the Control's ID in an Ajax request in order to target that Control and it's behavior. I feel like I've tried this with no success. I'm probably doing it wrong somehow. I would be interested in seeing what a URL would look like to call the targeted Control and behavior. Some sample code would be lovely!
>>
>> Thanks very much Mike and Bob.
>> Nick.
>>
>> -----Original Message-----
>> From: Mike Hoolehan [mailto:mike@hoolehan.com]
>> Sent: Saturday, July 16, 2011 12:22 AM
>> To: user@click.apache.org
>> Subject: Re: Update multiple panels using Ajax?
>>
>> I came across something similar when evaluating Click and here's the solution I came up with. I don't know if it precisely answers your
>> question, but maybe it will help. The sample code has jquery
>> dependency, but you could recode without.
>>
>> The overview: A custom ActionResult child is used to trigger a DOM
>> event of any given type. One or more target elements are bound this
>> event type by a custom Behavior, which causes custom js to be executed whenever the event is "heard". So in your case your initial Ajax request would result in a simple event trigger, and all the other panels and forms would listen for it. When they heard it, they would each send out their own ajax requests to retrieve their new content.
>>
>> Here's my addEvent method on ActionResultWithDomEvent which extends
>> ActionResult:
>> public void addEvent(String name) {
>> if (this.getContent() != null)
>> this.setContent(this.getContent() + "jQuery('body').trigger('" + name + "');");
>> else
>> this.setContent("jQuery('body').trigger('" + name + "');");
>> }
>> Note the content type is set to javascript for by constructors.
>>
>> And here's a sample Behavior class that causes some Jquery effect when the event is heard. There really should be a base class "JavascriptOnEventBehavior" and then you could make your own "AjaxCallOnEventBehavior" or something that inherits... Anyway:
>>
>> public class JqueryEffectOnEventBehavior implements Behavior {
>> ... effect settings and so on....
>> protected String effect_type = "default_effect_evt";
>>
>> public void preRenderHeadElements(Control source) {
>> String id = source.getId();
>> String fxOptionString = JSONValue.toJSONString(this.options);
>> String jsText = "$('body').bind('" + this.event_type + "',
>> function(event){" + "$('#" + id + "').effect('" + this.effect_type + "',"
>>
>> + fxOptionString + "," + this.speed + ");});";
>> JsScript jsScript = new JsScript(jsText);
>> jsScript.setExecuteOnDomReady(true);
>> source.getHeadElements().add(jsScript);
>> }
>>
>> Mike
>>
>>
>> On Fri, Jul 15, 2011 at 23:17, Nicholas Dierauf <ni...@autodesk.com> wrote:
>>> Hello,
>>>
>>>
>>>
>>> I have figured out to dynamically update a single control using
>>> behaviors and Ajax, but I need to dynamically update multiple controls
>>> (panels and
>>> forms) when a user clicks a button. I know that I can return a
>>> response of concatenated html for each of these controls and have the
>>> resulting JavaScript parse out and update the controls. But I am
>>> looking for a more elegant solution. Is it possible to make individual
>>> Ajax calls to return html for each of the controls, and if so, how
>>> would I set up AjaxBehviors (on a Panel, for example) and call these Behaviors (url's, parameters, etc)?
>>>
>>>
>>>
>>> Thank you,
>>>
>>> Nick.
>>
>
Re: Update multiple panels using Ajax?
Posted by Bob Schellink <sa...@gmail.com>.
Hi Mike,
Thanks for the great writeup!
Kind regards
Bob
On 2011/07/17 14:01 PM, Mike Hoolehan wrote:
> I wrote up a more complete description (with some code examples) of
> the possible solution I mentioned here:
> http://www.hoolehan.com/computer/apache_click_dom_event_actionresults.html
>
> I hope it's helpful.
>
> On Sat, Jul 16, 2011 at 20:27, Nicholas Dierauf
> <ni...@autodesk.com> wrote:
>> Wonderful. Thanks very much for your explanation. I will definitely investigate this.
>>
>> I implemented a kludgy work-around by adding an additional ActionLink to my form with a "visibility" style of "none" and added a DefaultAjaxBehavior. Then, after the behavior for the Submit button was executed, the JavaScript code then performs an onclick event on this hidden link to update other controls. Not so elegant, but works ... Your suggestion sounds much more elegant. Either way, it is a lot of hoops to jump through in order to achieve a more "desktop" app look and feel :-).
>>
>> I am still interested in understanding how I can attach an AjaxBehavior to a control such as a Panel and how I can call that behavior via JavaScript. In a subsequent email from Bob Schellink (thanks Bob), he mentions that I would need to send the Control's ID in an Ajax request in order to target that Control and it's behavior. I feel like I've tried this with no success. I'm probably doing it wrong somehow. I would be interested in seeing what a URL would look like to call the targeted Control and behavior. Some sample code would be lovely!
>>
>> Thanks very much Mike and Bob.
>> Nick.
>>
>> -----Original Message-----
>> From: Mike Hoolehan [mailto:mike@hoolehan.com]
>> Sent: Saturday, July 16, 2011 12:22 AM
>> To: user@click.apache.org
>> Subject: Re: Update multiple panels using Ajax?
>>
>> I came across something similar when evaluating Click and here's the solution I came up with. I don't know if it precisely answers your
>> question, but maybe it will help. The sample code has jquery
>> dependency, but you could recode without.
>>
>> The overview: A custom ActionResult child is used to trigger a DOM
>> event of any given type. One or more target elements are bound this
>> event type by a custom Behavior, which causes custom js to be executed whenever the event is "heard". So in your case your initial Ajax request would result in a simple event trigger, and all the other panels and forms would listen for it. When they heard it, they would each send out their own ajax requests to retrieve their new content.
>>
>> Here's my addEvent method on ActionResultWithDomEvent which extends
>> ActionResult:
>> public void addEvent(String name) {
>> if (this.getContent() != null)
>> this.setContent(this.getContent() + "jQuery('body').trigger('" + name + "');");
>> else
>> this.setContent("jQuery('body').trigger('" + name + "');");
>> }
>> Note the content type is set to javascript for by constructors.
>>
>> And here's a sample Behavior class that causes some Jquery effect when the event is heard. There really should be a base class "JavascriptOnEventBehavior" and then you could make your own "AjaxCallOnEventBehavior" or something that inherits... Anyway:
>>
>> public class JqueryEffectOnEventBehavior implements Behavior {
>> ... effect settings and so on....
>> protected String effect_type = "default_effect_evt";
>>
>> public void preRenderHeadElements(Control source) {
>> String id = source.getId();
>> String fxOptionString = JSONValue.toJSONString(this.options);
>> String jsText = "$('body').bind('" + this.event_type + "',
>> function(event){" + "$('#" + id + "').effect('" + this.effect_type + "',"
>>
>> + fxOptionString + "," + this.speed + ");});";
>> JsScript jsScript = new JsScript(jsText);
>> jsScript.setExecuteOnDomReady(true);
>> source.getHeadElements().add(jsScript);
>> }
>>
>> Mike
>>
>>
>> On Fri, Jul 15, 2011 at 23:17, Nicholas Dierauf<ni...@autodesk.com> wrote:
>>> Hello,
>>>
>>>
>>>
>>> I have figured out to dynamically update a single control using
>>> behaviors and Ajax, but I need to dynamically update multiple controls
>>> (panels and
>>> forms) when a user clicks a button. I know that I can return a
>>> response of concatenated html for each of these controls and have the
>>> resulting JavaScript parse out and update the controls. But I am
>>> looking for a more elegant solution. Is it possible to make individual
>>> Ajax calls to return html for each of the controls, and if so, how
>>> would I set up AjaxBehviors (on a Panel, for example) and call these Behaviors (url's, parameters, etc)?
>>>
>>>
>>>
>>> Thank you,
>>>
>>> Nick.
>>
>
Re: Update multiple panels using Ajax?
Posted by Mike Hoolehan <mi...@hoolehan.com>.
I wrote up a more complete description (with some code examples) of
the possible solution I mentioned here:
http://www.hoolehan.com/computer/apache_click_dom_event_actionresults.html
I hope it's helpful.
On Sat, Jul 16, 2011 at 20:27, Nicholas Dierauf
<ni...@autodesk.com> wrote:
> Wonderful. Thanks very much for your explanation. I will definitely investigate this.
>
> I implemented a kludgy work-around by adding an additional ActionLink to my form with a "visibility" style of "none" and added a DefaultAjaxBehavior. Then, after the behavior for the Submit button was executed, the JavaScript code then performs an onclick event on this hidden link to update other controls. Not so elegant, but works ... Your suggestion sounds much more elegant. Either way, it is a lot of hoops to jump through in order to achieve a more "desktop" app look and feel :-).
>
> I am still interested in understanding how I can attach an AjaxBehavior to a control such as a Panel and how I can call that behavior via JavaScript. In a subsequent email from Bob Schellink (thanks Bob), he mentions that I would need to send the Control's ID in an Ajax request in order to target that Control and it's behavior. I feel like I've tried this with no success. I'm probably doing it wrong somehow. I would be interested in seeing what a URL would look like to call the targeted Control and behavior. Some sample code would be lovely!
>
> Thanks very much Mike and Bob.
> Nick.
>
> -----Original Message-----
> From: Mike Hoolehan [mailto:mike@hoolehan.com]
> Sent: Saturday, July 16, 2011 12:22 AM
> To: user@click.apache.org
> Subject: Re: Update multiple panels using Ajax?
>
> I came across something similar when evaluating Click and here's the solution I came up with. I don't know if it precisely answers your
> question, but maybe it will help. The sample code has jquery
> dependency, but you could recode without.
>
> The overview: A custom ActionResult child is used to trigger a DOM
> event of any given type. One or more target elements are bound this
> event type by a custom Behavior, which causes custom js to be executed whenever the event is "heard". So in your case your initial Ajax request would result in a simple event trigger, and all the other panels and forms would listen for it. When they heard it, they would each send out their own ajax requests to retrieve their new content.
>
> Here's my addEvent method on ActionResultWithDomEvent which extends
> ActionResult:
> public void addEvent(String name) {
> if (this.getContent() != null)
> this.setContent(this.getContent() + "jQuery('body').trigger('" + name + "');");
> else
> this.setContent("jQuery('body').trigger('" + name + "');");
> }
> Note the content type is set to javascript for by constructors.
>
> And here's a sample Behavior class that causes some Jquery effect when the event is heard. There really should be a base class "JavascriptOnEventBehavior" and then you could make your own "AjaxCallOnEventBehavior" or something that inherits... Anyway:
>
> public class JqueryEffectOnEventBehavior implements Behavior {
> ... effect settings and so on....
> protected String effect_type = "default_effect_evt";
>
> public void preRenderHeadElements(Control source) {
> String id = source.getId();
> String fxOptionString = JSONValue.toJSONString(this.options);
> String jsText = "$('body').bind('" + this.event_type + "',
> function(event){" + "$('#" + id + "').effect('" + this.effect_type + "',"
>
> + fxOptionString + "," + this.speed + ");});";
> JsScript jsScript = new JsScript(jsText);
> jsScript.setExecuteOnDomReady(true);
> source.getHeadElements().add(jsScript);
> }
>
> Mike
>
>
> On Fri, Jul 15, 2011 at 23:17, Nicholas Dierauf <ni...@autodesk.com> wrote:
>> Hello,
>>
>>
>>
>> I have figured out to dynamically update a single control using
>> behaviors and Ajax, but I need to dynamically update multiple controls
>> (panels and
>> forms) when a user clicks a button. I know that I can return a
>> response of concatenated html for each of these controls and have the
>> resulting JavaScript parse out and update the controls. But I am
>> looking for a more elegant solution. Is it possible to make individual
>> Ajax calls to return html for each of the controls, and if so, how
>> would I set up AjaxBehviors (on a Panel, for example) and call these Behaviors (url's, parameters, etc)?
>>
>>
>>
>> Thank you,
>>
>> Nick.
>
Re: Update multiple panels using Ajax?
Posted by Bob Schellink <sa...@gmail.com>.
Hi,
Have a look at the AjaxBehavior demo in the Click distribution, it shows how to call the link's
AjaxBehavior:
http://click.avoka.com/click-examples/ajax/ajax-behavior.htm
Calling the behavior on a Panel should be no different. The URL only needs to specify the Panel's ID
and that will instruct Click to process the Panel. If the panel had an id of "mypanel" a URL could
look like:
http://localhost/click-examples/ajax/ajax-behavior.htm?mypanel=1
As a test modify the AjaxBehavior demo and replace the ActionLink with a Panel.
regards
Bob
On 2011/07/16 19:27 PM, Nicholas Dierauf wrote:
> Wonderful. Thanks very much for your explanation. I will definitely investigate this.
>
> I implemented a kludgy work-around by adding an additional ActionLink to my form with a "visibility" style of "none" and added a DefaultAjaxBehavior. Then, after the behavior for the Submit button was executed, the JavaScript code then performs an onclick event on this hidden link to update other controls. Not so elegant, but works ... Your suggestion sounds much more elegant. Either way, it is a lot of hoops to jump through in order to achieve a more "desktop" app look and feel :-).
>
> I am still interested in understanding how I can attach an AjaxBehavior to a control such as a Panel and how I can call that behavior via JavaScript. In a subsequent email from Bob Schellink (thanks Bob), he mentions that I would need to send the Control's ID in an Ajax request in order to target that Control and it's behavior. I feel like I've tried this with no success. I'm probably doing it wrong somehow. I would be interested in seeing what a URL would look like to call the targeted Control and behavior. Some sample code would be lovely!
>
> Thanks very much Mike and Bob.
> Nick.
>
> -----Original Message-----
> From: Mike Hoolehan [mailto:mike@hoolehan.com]
> Sent: Saturday, July 16, 2011 12:22 AM
> To: user@click.apache.org
> Subject: Re: Update multiple panels using Ajax?
>
> I came across something similar when evaluating Click and here's the solution I came up with. I don't know if it precisely answers your
> question, but maybe it will help. The sample code has jquery
> dependency, but you could recode without.
>
> The overview: A custom ActionResult child is used to trigger a DOM
> event of any given type. One or more target elements are bound this
> event type by a custom Behavior, which causes custom js to be executed whenever the event is "heard". So in your case your initial Ajax request would result in a simple event trigger, and all the other panels and forms would listen for it. When they heard it, they would each send out their own ajax requests to retrieve their new content.
>
> Here's my addEvent method on ActionResultWithDomEvent which extends
> ActionResult:
> public void addEvent(String name) {
> if (this.getContent() != null)
> this.setContent(this.getContent() + "jQuery('body').trigger('" + name + "');");
> else
> this.setContent("jQuery('body').trigger('" + name + "');");
> }
> Note the content type is set to javascript for by constructors.
>
> And here's a sample Behavior class that causes some Jquery effect when the event is heard. There really should be a base class "JavascriptOnEventBehavior" and then you could make your own "AjaxCallOnEventBehavior" or something that inherits... Anyway:
>
> public class JqueryEffectOnEventBehavior implements Behavior {
> ... effect settings and so on....
> protected String effect_type = "default_effect_evt";
>
> public void preRenderHeadElements(Control source) {
> String id = source.getId();
> String fxOptionString = JSONValue.toJSONString(this.options);
> String jsText = "$('body').bind('" + this.event_type + "',
> function(event){" + "$('#" + id + "').effect('" + this.effect_type + "',"
>
> + fxOptionString + "," + this.speed + ");});";
> JsScript jsScript = new JsScript(jsText);
> jsScript.setExecuteOnDomReady(true);
> source.getHeadElements().add(jsScript);
> }
>
> Mike
>
>
> On Fri, Jul 15, 2011 at 23:17, Nicholas Dierauf<ni...@autodesk.com> wrote:
>> Hello,
>>
>>
>>
>> I have figured out to dynamically update a single control using
>> behaviors and Ajax, but I need to dynamically update multiple controls
>> (panels and
>> forms) when a user clicks a button. I know that I can return a
>> response of concatenated html for each of these controls and have the
>> resulting JavaScript parse out and update the controls. But I am
>> looking for a more elegant solution. Is it possible to make individual
>> Ajax calls to return html for each of the controls, and if so, how
>> would I set up AjaxBehviors (on a Panel, for example) and call these Behaviors (url's, parameters, etc)?
>>
>>
>>
>> Thank you,
>>
>> Nick.
RE: Update multiple panels using Ajax?
Posted by Nicholas Dierauf <ni...@autodesk.com>.
Wonderful. Thanks very much for your explanation. I will definitely investigate this.
I implemented a kludgy work-around by adding an additional ActionLink to my form with a "visibility" style of "none" and added a DefaultAjaxBehavior. Then, after the behavior for the Submit button was executed, the JavaScript code then performs an onclick event on this hidden link to update other controls. Not so elegant, but works ... Your suggestion sounds much more elegant. Either way, it is a lot of hoops to jump through in order to achieve a more "desktop" app look and feel :-).
I am still interested in understanding how I can attach an AjaxBehavior to a control such as a Panel and how I can call that behavior via JavaScript. In a subsequent email from Bob Schellink (thanks Bob), he mentions that I would need to send the Control's ID in an Ajax request in order to target that Control and it's behavior. I feel like I've tried this with no success. I'm probably doing it wrong somehow. I would be interested in seeing what a URL would look like to call the targeted Control and behavior. Some sample code would be lovely!
Thanks very much Mike and Bob.
Nick.
-----Original Message-----
From: Mike Hoolehan [mailto:mike@hoolehan.com]
Sent: Saturday, July 16, 2011 12:22 AM
To: user@click.apache.org
Subject: Re: Update multiple panels using Ajax?
I came across something similar when evaluating Click and here's the solution I came up with. I don't know if it precisely answers your
question, but maybe it will help. The sample code has jquery
dependency, but you could recode without.
The overview: A custom ActionResult child is used to trigger a DOM
event of any given type. One or more target elements are bound this
event type by a custom Behavior, which causes custom js to be executed whenever the event is "heard". So in your case your initial Ajax request would result in a simple event trigger, and all the other panels and forms would listen for it. When they heard it, they would each send out their own ajax requests to retrieve their new content.
Here's my addEvent method on ActionResultWithDomEvent which extends
ActionResult:
public void addEvent(String name) {
if (this.getContent() != null)
this.setContent(this.getContent() + "jQuery('body').trigger('" + name + "');");
else
this.setContent("jQuery('body').trigger('" + name + "');");
}
Note the content type is set to javascript for by constructors.
And here's a sample Behavior class that causes some Jquery effect when the event is heard. There really should be a base class "JavascriptOnEventBehavior" and then you could make your own "AjaxCallOnEventBehavior" or something that inherits... Anyway:
public class JqueryEffectOnEventBehavior implements Behavior {
... effect settings and so on....
protected String effect_type = "default_effect_evt";
public void preRenderHeadElements(Control source) {
String id = source.getId();
String fxOptionString = JSONValue.toJSONString(this.options);
String jsText = "$('body').bind('" + this.event_type + "',
function(event){" + "$('#" + id + "').effect('" + this.effect_type + "',"
+ fxOptionString + "," + this.speed + ");});";
JsScript jsScript = new JsScript(jsText);
jsScript.setExecuteOnDomReady(true);
source.getHeadElements().add(jsScript);
}
Mike
On Fri, Jul 15, 2011 at 23:17, Nicholas Dierauf <ni...@autodesk.com> wrote:
> Hello,
>
>
>
> I have figured out to dynamically update a single control using
> behaviors and Ajax, but I need to dynamically update multiple controls
> (panels and
> forms) when a user clicks a button. I know that I can return a
> response of concatenated html for each of these controls and have the
> resulting JavaScript parse out and update the controls. But I am
> looking for a more elegant solution. Is it possible to make individual
> Ajax calls to return html for each of the controls, and if so, how
> would I set up AjaxBehviors (on a Panel, for example) and call these Behaviors (url's, parameters, etc)?
>
>
>
> Thank you,
>
> Nick.
Re: Update multiple panels using Ajax?
Posted by Mike Hoolehan <mi...@hoolehan.com>.
I came across something similar when evaluating Click and here's the
solution I came up with. I don't know if it precisely answers your
question, but maybe it will help. The sample code has jquery
dependency, but you could recode without.
The overview: A custom ActionResult child is used to trigger a DOM
event of any given type. One or more target elements are bound this
event type by a custom Behavior, which causes custom js to be executed
whenever the event is "heard". So in your case your initial Ajax
request would result in a simple event trigger, and all the other
panels and forms would listen for it. When they heard it, they would
each send out their own ajax requests to retrieve their new content.
Here's my addEvent method on ActionResultWithDomEvent which extends
ActionResult:
public void addEvent(String name) {
if (this.getContent() != null)
this.setContent(this.getContent() +
"jQuery('body').trigger('" + name + "');");
else
this.setContent("jQuery('body').trigger('" + name + "');");
}
Note the content type is set to javascript for by constructors.
And here's a sample Behavior class that causes some Jquery effect when
the event is heard. There really should be a base class
"JavascriptOnEventBehavior" and then you could make your own
"AjaxCallOnEventBehavior" or something that inherits... Anyway:
public class JqueryEffectOnEventBehavior implements Behavior {
... effect settings and so on....
protected String effect_type = "default_effect_evt";
public void preRenderHeadElements(Control source) {
String id = source.getId();
String fxOptionString = JSONValue.toJSONString(this.options);
String jsText = "$('body').bind('" + this.event_type + "',
function(event){" + "$('#" +
id + "').effect('" + this.effect_type + "',"
+ fxOptionString + "," + this.speed + ");});";
JsScript jsScript = new JsScript(jsText);
jsScript.setExecuteOnDomReady(true);
source.getHeadElements().add(jsScript);
}
Mike
On Fri, Jul 15, 2011 at 23:17, Nicholas Dierauf
<ni...@autodesk.com> wrote:
> Hello,
>
>
>
> I have figured out to dynamically update a single control using behaviors
> and Ajax, but I need to dynamically update multiple controls (panels and
> forms) when a user clicks a button. I know that I can return a response of
> concatenated html for each of these controls and have the resulting
> JavaScript parse out and update the controls. But I am looking for a more
> elegant solution. Is it possible to make individual Ajax calls to return
> html for each of the controls, and if so, how would I set up AjaxBehviors
> (on a Panel, for example) and call these Behaviors (url’s, parameters, etc)?
>
>
>
> Thank you,
>
> Nick.
Re: Update multiple panels using Ajax?
Posted by Bob Schellink <sa...@gmail.com>.
Hi Nick,
I settled on sending back multiple html snippets and parsing out the result. The project is here:
http://code.google.com/a/apache-extras.org/p/ajax4click/
with docs here:
http://code.google.com/a/apache-extras.org/p/ajax4click/wiki/jQueryAjax
If you want to make multiple calls back to the server you need to send the Controls ID in the Ajax
request in order to target only that Control and it's behavior.
regards
Bob
On 2011/07/15 22:17 PM, Nicholas Dierauf wrote:
>
> Hello,
>
> I have figured out to dynamically update a single control using behaviors and Ajax, but I need to
> dynamically update multiple controls (panels and forms) when a user clicks a button. I know that I
> can return a response of concatenated html for each of these controls and have the resulting
> JavaScript parse out and update the controls. But I am looking for a more elegant solution. Is it
> possible to make individual Ajax calls to return html for each of the controls, and if so, how
> would I set up AjaxBehviors (on a Panel, for example) and call these Behaviors (url's, parameters,
> etc)?
>
> Thank you,
>
> Nick.
>