Adding JS to my component combined with using t:If

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

Adding JS to my component combined with using t:If

Poggenpohl, Daniel
Hello everyone,

I am trying to add the capabilities of a WYSIWYG editor to my Tapestry 5.3.8 project, namely TinyMCE.

I have some questions regarding use of JavaScript in my pages/components:


1)      Reading https://tapestry.apache.org/legacy-javascript.html , the preferred way to reference a javascript library is to use the @Import annotation and not referencing via <script src> in the tml file. If I do it the second way and reference the script in a component that is used multiple times on the same page, it is not ensured that the javascript is added only once to the resulting source. Am I correct?

2)      TinyMCE is used via an "init" method that has a "selector" argument to choose which html elements will be replaced with the editor.
I placed the "init" method at the beginning of the component containing the elements to be replaced. I then chose the editable element to be an element inside an <t:If>.
The editor is not shown because the element that is editable is only shown after an event happens (i.e. clicking).

My component works like this:
- If the component has no content, nothing is shown in a content field. You can click on the content field to activate the editor.
- If the component has content, it is shown in a pure read-only field. When you double-click on the content field, the editor should be shown instead.
- The above is done by refreshing zones and toggling Boolean values.

How should I do it right? Creating a mixin that receives the script?

Regards,
Daniel P.
Reply | Threaded
Open this post in threaded view
|

Re: Adding JS to my component combined with using t:If

Thiago H de Paula Figueiredo
On Fri, 22 May 2015 07:01:14 -0300, Poggenpohl, Daniel  
<[hidden email]> wrote:

> Hello everyone,

Hi!

> I am trying to add the capabilities of a WYSIWYG editor to my Tapestry  
> 5.3.8 project, namely TinyMCE.
>
> I have some questions regarding use of JavaScript in my pages/components:
>
>
> 1)      Reading https://tapestry.apache.org/legacy-javascript.html , the  
> preferred way to reference a javascript library is to use the @Import  
> annotation and not referencing via <script src> in the tml file. If I do  
> it the second way and reference the script in a component that is used  
> multiple times on the same page, it is not ensured that the javascript  
> is added only once to the resulting source. Am I correct?

Yep!

> 2)      TinyMCE is used via an "init" method that has a "selector"  
> argument to choose which html elements will be replaced with the editor.
> I placed the "init" method at the beginning of the component containing  
> the elements to be replaced.

You're calling this init() function directly in the .tml, like  
<script>init()</script>? Hmm, not good. Use JavascriptSupport.addScript()  
instead. This guarantees that you dynamically-added script will be  
executed after the imports.

--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

AW: Adding JS to my component combined with using t:If

Poggenpohl, Daniel
Hello again and thanks for answering,

I removed the <script> from the beginning of the component template and created a mixin like on http://metacoder.de/entry/TinyMCE-Mixin-in-Tapestry-5---Version-2-4 .

From what I understand, when this mixin is placed on a Tapestry component, I declare the underlying client element to be editable with TinyMCE, i.e. replaced with the TinyMCE editor.

But when I create a page containing some textarea in a form, import the tinyMCE.js, and put the mixin on the textarea in the tml, the editor is not started.

What am I doing wrong? Do I have to use the mixin per injection in the java file?

Regards,
Daniel P.



-----Ursprüngliche Nachricht-----
Von: Thiago H de Paula Figueiredo [mailto:[hidden email]]
Gesendet: Freitag, 22. Mai 2015 14:32
An: Tapestry users
Betreff: Re: Adding JS to my component combined with using t:If

On Fri, 22 May 2015 07:01:14 -0300, Poggenpohl, Daniel <[hidden email]> wrote:

> Hello everyone,

Hi!

> I am trying to add the capabilities of a WYSIWYG editor to my Tapestry
> 5.3.8 project, namely TinyMCE.
>
> I have some questions regarding use of JavaScript in my pages/components:
>
>
> 1)      Reading https://tapestry.apache.org/legacy-javascript.html , the  
> preferred way to reference a javascript library is to use the @Import
> annotation and not referencing via <script src> in the tml file. If I
> do it the second way and reference the script in a component that is
> used multiple times on the same page, it is not ensured that the
> javascript is added only once to the resulting source. Am I correct?

Yep!

> 2)      TinyMCE is used via an "init" method that has a "selector"  
> argument to choose which html elements will be replaced with the editor.
> I placed the "init" method at the beginning of the component
> containing the elements to be replaced.

You're calling this init() function directly in the .tml, like <script>init()</script>? Hmm, not good. Use JavascriptSupport.addScript() instead. This guarantees that you dynamically-added script will be executed after the imports.

--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer http://machina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

Re: AW: Adding JS to my component combined with using t:If

Thiago H de Paula Figueiredo
On Fri, 22 May 2015 09:59:53 -0300, Poggenpohl, Daniel  
<[hidden email]> wrote:

> Hello again and thanks for answering,

Hi!

> But when I create a page containing some textarea in a form, import the  
> tinyMCE.js, and put the mixin on the textarea in the tml, the editor is  
> not started.

Have you checked the browser console for JavaScript errors? Are you  
actually invoking the init() function?

> What am I doing wrong? Do I have to use the mixin per injection in the  
> java file?

No.

--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

AW: AW: Adding JS to my component combined with using t:If

Poggenpohl, Daniel
Hi again,

I've since fixed what was of course a bug caused by my inexperience with JavaScript.

Since my last post, I've managed to replace specific textareas on the page with the tinyMCE editor via double-click events and via means of a button.
I'm also able to remove the editor instance so that the textarea it is based upon is visible again, with the updated contents to boot. Finding the right command to do this was a bit hard, as the documentation is comprehensive, but large, and I am, as mentioned above, a relative JS newbie.

My problem now is: I want my editor instances to have functionality so that when I click a button in the editor, the changed content is saved, and the editor is replaced with the old markup that shows the content in a read-only div.

Declaring a custom button within tinyMCE is easy, I just write the name and function of the button.

My component works like this:
- if "showEditor" is false, a div displays the String content read-only. Then you can raise a component event in multiple ways (double-click something etc.) to set "showEditor" to true. Then the zone containing all my elements is Ajax refreshed.
- if "showEditor" is true, a textarea is rendered, but replaced with the tinyMCE editor.

The textarea is updated automatically when I remove the tinyMCE editor.
But I need a way to tell the component containing the editable content that it should update/commit the underlying db object, set "showEditor" to false and refresh the zone.

Jquery can define arbitrary events that can be triggered. I thought I could raise a JS event and handle it via "onEVENTNAME" on the Tapestry component side. But of course that doesn't work, probably because no event handlers are generated because no corresponding eventlink is created.

How can I achieve the link between the tinymce editor and the Tapestry side?

Regards,
Daniel P.

-----Ursprüngliche Nachricht-----
Von: Thiago H de Paula Figueiredo [mailto:[hidden email]]
Gesendet: Freitag, 22. Mai 2015 15:45
An: Tapestry users
Betreff: Re: AW: Adding JS to my component combined with using t:If

On Fri, 22 May 2015 09:59:53 -0300, Poggenpohl, Daniel <[hidden email]> wrote:

> Hello again and thanks for answering,

Hi!

> But when I create a page containing some textarea in a form, import
> the tinyMCE.js, and put the mixin on the textarea in the tml, the
> editor is not started.

Have you checked the browser console for JavaScript errors? Are you actually invoking the init() function?

> What am I doing wrong? Do I have to use the mixin per injection in the
> java file?

No.

--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer http://machina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

Re: AW: AW: Adding JS to my component combined with using t:If

Thiago H de Paula Figueiredo
On Tue, 26 May 2015 11:49:20 -0300, Poggenpohl, Daniel  
<[hidden email]> wrote:

> Hi again,

Hi!

> Jquery can define arbitrary events that can be triggered. I thought I  
> could raise a JS event and handle it via "onEVENTNAME" on the Tapestry  
> component side. But of course that doesn't work, probably because no  
> event handlers are generated because no corresponding eventlink is  
> created.

Event handlers aren't generated at all by Tapestry. You declare them by  
using @OnEvent or using a naming convention. You just cannot trigger a JS  
event and expect it to magically trigger a server-side event.

Tapestry doesn't need an EventLink or ActionLink to be able to trigger an  
event handler method in the server-side. You can create your own events  
and their URLs by using ComponentResources.createEventLink(). With the URL  
generated by that method, you can invoke them using AJAX in JS.

--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

AW: AW: AW: Adding JS to my component combined with using t:If

Poggenpohl, Daniel
Hi,

thank you for helping me. Again I had wording issues, it seems.
I did know that event handling methods on Tapestry pages and components are written manually.
I just wrote "event handlers" because I thought there was something in between the handler methods and the Eventlinks that was generated when an Eventlink is created. Now I have realized that creating an Eventlink amounts to generating the markup for a link with the URL containing the event name. When you then send a request with this URL, Tapestry sees the event and looks for an appropriately named handler in the page/component.
I had just thought there was more to it.

As you say in your advice, I expected too much and am now using the method of generating an Eventlink request URL that I give to the tinyMCE editor so that the appropriate request is made at the expected time. I think that is the way to go.

I also thought that JavaScript events, HTML DOM events and Tapestry Component Events were the same before.

Regards,
Daniel P.

-----Ursprüngliche Nachricht-----
Von: Thiago H de Paula Figueiredo [mailto:[hidden email]]
Gesendet: Dienstag, 26. Mai 2015 20:58
An: Tapestry users
Betreff: Re: AW: AW: Adding JS to my component combined with using t:If

On Tue, 26 May 2015 11:49:20 -0300, Poggenpohl, Daniel <[hidden email]> wrote:

> Hi again,

Hi!

> Jquery can define arbitrary events that can be triggered. I thought I
> could raise a JS event and handle it via "onEVENTNAME" on the Tapestry
> component side. But of course that doesn't work, probably because no
> event handlers are generated because no corresponding eventlink is
> created.

Event handlers aren't generated at all by Tapestry. You declare them by using @OnEvent or using a naming convention. You just cannot trigger a JS event and expect it to magically trigger a server-side event.

Tapestry doesn't need an EventLink or ActionLink to be able to trigger an event handler method in the server-side. You can create your own events and their URLs by using ComponentResources.createEventLink(). With the URL generated by that method, you can invoke them using AJAX in JS.

--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer http://machina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

AW: AW: AW: Adding JS to my component combined with using t:If

Poggenpohl, Daniel
In reply to this post by Thiago H de Paula Figueiredo
Hello again,

I have generated the event urls and given them to my editor initialization script.
An excerpt:
setup : function(editor) {
        editor.addButton('testButton', {
                text: 'Test Button',
                icon: false,
                onclick: function() {
                        var sentData = {paragraphContent : tinymce.activeEditor.getContent()};
                        $.post(
                                jsonObject.saveUrl,
                                sentData,
                                function(data, status) {
                                        tinymce.remove(jsonObject.elemId);
                                }
                        );
                }
        });
}

When the user clicks the test button, an AJAX request containing the content of the editor is sent to the server. After receiving the response the editor should be removed from the DOM.

The handler side:
void onSaveWork(@RequestParameter(value="paragraphContent") final String paragraphContent) {
        showEditor = false;
        ajaxResponseRenderer.addRender(chapterContentZone);
}

To be simple at first, the event handler only sets showEditor and queues a render of the zone containing the editor. So the only thing that should be happening is that the div displaying the read-only content should reappear, which it doesn't.

I guess this is because the response isn't handled automatically and I have to replace a client-side DOM element with the "data" content of the response. Is it because I use a self-written javascript and don't rely fully on Tapestry here? Should I use some functions of tapestry.js?

Am I doing something wrong here or am I on the right track?

Regards,
Daniel P.

-----Ursprüngliche Nachricht-----
Von: Poggenpohl, Daniel
Gesendet: Mittwoch, 27. Mai 2015 09:02
An: Tapestry users
Betreff: AW: AW: AW: Adding JS to my component combined with using t:If

Hi,

thank you for helping me. Again I had wording issues, it seems.
I did know that event handling methods on Tapestry pages and components are written manually.
I just wrote "event handlers" because I thought there was something in between the handler methods and the Eventlinks that was generated when an Eventlink is created. Now I have realized that creating an Eventlink amounts to generating the markup for a link with the URL containing the event name. When you then send a request with this URL, Tapestry sees the event and looks for an appropriately named handler in the page/component.
I had just thought there was more to it.

As you say in your advice, I expected too much and am now using the method of generating an Eventlink request URL that I give to the tinyMCE editor so that the appropriate request is made at the expected time. I think that is the way to go.

I also thought that JavaScript events, HTML DOM events and Tapestry Component Events were the same before.

Regards,
Daniel P.

-----Ursprüngliche Nachricht-----
Von: Thiago H de Paula Figueiredo [mailto:[hidden email]]
Gesendet: Dienstag, 26. Mai 2015 20:58
An: Tapestry users
Betreff: Re: AW: AW: Adding JS to my component combined with using t:If

On Tue, 26 May 2015 11:49:20 -0300, Poggenpohl, Daniel <[hidden email]> wrote:

> Hi again,

Hi!

> Jquery can define arbitrary events that can be triggered. I thought I
> could raise a JS event and handle it via "onEVENTNAME" on the Tapestry
> component side. But of course that doesn't work, probably because no
> event handlers are generated because no corresponding eventlink is
> created.

Event handlers aren't generated at all by Tapestry. You declare them by using @OnEvent or using a naming convention. You just cannot trigger a JS event and expect it to magically trigger a server-side event.

Tapestry doesn't need an EventLink or ActionLink to be able to trigger an event handler method in the server-side. You can create your own events and their URLs by using ComponentResources.createEventLink(). With the URL generated by that method, you can invoke them using AJAX in JS.

--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer http://machina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

Re: AW: AW: Adding JS to my component combined with using t:If

Chris Poulsen
take a look at the ajax.js module and see if you can use that instead of
generating your own $.post

On Wed, May 27, 2015 at 10:45 AM, Poggenpohl, Daniel <
[hidden email]> wrote:

> Hello again,
>
> I have generated the event urls and given them to my editor initialization
> script.
> An excerpt:
> setup   : function(editor) {
>         editor.addButton('testButton', {
>                 text: 'Test Button',
>                 icon: false,
>                 onclick: function() {
>                         var sentData = {paragraphContent :
> tinymce.activeEditor.getContent()};
>                         $.post(
>                                 jsonObject.saveUrl,
>                                 sentData,
>                                 function(data, status) {
>                                         tinymce.remove(jsonObject.elemId);
>                                 }
>                         );
>                 }
>         });
> }
>
> When the user clicks the test button, an AJAX request containing the
> content of the editor is sent to the server. After receiving the response
> the editor should be removed from the DOM.
>
> The handler side:
> void onSaveWork(@RequestParameter(value="paragraphContent") final String
> paragraphContent) {
>         showEditor = false;
>         ajaxResponseRenderer.addRender(chapterContentZone);
> }
>
> To be simple at first, the event handler only sets showEditor and queues a
> render of the zone containing the editor. So the only thing that should be
> happening is that the div displaying the read-only content should reappear,
> which it doesn't.
>
> I guess this is because the response isn't handled automatically and I
> have to replace a client-side DOM element with the "data" content of the
> response. Is it because I use a self-written javascript and don't rely
> fully on Tapestry here? Should I use some functions of tapestry.js?
>
> Am I doing something wrong here or am I on the right track?
>
> Regards,
> Daniel P.
>
> -----Ursprüngliche Nachricht-----
> Von: Poggenpohl, Daniel
> Gesendet: Mittwoch, 27. Mai 2015 09:02
> An: Tapestry users
> Betreff: AW: AW: AW: Adding JS to my component combined with using t:If
>
> Hi,
>
> thank you for helping me. Again I had wording issues, it seems.
> I did know that event handling methods on Tapestry pages and components
> are written manually.
> I just wrote "event handlers" because I thought there was something in
> between the handler methods and the Eventlinks that was generated when an
> Eventlink is created. Now I have realized that creating an Eventlink
> amounts to generating the markup for a link with the URL containing the
> event name. When you then send a request with this URL, Tapestry sees the
> event and looks for an appropriately named handler in the page/component.
> I had just thought there was more to it.
>
> As you say in your advice, I expected too much and am now using the method
> of generating an Eventlink request URL that I give to the tinyMCE editor so
> that the appropriate request is made at the expected time. I think that is
> the way to go.
>
> I also thought that JavaScript events, HTML DOM events and Tapestry
> Component Events were the same before.
>
> Regards,
> Daniel P.
>
> -----Ursprüngliche Nachricht-----
> Von: Thiago H de Paula Figueiredo [mailto:[hidden email]]
> Gesendet: Dienstag, 26. Mai 2015 20:58
> An: Tapestry users
> Betreff: Re: AW: AW: Adding JS to my component combined with using t:If
>
> On Tue, 26 May 2015 11:49:20 -0300, Poggenpohl, Daniel <
> [hidden email]> wrote:
>
> > Hi again,
>
> Hi!
>
> > Jquery can define arbitrary events that can be triggered. I thought I
> > could raise a JS event and handle it via "onEVENTNAME" on the Tapestry
> > component side. But of course that doesn't work, probably because no
> > event handlers are generated because no corresponding eventlink is
> > created.
>
> Event handlers aren't generated at all by Tapestry. You declare them by
> using @OnEvent or using a naming convention. You just cannot trigger a JS
> event and expect it to magically trigger a server-side event.
>
> Tapestry doesn't need an EventLink or ActionLink to be able to trigger an
> event handler method in the server-side. You can create your own events and
> their URLs by using ComponentResources.createEventLink(). With the URL
> generated by that method, you can invoke them using AJAX in JS.
>
> --
> Thiago H. de Paula Figueiredo
> Tapestry, Java and Hibernate consultant and developer
> http://machina.com.br
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Reply | Threaded
Open this post in threaded view
|

AW: AW: AW: Adding JS to my component combined with using t:If

Poggenpohl, Daniel
Hello,

I am a certified newcomer to all of this.
Searching on google for ajax.js gives me multiple results which all look like different libraries. Does Tapestry provide an ajax.js library? Does JQuery provide an ajax.js library? What other ajax.js library should I use to generate my POST? Is the POST request I generated buggy? How would using the other library help me?

Regards,
Daniel P.

-----Ursprüngliche Nachricht-----
Von: Chris Poulsen [mailto:[hidden email]]
Gesendet: Mittwoch, 27. Mai 2015 11:19
An: Tapestry users
Betreff: Re: AW: AW: Adding JS to my component combined with using t:If

take a look at the ajax.js module and see if you can use that instead of generating your own $.post

On Wed, May 27, 2015 at 10:45 AM, Poggenpohl, Daniel < [hidden email]> wrote:

> Hello again,
>
> I have generated the event urls and given them to my editor
> initialization script.
> An excerpt:
> setup   : function(editor) {
>         editor.addButton('testButton', {
>                 text: 'Test Button',
>                 icon: false,
>                 onclick: function() {
>                         var sentData = {paragraphContent :
> tinymce.activeEditor.getContent()};
>                         $.post(
>                                 jsonObject.saveUrl,
>                                 sentData,
>                                 function(data, status) {
>                                         tinymce.remove(jsonObject.elemId);
>                                 }
>                         );
>                 }
>         });
> }
>
> When the user clicks the test button, an AJAX request containing the
> content of the editor is sent to the server. After receiving the
> response the editor should be removed from the DOM.
>
> The handler side:
> void onSaveWork(@RequestParameter(value="paragraphContent") final
> String
> paragraphContent) {
>         showEditor = false;
>         ajaxResponseRenderer.addRender(chapterContentZone);
> }
>
> To be simple at first, the event handler only sets showEditor and
> queues a render of the zone containing the editor. So the only thing
> that should be happening is that the div displaying the read-only
> content should reappear, which it doesn't.
>
> I guess this is because the response isn't handled automatically and I
> have to replace a client-side DOM element with the "data" content of
> the response. Is it because I use a self-written javascript and don't
> rely fully on Tapestry here? Should I use some functions of tapestry.js?
>
> Am I doing something wrong here or am I on the right track?
>
> Regards,
> Daniel P.
>
> -----Ursprüngliche Nachricht-----
> Von: Poggenpohl, Daniel
> Gesendet: Mittwoch, 27. Mai 2015 09:02
> An: Tapestry users
> Betreff: AW: AW: AW: Adding JS to my component combined with using
> t:If
>
> Hi,
>
> thank you for helping me. Again I had wording issues, it seems.
> I did know that event handling methods on Tapestry pages and
> components are written manually.
> I just wrote "event handlers" because I thought there was something in
> between the handler methods and the Eventlinks that was generated when
> an Eventlink is created. Now I have realized that creating an
> Eventlink amounts to generating the markup for a link with the URL
> containing the event name. When you then send a request with this URL,
> Tapestry sees the event and looks for an appropriately named handler in the page/component.
> I had just thought there was more to it.
>
> As you say in your advice, I expected too much and am now using the
> method of generating an Eventlink request URL that I give to the
> tinyMCE editor so that the appropriate request is made at the expected
> time. I think that is the way to go.
>
> I also thought that JavaScript events, HTML DOM events and Tapestry
> Component Events were the same before.
>
> Regards,
> Daniel P.
>
> -----Ursprüngliche Nachricht-----
> Von: Thiago H de Paula Figueiredo [mailto:[hidden email]]
> Gesendet: Dienstag, 26. Mai 2015 20:58
> An: Tapestry users
> Betreff: Re: AW: AW: Adding JS to my component combined with using
> t:If
>
> On Tue, 26 May 2015 11:49:20 -0300, Poggenpohl, Daniel <
> [hidden email]> wrote:
>
> > Hi again,
>
> Hi!
>
> > Jquery can define arbitrary events that can be triggered. I thought
> > I could raise a JS event and handle it via "onEVENTNAME" on the
> > Tapestry component side. But of course that doesn't work, probably
> > because no event handlers are generated because no corresponding
> > eventlink is created.
>
> Event handlers aren't generated at all by Tapestry. You declare them
> by using @OnEvent or using a naming convention. You just cannot
> trigger a JS event and expect it to magically trigger a server-side event.
>
> Tapestry doesn't need an EventLink or ActionLink to be able to trigger
> an event handler method in the server-side. You can create your own
> events and their URLs by using ComponentResources.createEventLink().
> With the URL generated by that method, you can invoke them using AJAX in JS.
>
> --
> Thiago H. de Paula Figueiredo
> Tapestry, Java and Hibernate consultant and developer
> http://machina.com.br
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

Re: AW: AW: Adding JS to my component combined with using t:If

Chris Poulsen
It is the tapestry module I'm referring to.

It is located in the sources as coffeescript:
tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/ajax.coffee

or in the tapestry-core.jar ( META-INF/modules/t5/core/ajax.js )

The generated documentation for the module is here:
http://tapestry.apache.org/5.4/coffeescript/ajax.html

The sources are the best place to go if you want to know how the stuff is
put together beneath the covers.

On Wed, May 27, 2015 at 11:25 AM, Poggenpohl, Daniel <
[hidden email]> wrote:

> Hello,
>
> I am a certified newcomer to all of this.
> Searching on google for ajax.js gives me multiple results which all look
> like different libraries. Does Tapestry provide an ajax.js library? Does
> JQuery provide an ajax.js library? What other ajax.js library should I use
> to generate my POST? Is the POST request I generated buggy? How would using
> the other library help me?
>
> Regards,
> Daniel P.
>
> -----Ursprüngliche Nachricht-----
> Von: Chris Poulsen [mailto:[hidden email]]
> Gesendet: Mittwoch, 27. Mai 2015 11:19
> An: Tapestry users
> Betreff: Re: AW: AW: Adding JS to my component combined with using t:If
>
> take a look at the ajax.js module and see if you can use that instead of
> generating your own $.post
>
> On Wed, May 27, 2015 at 10:45 AM, Poggenpohl, Daniel <
> [hidden email]> wrote:
>
> > Hello again,
> >
> > I have generated the event urls and given them to my editor
> > initialization script.
> > An excerpt:
> > setup   : function(editor) {
> >         editor.addButton('testButton', {
> >                 text: 'Test Button',
> >                 icon: false,
> >                 onclick: function() {
> >                         var sentData = {paragraphContent :
> > tinymce.activeEditor.getContent()};
> >                         $.post(
> >                                 jsonObject.saveUrl,
> >                                 sentData,
> >                                 function(data, status) {
> >
>  tinymce.remove(jsonObject.elemId);
> >                                 }
> >                         );
> >                 }
> >         });
> > }
> >
> > When the user clicks the test button, an AJAX request containing the
> > content of the editor is sent to the server. After receiving the
> > response the editor should be removed from the DOM.
> >
> > The handler side:
> > void onSaveWork(@RequestParameter(value="paragraphContent") final
> > String
> > paragraphContent) {
> >         showEditor = false;
> >         ajaxResponseRenderer.addRender(chapterContentZone);
> > }
> >
> > To be simple at first, the event handler only sets showEditor and
> > queues a render of the zone containing the editor. So the only thing
> > that should be happening is that the div displaying the read-only
> > content should reappear, which it doesn't.
> >
> > I guess this is because the response isn't handled automatically and I
> > have to replace a client-side DOM element with the "data" content of
> > the response. Is it because I use a self-written javascript and don't
> > rely fully on Tapestry here? Should I use some functions of tapestry.js?
> >
> > Am I doing something wrong here or am I on the right track?
> >
> > Regards,
> > Daniel P.
> >
> > -----Ursprüngliche Nachricht-----
> > Von: Poggenpohl, Daniel
> > Gesendet: Mittwoch, 27. Mai 2015 09:02
> > An: Tapestry users
> > Betreff: AW: AW: AW: Adding JS to my component combined with using
> > t:If
> >
> > Hi,
> >
> > thank you for helping me. Again I had wording issues, it seems.
> > I did know that event handling methods on Tapestry pages and
> > components are written manually.
> > I just wrote "event handlers" because I thought there was something in
> > between the handler methods and the Eventlinks that was generated when
> > an Eventlink is created. Now I have realized that creating an
> > Eventlink amounts to generating the markup for a link with the URL
> > containing the event name. When you then send a request with this URL,
> > Tapestry sees the event and looks for an appropriately named handler in
> the page/component.
> > I had just thought there was more to it.
> >
> > As you say in your advice, I expected too much and am now using the
> > method of generating an Eventlink request URL that I give to the
> > tinyMCE editor so that the appropriate request is made at the expected
> > time. I think that is the way to go.
> >
> > I also thought that JavaScript events, HTML DOM events and Tapestry
> > Component Events were the same before.
> >
> > Regards,
> > Daniel P.
> >
> > -----Ursprüngliche Nachricht-----
> > Von: Thiago H de Paula Figueiredo [mailto:[hidden email]]
> > Gesendet: Dienstag, 26. Mai 2015 20:58
> > An: Tapestry users
> > Betreff: Re: AW: AW: Adding JS to my component combined with using
> > t:If
> >
> > On Tue, 26 May 2015 11:49:20 -0300, Poggenpohl, Daniel <
> > [hidden email]> wrote:
> >
> > > Hi again,
> >
> > Hi!
> >
> > > Jquery can define arbitrary events that can be triggered. I thought
> > > I could raise a JS event and handle it via "onEVENTNAME" on the
> > > Tapestry component side. But of course that doesn't work, probably
> > > because no event handlers are generated because no corresponding
> > > eventlink is created.
> >
> > Event handlers aren't generated at all by Tapestry. You declare them
> > by using @OnEvent or using a naming convention. You just cannot
> > trigger a JS event and expect it to magically trigger a server-side
> event.
> >
> > Tapestry doesn't need an EventLink or ActionLink to be able to trigger
> > an event handler method in the server-side. You can create your own
> > events and their URLs by using ComponentResources.createEventLink().
> > With the URL generated by that method, you can invoke them using AJAX in
> JS.
> >
> > --
> > Thiago H. de Paula Figueiredo
> > Tapestry, Java and Hibernate consultant and developer
> > http://machina.com.br
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: [hidden email]
> > For additional commands, e-mail: [hidden email]
> >
> >
>
Reply | Threaded
Open this post in threaded view
|

Re: AW: AW: Adding JS to my component combined with using t:If

nquirynen
I think he is not using 5.4 but 5.3.8.

The problem is that your ajax call does not process the repsonse (zones
to update, scripts to run, ...).

What I have done is adding the following to the success callback function:

function(r) {
                     // update zones and call added javascript
                     if (r.zones) {
                         // perform multi zone update
                         $.each(r.zones, function(zoneId) {
                             $('#' +
zoneId).tapestryZone("applyContentUpdate", r.zones[zoneId]);
                         });
                     }

                     if (r.updateZone) {
                         var spec = {
                             url : r.updateZone.url,
                             params : r.updateZone.params
                         };
                         $('#' +
r.updateZone.zoneId).tapestryZone("update", spec);
                     }
                     $.tapestry.utils.loadScriptsInReply(r);
}


This works for me, but I'm also very interested in a better way than
what I have done above as this seems like a hassle to add it everywhere...

Greetings,
Nathan


On 27/05/15 11:29, Chris Poulsen wrote:

> It is the tapestry module I'm referring to.
>
> It is located in the sources as coffeescript:
> tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/ajax.coffee
>
> or in the tapestry-core.jar ( META-INF/modules/t5/core/ajax.js )
>
> The generated documentation for the module is here:
> http://tapestry.apache.org/5.4/coffeescript/ajax.html
>
> The sources are the best place to go if you want to know how the stuff is
> put together beneath the covers.
>
> On Wed, May 27, 2015 at 11:25 AM, Poggenpohl, Daniel <
> [hidden email]> wrote:
>
>> Hello,
>>
>> I am a certified newcomer to all of this.
>> Searching on google for ajax.js gives me multiple results which all look
>> like different libraries. Does Tapestry provide an ajax.js library? Does
>> JQuery provide an ajax.js library? What other ajax.js library should I use
>> to generate my POST? Is the POST request I generated buggy? How would using
>> the other library help me?
>>
>> Regards,
>> Daniel P.
>>
>> -----Ursprüngliche Nachricht-----
>> Von: Chris Poulsen [mailto:[hidden email]]
>> Gesendet: Mittwoch, 27. Mai 2015 11:19
>> An: Tapestry users
>> Betreff: Re: AW: AW: Adding JS to my component combined with using t:If
>>
>> take a look at the ajax.js module and see if you can use that instead of
>> generating your own $.post
>>
>> On Wed, May 27, 2015 at 10:45 AM, Poggenpohl, Daniel <
>> [hidden email]> wrote:
>>
>>> Hello again,
>>>
>>> I have generated the event urls and given them to my editor
>>> initialization script.
>>> An excerpt:
>>> setup   : function(editor) {
>>>          editor.addButton('testButton', {
>>>                  text: 'Test Button',
>>>                  icon: false,
>>>                  onclick: function() {
>>>                          var sentData = {paragraphContent :
>>> tinymce.activeEditor.getContent()};
>>>                          $.post(
>>>                                  jsonObject.saveUrl,
>>>                                  sentData,
>>>                                  function(data, status) {
>>>
>>   tinymce.remove(jsonObject.elemId);
>>>                                  }
>>>                          );
>>>                  }
>>>          });
>>> }
>>>
>>> When the user clicks the test button, an AJAX request containing the
>>> content of the editor is sent to the server. After receiving the
>>> response the editor should be removed from the DOM.
>>>
>>> The handler side:
>>> void onSaveWork(@RequestParameter(value="paragraphContent") final
>>> String
>>> paragraphContent) {
>>>          showEditor = false;
>>>          ajaxResponseRenderer.addRender(chapterContentZone);
>>> }
>>>
>>> To be simple at first, the event handler only sets showEditor and
>>> queues a render of the zone containing the editor. So the only thing
>>> that should be happening is that the div displaying the read-only
>>> content should reappear, which it doesn't.
>>>
>>> I guess this is because the response isn't handled automatically and I
>>> have to replace a client-side DOM element with the "data" content of
>>> the response. Is it because I use a self-written javascript and don't
>>> rely fully on Tapestry here? Should I use some functions of tapestry.js?
>>>
>>> Am I doing something wrong here or am I on the right track?
>>>
>>> Regards,
>>> Daniel P.
>>>
>>> -----Ursprüngliche Nachricht-----
>>> Von: Poggenpohl, Daniel
>>> Gesendet: Mittwoch, 27. Mai 2015 09:02
>>> An: Tapestry users
>>> Betreff: AW: AW: AW: Adding JS to my component combined with using
>>> t:If
>>>
>>> Hi,
>>>
>>> thank you for helping me. Again I had wording issues, it seems.
>>> I did know that event handling methods on Tapestry pages and
>>> components are written manually.
>>> I just wrote "event handlers" because I thought there was something in
>>> between the handler methods and the Eventlinks that was generated when
>>> an Eventlink is created. Now I have realized that creating an
>>> Eventlink amounts to generating the markup for a link with the URL
>>> containing the event name. When you then send a request with this URL,
>>> Tapestry sees the event and looks for an appropriately named handler in
>> the page/component.
>>> I had just thought there was more to it.
>>>
>>> As you say in your advice, I expected too much and am now using the
>>> method of generating an Eventlink request URL that I give to the
>>> tinyMCE editor so that the appropriate request is made at the expected
>>> time. I think that is the way to go.
>>>
>>> I also thought that JavaScript events, HTML DOM events and Tapestry
>>> Component Events were the same before.
>>>
>>> Regards,
>>> Daniel P.
>>>
>>> -----Ursprüngliche Nachricht-----
>>> Von: Thiago H de Paula Figueiredo [mailto:[hidden email]]
>>> Gesendet: Dienstag, 26. Mai 2015 20:58
>>> An: Tapestry users
>>> Betreff: Re: AW: AW: Adding JS to my component combined with using
>>> t:If
>>>
>>> On Tue, 26 May 2015 11:49:20 -0300, Poggenpohl, Daniel <
>>> [hidden email]> wrote:
>>>
>>>> Hi again,
>>> Hi!
>>>
>>>> Jquery can define arbitrary events that can be triggered. I thought
>>>> I could raise a JS event and handle it via "onEVENTNAME" on the
>>>> Tapestry component side. But of course that doesn't work, probably
>>>> because no event handlers are generated because no corresponding
>>>> eventlink is created.
>>> Event handlers aren't generated at all by Tapestry. You declare them
>>> by using @OnEvent or using a naming convention. You just cannot
>>> trigger a JS event and expect it to magically trigger a server-side
>> event.
>>> Tapestry doesn't need an EventLink or ActionLink to be able to trigger
>>> an event handler method in the server-side. You can create your own
>>> events and their URLs by using ComponentResources.createEventLink().
>>> With the URL generated by that method, you can invoke them using AJAX in
>> JS.
>>> --
>>> Thiago H. de Paula Figueiredo
>>> Tapestry, Java and Hibernate consultant and developer
>>> http://machina.com.br
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: [hidden email]
>>> For additional commands, e-mail: [hidden email]
>>>
>>>



---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

AW: AW: AW: Adding JS to my component combined with using t:If

Poggenpohl, Daniel
Hello again,

exactly, I'm using Tapestry 5.3.8 and tapestry-jquery. Is there any js function here that I can use to automatically process zone ajax updates?

Regards,
Daniel P.

-----Ursprüngliche Nachricht-----
Von: Nathan Quirynen [mailto:[hidden email]]
Gesendet: Mittwoch, 27. Mai 2015 11:38
An: [hidden email]
Betreff: Re: AW: AW: Adding JS to my component combined with using t:If

I think he is not using 5.4 but 5.3.8.

The problem is that your ajax call does not process the repsonse (zones to update, scripts to run, ...).

What I have done is adding the following to the success callback function:

function(r) {
                     // update zones and call added javascript
                     if (r.zones) {
                         // perform multi zone update
                         $.each(r.zones, function(zoneId) {
                             $('#' +
zoneId).tapestryZone("applyContentUpdate", r.zones[zoneId]);
                         });
                     }

                     if (r.updateZone) {
                         var spec = {
                             url : r.updateZone.url,
                             params : r.updateZone.params
                         };
                         $('#' +
r.updateZone.zoneId).tapestryZone("update", spec);
                     }
                     $.tapestry.utils.loadScriptsInReply(r);
}


This works for me, but I'm also very interested in a better way than
what I have done above as this seems like a hassle to add it everywhere...

Greetings,
Nathan


On 27/05/15 11:29, Chris Poulsen wrote:

> It is the tapestry module I'm referring to.
>
> It is located in the sources as coffeescript:
> tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/ajax.coffee
>
> or in the tapestry-core.jar ( META-INF/modules/t5/core/ajax.js )
>
> The generated documentation for the module is here:
> http://tapestry.apache.org/5.4/coffeescript/ajax.html
>
> The sources are the best place to go if you want to know how the stuff is
> put together beneath the covers.
>
> On Wed, May 27, 2015 at 11:25 AM, Poggenpohl, Daniel <
> [hidden email]> wrote:
>
>> Hello,
>>
>> I am a certified newcomer to all of this.
>> Searching on google for ajax.js gives me multiple results which all look
>> like different libraries. Does Tapestry provide an ajax.js library? Does
>> JQuery provide an ajax.js library? What other ajax.js library should I use
>> to generate my POST? Is the POST request I generated buggy? How would using
>> the other library help me?
>>
>> Regards,
>> Daniel P.
>>
>> -----Ursprüngliche Nachricht-----
>> Von: Chris Poulsen [mailto:[hidden email]]
>> Gesendet: Mittwoch, 27. Mai 2015 11:19
>> An: Tapestry users
>> Betreff: Re: AW: AW: Adding JS to my component combined with using t:If
>>
>> take a look at the ajax.js module and see if you can use that instead of
>> generating your own $.post
>>
>> On Wed, May 27, 2015 at 10:45 AM, Poggenpohl, Daniel <
>> [hidden email]> wrote:
>>
>>> Hello again,
>>>
>>> I have generated the event urls and given them to my editor
>>> initialization script.
>>> An excerpt:
>>> setup   : function(editor) {
>>>          editor.addButton('testButton', {
>>>                  text: 'Test Button',
>>>                  icon: false,
>>>                  onclick: function() {
>>>                          var sentData = {paragraphContent :
>>> tinymce.activeEditor.getContent()};
>>>                          $.post(
>>>                                  jsonObject.saveUrl,
>>>                                  sentData,
>>>                                  function(data, status) {
>>>
>>   tinymce.remove(jsonObject.elemId);
>>>                                  }
>>>                          );
>>>                  }
>>>          });
>>> }
>>>
>>> When the user clicks the test button, an AJAX request containing the
>>> content of the editor is sent to the server. After receiving the
>>> response the editor should be removed from the DOM.
>>>
>>> The handler side:
>>> void onSaveWork(@RequestParameter(value="paragraphContent") final
>>> String
>>> paragraphContent) {
>>>          showEditor = false;
>>>          ajaxResponseRenderer.addRender(chapterContentZone);
>>> }
>>>
>>> To be simple at first, the event handler only sets showEditor and
>>> queues a render of the zone containing the editor. So the only thing
>>> that should be happening is that the div displaying the read-only
>>> content should reappear, which it doesn't.
>>>
>>> I guess this is because the response isn't handled automatically and I
>>> have to replace a client-side DOM element with the "data" content of
>>> the response. Is it because I use a self-written javascript and don't
>>> rely fully on Tapestry here? Should I use some functions of tapestry.js?
>>>
>>> Am I doing something wrong here or am I on the right track?
>>>
>>> Regards,
>>> Daniel P.
>>>
>>> -----Ursprüngliche Nachricht-----
>>> Von: Poggenpohl, Daniel
>>> Gesendet: Mittwoch, 27. Mai 2015 09:02
>>> An: Tapestry users
>>> Betreff: AW: AW: AW: Adding JS to my component combined with using
>>> t:If
>>>
>>> Hi,
>>>
>>> thank you for helping me. Again I had wording issues, it seems.
>>> I did know that event handling methods on Tapestry pages and
>>> components are written manually.
>>> I just wrote "event handlers" because I thought there was something in
>>> between the handler methods and the Eventlinks that was generated when
>>> an Eventlink is created. Now I have realized that creating an
>>> Eventlink amounts to generating the markup for a link with the URL
>>> containing the event name. When you then send a request with this URL,
>>> Tapestry sees the event and looks for an appropriately named handler in
>> the page/component.
>>> I had just thought there was more to it.
>>>
>>> As you say in your advice, I expected too much and am now using the
>>> method of generating an Eventlink request URL that I give to the
>>> tinyMCE editor so that the appropriate request is made at the expected
>>> time. I think that is the way to go.
>>>
>>> I also thought that JavaScript events, HTML DOM events and Tapestry
>>> Component Events were the same before.
>>>
>>> Regards,
>>> Daniel P.
>>>
>>> -----Ursprüngliche Nachricht-----
>>> Von: Thiago H de Paula Figueiredo [mailto:[hidden email]]
>>> Gesendet: Dienstag, 26. Mai 2015 20:58
>>> An: Tapestry users
>>> Betreff: Re: AW: AW: Adding JS to my component combined with using
>>> t:If
>>>
>>> On Tue, 26 May 2015 11:49:20 -0300, Poggenpohl, Daniel <
>>> [hidden email]> wrote:
>>>
>>>> Hi again,
>>> Hi!
>>>
>>>> Jquery can define arbitrary events that can be triggered. I thought
>>>> I could raise a JS event and handle it via "onEVENTNAME" on the
>>>> Tapestry component side. But of course that doesn't work, probably
>>>> because no event handlers are generated because no corresponding
>>>> eventlink is created.
>>> Event handlers aren't generated at all by Tapestry. You declare them
>>> by using @OnEvent or using a naming convention. You just cannot
>>> trigger a JS event and expect it to magically trigger a server-side
>> event.
>>> Tapestry doesn't need an EventLink or ActionLink to be able to trigger
>>> an event handler method in the server-side. You can create your own
>>> events and their URLs by using ComponentResources.createEventLink().
>>> With the URL generated by that method, you can invoke them using AJAX in
>> JS.
>>> --
>>> Thiago H. de Paula Figueiredo
>>> Tapestry, Java and Hibernate consultant and developer
>>> http://machina.com.br
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: [hidden email]
>>> For additional commands, e-mail: [hidden email]
>>>
>>>



---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

Re: Adding JS to my component combined with using t:If

JumpStart
Have you considered adding a hidden AJAX-enabled Form to the page containing (1) a content TextField and (2) a Submit? On click of Test Button, make your JavaScript set the value of (1) to whatever is in the editor and do click() on (2).

Server-side, you’d provide all the usual event-handling for a form (eg. onValidateFromMyHiddenForm(), onSuccessFromMyHiddenForm(), etc.).

This way, I suspect it would become very easy to implement, read, and maintain.

In case it helps, here’s an example of an AJAX Form that isn’t hidden:

        http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/formmultiplezoneupdate

Geoff

> On 27 May 2015, at 8:11 pm, Poggenpohl, Daniel <[hidden email]> wrote:
>
> Hello again,
>
> exactly, I'm using Tapestry 5.3.8 and tapestry-jquery. Is there any js function here that I can use to automatically process zone ajax updates?
>
> Regards,
> Daniel P.
>
> -----Ursprüngliche Nachricht-----
> Von: Nathan Quirynen [mailto:[hidden email]]
> Gesendet: Mittwoch, 27. Mai 2015 11:38
> An: [hidden email]
> Betreff: Re: AW: AW: Adding JS to my component combined with using t:If
>
> I think he is not using 5.4 but 5.3.8.
>
> The problem is that your ajax call does not process the repsonse (zones to update, scripts to run, ...).
>
> What I have done is adding the following to the success callback function:
>
> function(r) {
>                     // update zones and call added javascript
>                     if (r.zones) {
>                         // perform multi zone update
>                         $.each(r.zones, function(zoneId) {
>                             $('#' +
> zoneId).tapestryZone("applyContentUpdate", r.zones[zoneId]);
>                         });
>                     }
>
>                     if (r.updateZone) {
>                         var spec = {
>                             url : r.updateZone.url,
>                             params : r.updateZone.params
>                         };
>                         $('#' +
> r.updateZone.zoneId).tapestryZone("update", spec);
>                     }
>                     $.tapestry.utils.loadScriptsInReply(r);
> }
>
>
> This works for me, but I'm also very interested in a better way than
> what I have done above as this seems like a hassle to add it everywhere...
>
> Greetings,
> Nathan
>
>
> On 27/05/15 11:29, Chris Poulsen wrote:
>> It is the tapestry module I'm referring to.
>>
>> It is located in the sources as coffeescript:
>> tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/ajax.coffee
>>
>> or in the tapestry-core.jar ( META-INF/modules/t5/core/ajax.js )
>>
>> The generated documentation for the module is here:
>> http://tapestry.apache.org/5.4/coffeescript/ajax.html
>>
>> The sources are the best place to go if you want to know how the stuff is
>> put together beneath the covers.
>>
>> On Wed, May 27, 2015 at 11:25 AM, Poggenpohl, Daniel <
>> [hidden email]> wrote:
>>
>>> Hello,
>>>
>>> I am a certified newcomer to all of this.
>>> Searching on google for ajax.js gives me multiple results which all look
>>> like different libraries. Does Tapestry provide an ajax.js library? Does
>>> JQuery provide an ajax.js library? What other ajax.js library should I use
>>> to generate my POST? Is the POST request I generated buggy? How would using
>>> the other library help me?
>>>
>>> Regards,
>>> Daniel P.
>>>
>>> -----Ursprüngliche Nachricht-----
>>> Von: Chris Poulsen [mailto:[hidden email]]
>>> Gesendet: Mittwoch, 27. Mai 2015 11:19
>>> An: Tapestry users
>>> Betreff: Re: AW: AW: Adding JS to my component combined with using t:If
>>>
>>> take a look at the ajax.js module and see if you can use that instead of
>>> generating your own $.post
>>>
>>> On Wed, May 27, 2015 at 10:45 AM, Poggenpohl, Daniel <
>>> [hidden email]> wrote:
>>>
>>>> Hello again,
>>>>
>>>> I have generated the event urls and given them to my editor
>>>> initialization script.
>>>> An excerpt:
>>>> setup   : function(editor) {
>>>>         editor.addButton('testButton', {
>>>>                 text: 'Test Button',
>>>>                 icon: false,
>>>>                 onclick: function() {
>>>>                         var sentData = {paragraphContent :
>>>> tinymce.activeEditor.getContent()};
>>>>                         $.post(
>>>>                                 jsonObject.saveUrl,
>>>>                                 sentData,
>>>>                                 function(data, status) {
>>>>
>>>  tinymce.remove(jsonObject.elemId);
>>>>                                 }
>>>>                         );
>>>>                 }
>>>>         });
>>>> }
>>>>
>>>> When the user clicks the test button, an AJAX request containing the
>>>> content of the editor is sent to the server. After receiving the
>>>> response the editor should be removed from the DOM.
>>>>
>>>> The handler side:
>>>> void onSaveWork(@RequestParameter(value="paragraphContent") final
>>>> String
>>>> paragraphContent) {
>>>>         showEditor = false;
>>>>         ajaxResponseRenderer.addRender(chapterContentZone);
>>>> }
>>>>
>>>> To be simple at first, the event handler only sets showEditor and
>>>> queues a render of the zone containing the editor. So the only thing
>>>> that should be happening is that the div displaying the read-only
>>>> content should reappear, which it doesn't.
>>>>
>>>> I guess this is because the response isn't handled automatically and I
>>>> have to replace a client-side DOM element with the "data" content of
>>>> the response. Is it because I use a self-written javascript and don't
>>>> rely fully on Tapestry here? Should I use some functions of tapestry.js?
>>>>
>>>> Am I doing something wrong here or am I on the right track?
>>>>
>>>> Regards,
>>>> Daniel P.
>>>>
>>>> -----Ursprüngliche Nachricht-----
>>>> Von: Poggenpohl, Daniel
>>>> Gesendet: Mittwoch, 27. Mai 2015 09:02
>>>> An: Tapestry users
>>>> Betreff: AW: AW: AW: Adding JS to my component combined with using
>>>> t:If
>>>>
>>>> Hi,
>>>>
>>>> thank you for helping me. Again I had wording issues, it seems.
>>>> I did know that event handling methods on Tapestry pages and
>>>> components are written manually.
>>>> I just wrote "event handlers" because I thought there was something in
>>>> between the handler methods and the Eventlinks that was generated when
>>>> an Eventlink is created. Now I have realized that creating an
>>>> Eventlink amounts to generating the markup for a link with the URL
>>>> containing the event name. When you then send a request with this URL,
>>>> Tapestry sees the event and looks for an appropriately named handler in
>>> the page/component.
>>>> I had just thought there was more to it.
>>>>
>>>> As you say in your advice, I expected too much and am now using the
>>>> method of generating an Eventlink request URL that I give to the
>>>> tinyMCE editor so that the appropriate request is made at the expected
>>>> time. I think that is the way to go.
>>>>
>>>> I also thought that JavaScript events, HTML DOM events and Tapestry
>>>> Component Events were the same before.
>>>>
>>>> Regards,
>>>> Daniel P.
>>>>
>>>> -----Ursprüngliche Nachricht-----
>>>> Von: Thiago H de Paula Figueiredo [mailto:[hidden email]]
>>>> Gesendet: Dienstag, 26. Mai 2015 20:58
>>>> An: Tapestry users
>>>> Betreff: Re: AW: AW: Adding JS to my component combined with using
>>>> t:If
>>>>
>>>> On Tue, 26 May 2015 11:49:20 -0300, Poggenpohl, Daniel <
>>>> [hidden email]> wrote:
>>>>
>>>>> Hi again,
>>>> Hi!
>>>>
>>>>> Jquery can define arbitrary events that can be triggered. I thought
>>>>> I could raise a JS event and handle it via "onEVENTNAME" on the
>>>>> Tapestry component side. But of course that doesn't work, probably
>>>>> because no event handlers are generated because no corresponding
>>>>> eventlink is created.
>>>> Event handlers aren't generated at all by Tapestry. You declare them
>>>> by using @OnEvent or using a naming convention. You just cannot
>>>> trigger a JS event and expect it to magically trigger a server-side
>>> event.
>>>> Tapestry doesn't need an EventLink or ActionLink to be able to trigger
>>>> an event handler method in the server-side. You can create your own
>>>> events and their URLs by using ComponentResources.createEventLink().
>>>> With the URL generated by that method, you can invoke them using AJAX in
>>> JS.
>>>> --
>>>> Thiago H. de Paula Figueiredo
>>>> Tapestry, Java and Hibernate consultant and developer
>>>> http://machina.com.br
>>>>
>>>> ---------------------------------------------------------------------
>>>> To unsubscribe, e-mail: [hidden email]
>>>> For additional commands, e-mail: [hidden email]
>>>>
>>>>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Adding JS to my component combined with using t:If

JumpStart
In reply to this post by Poggenpohl, Daniel
Have you considered adding a hidden AJAX-enabled Form to the page containing (1) a content TextField and (2) a Submit? On click of Test Button, make your JavaScript set the value of (1) to whatever is in the editor and do click() on (2).

Server-side, you’d provide all the usual event-handling for a form (eg. onValidateFromMyHiddenForm(), onSuccessFromMyHiddenForm(), etc.).

This way, I suspect it would become very easy to implement, read, and maintain.

In case it helps, here’s an example of an AJAX Form that isn’t hidden:

        http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/formmultiplezoneupdate

Geoff

> On 27 May 2015, at 8:11 pm, Poggenpohl, Daniel <[hidden email]> wrote:
>
> Hello again,
>
> exactly, I'm using Tapestry 5.3.8 and tapestry-jquery. Is there any js function here that I can use to automatically process zone ajax updates?
>
> Regards,
> Daniel P.
>
> -----Ursprüngliche Nachricht-----
> Von: Nathan Quirynen [mailto:[hidden email]]
> Gesendet: Mittwoch, 27. Mai 2015 11:38
> An: [hidden email]
> Betreff: Re: AW: AW: Adding JS to my component combined with using t:If
>
> I think he is not using 5.4 but 5.3.8.
>
> The problem is that your ajax call does not process the repsonse (zones to update, scripts to run, ...).
>
> What I have done is adding the following to the success callback function:
>
> function(r) {
>                    // update zones and call added javascript
>                    if (r.zones) {
>                        // perform multi zone update
>                        $.each(r.zones, function(zoneId) {
>                            $('#' +
> zoneId).tapestryZone("applyContentUpdate", r.zones[zoneId]);
>                        });
>                    }
>
>                    if (r.updateZone) {
>                        var spec = {
>                            url : r.updateZone.url,
>                            params : r.updateZone.params
>                        };
>                        $('#' +
> r.updateZone.zoneId).tapestryZone("update", spec);
>                    }
>                    $.tapestry.utils.loadScriptsInReply(r);
> }
>
>
> This works for me, but I'm also very interested in a better way than
> what I have done above as this seems like a hassle to add it everywhere...
>
> Greetings,
> Nathan
>
>
> On 27/05/15 11:29, Chris Poulsen wrote:
>> It is the tapestry module I'm referring to.
>>
>> It is located in the sources as coffeescript:
>> tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/ajax.coffee
>>
>> or in the tapestry-core.jar ( META-INF/modules/t5/core/ajax.js )
>>
>> The generated documentation for the module is here:
>> http://tapestry.apache.org/5.4/coffeescript/ajax.html
>>
>> The sources are the best place to go if you want to know how the stuff is
>> put together beneath the covers.
>>
>> On Wed, May 27, 2015 at 11:25 AM, Poggenpohl, Daniel <
>> [hidden email]> wrote:
>>
>>> Hello,
>>>
>>> I am a certified newcomer to all of this.
>>> Searching on google for ajax.js gives me multiple results which all look
>>> like different libraries. Does Tapestry provide an ajax.js library? Does
>>> JQuery provide an ajax.js library? What other ajax.js library should I use
>>> to generate my POST? Is the POST request I generated buggy? How would using
>>> the other library help me?
>>>
>>> Regards,
>>> Daniel P.
>>>
>>> -----Ursprüngliche Nachricht-----
>>> Von: Chris Poulsen [mailto:[hidden email]]
>>> Gesendet: Mittwoch, 27. Mai 2015 11:19
>>> An: Tapestry users
>>> Betreff: Re: AW: AW: Adding JS to my component combined with using t:If
>>>
>>> take a look at the ajax.js module and see if you can use that instead of
>>> generating your own $.post
>>>
>>> On Wed, May 27, 2015 at 10:45 AM, Poggenpohl, Daniel <
>>> [hidden email]> wrote:
>>>
>>>> Hello again,
>>>>
>>>> I have generated the event urls and given them to my editor
>>>> initialization script.
>>>> An excerpt:
>>>> setup   : function(editor) {
>>>>        editor.addButton('testButton', {
>>>>                text: 'Test Button',
>>>>                icon: false,
>>>>                onclick: function() {
>>>>                        var sentData = {paragraphContent :
>>>> tinymce.activeEditor.getContent()};
>>>>                        $.post(
>>>>                                jsonObject.saveUrl,
>>>>                                sentData,
>>>>                                function(data, status) {
>>>>
>>> tinymce.remove(jsonObject.elemId);
>>>>                                }
>>>>                        );
>>>>                }
>>>>        });
>>>> }
>>>>
>>>> When the user clicks the test button, an AJAX request containing the
>>>> content of the editor is sent to the server. After receiving the
>>>> response the editor should be removed from the DOM.
>>>>
>>>> The handler side:
>>>> void onSaveWork(@RequestParameter(value="paragraphContent") final
>>>> String
>>>> paragraphContent) {
>>>>        showEditor = false;
>>>>        ajaxResponseRenderer.addRender(chapterContentZone);
>>>> }
>>>>
>>>> To be simple at first, the event handler only sets showEditor and
>>>> queues a render of the zone containing the editor. So the only thing
>>>> that should be happening is that the div displaying the read-only
>>>> content should reappear, which it doesn't.
>>>>
>>>> I guess this is because the response isn't handled automatically and I
>>>> have to replace a client-side DOM element with the "data" content of
>>>> the response. Is it because I use a self-written javascript and don't
>>>> rely fully on Tapestry here? Should I use some functions of tapestry.js?
>>>>
>>>> Am I doing something wrong here or am I on the right track?
>>>>
>>>> Regards,
>>>> Daniel P.
>>>>
>>>> -----Ursprüngliche Nachricht-----
>>>> Von: Poggenpohl, Daniel
>>>> Gesendet: Mittwoch, 27. Mai 2015 09:02
>>>> An: Tapestry users
>>>> Betreff: AW: AW: AW: Adding JS to my component combined with using
>>>> t:If
>>>>
>>>> Hi,
>>>>
>>>> thank you for helping me. Again I had wording issues, it seems.
>>>> I did know that event handling methods on Tapestry pages and
>>>> components are written manually.
>>>> I just wrote "event handlers" because I thought there was something in
>>>> between the handler methods and the Eventlinks that was generated when
>>>> an Eventlink is created. Now I have realized that creating an
>>>> Eventlink amounts to generating the markup for a link with the URL
>>>> containing the event name. When you then send a request with this URL,
>>>> Tapestry sees the event and looks for an appropriately named handler in
>>> the page/component.
>>>> I had just thought there was more to it.
>>>>
>>>> As you say in your advice, I expected too much and am now using the
>>>> method of generating an Eventlink request URL that I give to the
>>>> tinyMCE editor so that the appropriate request is made at the expected
>>>> time. I think that is the way to go.
>>>>
>>>> I also thought that JavaScript events, HTML DOM events and Tapestry
>>>> Component Events were the same before.
>>>>
>>>> Regards,
>>>> Daniel P.
>>>>
>>>> -----Ursprüngliche Nachricht-----
>>>> Von: Thiago H de Paula Figueiredo [mailto:[hidden email]]
>>>> Gesendet: Dienstag, 26. Mai 2015 20:58
>>>> An: Tapestry users
>>>> Betreff: Re: AW: AW: Adding JS to my component combined with using
>>>> t:If
>>>>
>>>> On Tue, 26 May 2015 11:49:20 -0300, Poggenpohl, Daniel <
>>>> [hidden email]> wrote:
>>>>
>>>>> Hi again,
>>>> Hi!
>>>>
>>>>> Jquery can define arbitrary events that can be triggered. I thought
>>>>> I could raise a JS event and handle it via "onEVENTNAME" on the
>>>>> Tapestry component side. But of course that doesn't work, probably
>>>>> because no event handlers are generated because no corresponding
>>>>> eventlink is created.
>>>> Event handlers aren't generated at all by Tapestry. You declare them
>>>> by using @OnEvent or using a naming convention. You just cannot
>>>> trigger a JS event and expect it to magically trigger a server-side
>>> event.
>>>> Tapestry doesn't need an EventLink or ActionLink to be able to trigger
>>>> an event handler method in the server-side. You can create your own
>>>> events and their URLs by using ComponentResources.createEventLink().
>>>> With the URL generated by that method, you can invoke them using AJAX in
>>> JS.
>>>> --
>>>> Thiago H. de Paula Figueiredo
>>>> Tapestry, Java and Hibernate consultant and developer
>>>> http://machina.com.br
>>>>
>>>> ---------------------------------------------------------------------
>>>> To unsubscribe, e-mail: [hidden email]
>>>> For additional commands, e-mail: [hidden email]
>>>>
>>>>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: AW: AW: Adding JS to my component combined with using t:If

Thiago H de Paula Figueiredo
In reply to this post by nquirynen
For 5.3.8, you should use ZoneManager to update zones, as that's the JS  
class which has all the wiring. You just cannot make an AJAX call directly  
and expect the zone to update itself. There's one nice example of how to  
do it in https://issues.apache.org/jira/browse/TAP5-569.

// where zoneId contains the HTML id of the zone you want to update
var zoneManager = Tapestry.findZoneManagerByZoneId( zoneId );
if ( zoneManager != null ) {
   zoneManager.updateFromURL( url );  // where url contains the event URL.
}


--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

AW: AW: AW: Adding JS to my component combined with using t:If

Poggenpohl, Daniel
Hello,

I use JQuery, so the below advice sadly doesn't apply. I checked, when I add the JQuery dependency, the findZoneManager method is gone. Tapestry-jquery wants me to use tapestryZone("update",...).
With no further real documentation outside of the source code...

So, to recap, in my opinion I need at least two things as parameters for my js function initializing the editor:
- the zone client id
- the url to request when the editor button is clicked

My js function needs to do the following:
1) when the custom button is clicked, the editor must be closed so that the original textarea receives the new value
2) the contents of the client side textarea must be transported to the server side
3) the server side saves the contents in the database
4) the server side sets the switch showEditor=false so that the div containing the read-only contents is shown
5) the client side zone must be updated

1) the function does editor.remove("#textAreaClientId"), which seems to do the above
2) and 3) I am trying to do via the JQuery bind mixin, but I can't seem to get the client side textarea content to the server
4) can be done in the component event
5) should probably be done via $("#zoneClientId").tapestryZone("update") and not via the component event, or should it?

Any ideas? Should I post more code?

Regards,
Daniel P.
______________________________________
Von: Thiago H de Paula Figueiredo [[hidden email]]
Gesendet: Mittwoch, 27. Mai 2015 20:31
An: Tapestry users
Betreff: Re: AW: AW: Adding JS to my component combined with using t:If

For 5.3.8, you should use ZoneManager to update zones, as that's the JS
class which has all the wiring. You just cannot make an AJAX call directly
and expect the zone to update itself. There's one nice example of how to
do it in https://issues.apache.org/jira/browse/TAP5-569.

// where zoneId contains the HTML id of the zone you want to update
var zoneManager = Tapestry.findZoneManagerByZoneId( zoneId );
if ( zoneManager != null ) {
   zoneManager.updateFromURL( url );  // where url contains the event URL.
}


--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]