You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by "Jochimsen, Janko" <ja...@urios-beratung.de> on 2016/07/21 15:35:53 UTC

Problem sending data from a JS Element back to Tapestry

Hello Everybody,
I do have a problem with the communication between tapestry and java Script or to be more precise a JQuery Script.
As a background Information I am using JQPlot Graphs that work quiet good and I can start them from tapestry without problems.
Now I would like to increase the interaction of these elements by sending mouse clicks back to the tapestry system for further use.
In order to call the plot I use

public void afterRender() {
            Link link = resources.createEventLink("Call2", spec);
            String uri = link.toAbsoluteURI();
            String output = "Call JS with Parameter:[" + uri + "]";
            logger.info(" OUTPUT: " + output);
            javaScriptSupport.require("myBarRender").with(uri, spec);

      }

Where Call2 looks like this:
public void onCall2(EventContext eventContext) {
            if (eventContext != null) {

                  JSONObject value = null;

                  StringBuffer sb = new StringBuffer();
                  CaptureResultCallback<String> callback = new CaptureResultCallback<String>();
                  resources.triggerEvent(EventConstants.REFRESH, new JSONObject[] { value }, callback);

                  if (callback.getResult() != null) {
                        Object obj = callback.getResult();
                        sb.append(" CALLBACK = " + obj.toString() + "..");
                  } else {
                        sb.append(" CALLBACK = NULL ");
                  }
                  String[] data = eventContext.toStrings();

                  if (data.length > 0) {
                        for (int i = 0; i < data.length; i++) {
                              sb.append("data[" + i + "] =" + data);
                              String s = data[i];
                              if (s != null) {
                                   sb.append("content=" + s);
                              }
                        }
                  } else {
                        sb.append("NO DATA");
                  }
                  logger.info("Got Called from JS with data " + sb.toString());
            } else {
                  logger.info("Got Called from JS with data == null");
            }
      }

On the JavaScript-Side the code looks like this

define([ "jquery" ], function($) {

      return function(callbackuri, context) {
            var s1 = [ 2, 6, 7, 10 ];
            var s2 = [ 7, 5, 3, 2 ];
            var s3 = [ 14, 9, 3, 8 ];
            var callback = callbackuri;

            plot3 = $.jqplot('chart3', [ s1, s2, s3 ], {
                  stackSeries : true,
                  captureRightClick : true,
                  seriesDefaults : {
                        renderer : $.jqplot.BarRenderer,
                        rendererOptions : {
                              highlightMouseDown : true
                        },
                        pointLabels : {
                              show : true
                        }
                  }
            });
            $('#chart3').bind(
                        'jqplotDataRightClick',
                        function(ev, seriesIndex, pointIndex, data) {
                              console.log("try to reach callback");
                              //
                              $.ajax(callback, {
                                   dataType : 'json',
                                   type : 'post',
                                   contentType : 'application/json',
                                   data : JSON.stringify({
                                         'action' : 'follow',
                                         'userid' : '11239528343'
                                   }),
                                   success : function(data) {
                                         console.log("Reached Server got back ");
                                   }
//                            $.post(callback, $(this).serialize(),
//                            function(data, textStatus, jQxhr) {
//                                 console.log("Reached Server got back ");
//                                 $('#response pre').html(data);
//
//                            }, 'text').fail(
//                            function(jqXhr, textStatus, errorThrown) {
//                                 console.log(errorThrown);
//                            });
//
//                            ev.preventDefault();

                              });
                              // Ende ajax
                        });
            // Ende Bind
      }
      // Ende Main function
})

Result: Graph shows up. If I do a right click with the mouse the ajax command will be executed. The console in the Tapestry will show that the call has been received. The Firefox Console also gives the right feedback. BUT.. the EventContext will be a EmptyEventContext Object and therefor all data tests that I do will fail. As you can see I also tried a simple $.post variation. Also no results.

Anybody any idea?

Thanks in advance

Janko



AW: Problem sending data from a JS Element back to Tapestry

Posted by "Jochimsen, Janko" <ja...@urios-beratung.de>.
Hi Chris,

Thank you very much. I solve the problem for me and your advice definitely pointed me into the right direction. 

For everyone following this I  may add that we seem to work in different environments.

I tried your 

(function(){
    define(["jquery", "t5/core/ajax", "t5/core/utils", "components/editor/inline-toolbar" ],
        function ($, ajax, utils, toolbar) {



but that made the whole script unavailable to the system. 


What works for me as the top of the file is

define([ "jquery", "t5/core/ajax", "t5/core/utils"],

function($, ajax, utils) {

	return function(callbackuri, context) {


That makes the script visible but also makes utils accessible.

Any way Thank you very much.


Janko


PS.: It is really a pity but documentation of the newer feature of tapestry Is so  hard to come by. There is so much potential in this system, but even if you understand the main paradigm you can get lost in the details.


-----Ursprüngliche Nachricht-----
Von: Chris Poulsen [mailto:mailinglist@nesluop.dk] 
Gesendet: Donnerstag, 21. Juli 2016 23:06
An: Tapestry users <us...@tapestry.apache.org>
Betreff: Re: Problem sending data from a JS Element back to Tapestry

Hi,

Utils and ajax are injected using requirejs, the top of the module file looks like this...

(function(){
    define(["jquery", "t5/core/ajax", "t5/core/utils", "components/editor/inline-toolbar" ],
        function ($, ajax, utils, toolbar) {



On Thu, Jul 21, 2016 at 10:42 PM, Jochimsen, Janko < janko.jochimsen@urios-beratung.de> wrote:

> Hi Chris,
>
> thanks for your sift answer
>
> I think this is the right direction. I am just stuck with a very – 
> probably stupid – problem. I included all relevant paths that I can 
> think of with:
>
> define([ "jquery", "t5/core/dom", "t5/core/ajax", "t5/core/utils" ]
>
> the function looks like this:
> var buildUrl = function(link, params) {
>                 return utils.extendURL(link, {
>                 params : JSON.stringify(params)
>                 });
>         };
>
>
> Where the calling is:
> var url = buildUrl(callback, {
>                 'action' : 'follow',
>                 'userid' : '11239528343'
>         });
>
>
> but in Firefox console I get still
>
> TypeError: extendURL is not a function
> buildUrl()
>  myBarRender.js:56
> <anonym>
>  myBarRender.js:30
> jQuery.event.dispatch()
>  jquery.js:137
> jQuery.event.add/elemData.handle()
>  jquery.js:126
> jQuery.event.trigger()
>
> Any Idea?
>
> Thanks a lot
>
> Janko
>
>
> -----Ursprüngliche Nachricht-----
> Von: Chris Poulsen [mailto:mailinglist@nesluop.dk]
> Gesendet: Donnerstag, 21. Juli 2016 19:20
> An: Tapestry users <us...@tapestry.apache.org>
> Betreff: Re: Problem sending data from a JS Element back to Tapestry
>
> you cannot expect that your parameters end up as event context (unless 
> you encode them into your url in that way).
>
> I've had success using:
>
> var url = buildUrl( setupDialogLink, params ); ajax( url, {
> success: function(){ ... }
> });
>
> var buildUrl = function( link, params ) {
>     return utils.extendURL( link, { params: JSON.stringify(params) } 
> ); };
>
> Where ajax/utils are those from t5/core/ajax / t5/core/utils
>
> The handler on the server side looks like this:
>
> handlerName( @RequestParameter( "params" ) JSONObject json )
>
> HTH.
>
> --
> Chris
>
>
>
>
>
> On Thu, Jul 21, 2016 at 5:35 PM, Jochimsen, Janko < 
> janko.jochimsen@urios-beratung.de> wrote:
>
> > Hello Everybody,
> > I do have a problem with the communication between tapestry and java 
> > Script or to be more precise a JQuery Script.
> > As a background Information I am using JQPlot Graphs that work quiet 
> > good and I can start them from tapestry without problems.
> > Now I would like to increase the interaction of these elements by 
> > sending mouse clicks back to the tapestry system for further use.
> > In order to call the plot I use
> >
> > public void afterRender() {
> >             Link link = resources.createEventLink("Call2", spec);
> >             String uri = link.toAbsoluteURI();
> >             String output = "Call JS with Parameter:[" + uri + "]";
> >             logger.info(" OUTPUT: " + output);
> >             javaScriptSupport.require("myBarRender").with(uri, 
> > spec);
> >
> >       }
> >
> > Where Call2 looks like this:
> > public void onCall2(EventContext eventContext) {
> >             if (eventContext != null) {
> >
> >                   JSONObject value = null;
> >
> >                   StringBuffer sb = new StringBuffer();
> >                   CaptureResultCallback<String> callback = new 
> > CaptureResultCallback<String>();
> >                   resources.triggerEvent(EventConstants.REFRESH, new 
> > JSONObject[] { value }, callback);
> >
> >                   if (callback.getResult() != null) {
> >                         Object obj = callback.getResult();
> >                         sb.append(" CALLBACK = " + obj.toString() +
> "..");
> >                   } else {
> >                         sb.append(" CALLBACK = NULL ");
> >                   }
> >                   String[] data = eventContext.toStrings();
> >
> >                   if (data.length > 0) {
> >                         for (int i = 0; i < data.length; i++) {
> >                               sb.append("data[" + i + "] =" + data);
> >                               String s = data[i];
> >                               if (s != null) {
> >                                    sb.append("content=" + s);
> >                               }
> >                         }
> >                   } else {
> >                         sb.append("NO DATA");
> >                   }
> >                   logger.info("Got Called from JS with data " + 
> > sb.toString());
> >             } else {
> >                   logger.info("Got Called from JS with data == null");
> >             }
> >       }
> >
> > On the JavaScript-Side the code looks like this
> >
> > define([ "jquery" ], function($) {
> >
> >       return function(callbackuri, context) {
> >             var s1 = [ 2, 6, 7, 10 ];
> >             var s2 = [ 7, 5, 3, 2 ];
> >             var s3 = [ 14, 9, 3, 8 ];
> >             var callback = callbackuri;
> >
> >             plot3 = $.jqplot('chart3', [ s1, s2, s3 ], {
> >                   stackSeries : true,
> >                   captureRightClick : true,
> >                   seriesDefaults : {
> >                         renderer : $.jqplot.BarRenderer,
> >                         rendererOptions : {
> >                               highlightMouseDown : true
> >                         },
> >                         pointLabels : {
> >                               show : true
> >                         }
> >                   }
> >             });
> >             $('#chart3').bind(
> >                         'jqplotDataRightClick',
> >                         function(ev, seriesIndex, pointIndex, data) {
> >                               console.log("try to reach callback");
> >                               //
> >                               $.ajax(callback, {
> >                                    dataType : 'json',
> >                                    type : 'post',
> >                                    contentType : 'application/json',
> >                                    data : JSON.stringify({
> >                                          'action' : 'follow',
> >                                          'userid' : '11239528343'
> >                                    }),
> >                                    success : function(data) {
> >                                          console.log("Reached Server 
> > got back ");
> >                                    }
> > //                            $.post(callback, $(this).serialize(),
> > //                            function(data, textStatus, jQxhr) {
> > //                                 console.log("Reached Server got back
> ");
> > //                                 $('#response pre').html(data);
> > //
> > //                            }, 'text').fail(
> > //                            function(jqXhr, textStatus, errorThrown) {
> > //                                 console.log(errorThrown);
> > //                            });
> > //
> > //                            ev.preventDefault();
> >
> >                               });
> >                               // Ende ajax
> >                         });
> >             // Ende Bind
> >       }
> >       // Ende Main function
> > })
> >
> > Result: Graph shows up. If I do a right click with the mouse the 
> > ajax command will be executed. The console in the Tapestry will show 
> > that the call has been received. The Firefox Console also gives the 
> > right
> feedback.
> > BUT.. the EventContext will be a EmptyEventContext Object and 
> > therefor
> all
> > data tests that I do will fail. As you can see I also tried a simple
> $.post
> > variation. Also no results.
> >
> > Anybody any idea?
> >
> > Thanks in advance
> >
> > Janko
> >
> >
> >
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org

Re: Problem sending data from a JS Element back to Tapestry

Posted by Chris Poulsen <ma...@nesluop.dk>.
Hi,

Utils and ajax are injected using requirejs, the top of the module file
looks like this...

(function(){
    define(["jquery", "t5/core/ajax", "t5/core/utils",
"components/editor/inline-toolbar" ],
        function ($, ajax, utils, toolbar) {



On Thu, Jul 21, 2016 at 10:42 PM, Jochimsen, Janko <
janko.jochimsen@urios-beratung.de> wrote:

> Hi Chris,
>
> thanks for your sift answer
>
> I think this is the right direction. I am just stuck with a very –
> probably stupid – problem. I included all relevant paths that I can think
> of with:
>
> define([ "jquery", "t5/core/dom", "t5/core/ajax", "t5/core/utils" ]
>
> the function looks like this:
> var buildUrl = function(link, params) {
>                 return utils.extendURL(link, {
>                 params : JSON.stringify(params)
>                 });
>         };
>
>
> Where the calling is:
> var url = buildUrl(callback, {
>                 'action' : 'follow',
>                 'userid' : '11239528343'
>         });
>
>
> but in Firefox console I get still
>
> TypeError: extendURL is not a function
> buildUrl()
>  myBarRender.js:56
> <anonym>
>  myBarRender.js:30
> jQuery.event.dispatch()
>  jquery.js:137
> jQuery.event.add/elemData.handle()
>  jquery.js:126
> jQuery.event.trigger()
>
> Any Idea?
>
> Thanks a lot
>
> Janko
>
>
> -----Ursprüngliche Nachricht-----
> Von: Chris Poulsen [mailto:mailinglist@nesluop.dk]
> Gesendet: Donnerstag, 21. Juli 2016 19:20
> An: Tapestry users <us...@tapestry.apache.org>
> Betreff: Re: Problem sending data from a JS Element back to Tapestry
>
> you cannot expect that your parameters end up as event context (unless you
> encode them into your url in that way).
>
> I've had success using:
>
> var url = buildUrl( setupDialogLink, params ); ajax( url, {
> success: function(){ ... }
> });
>
> var buildUrl = function( link, params )
> {
>     return utils.extendURL( link, { params: JSON.stringify(params) } ); };
>
> Where ajax/utils are those from t5/core/ajax / t5/core/utils
>
> The handler on the server side looks like this:
>
> handlerName( @RequestParameter( "params" ) JSONObject json )
>
> HTH.
>
> --
> Chris
>
>
>
>
>
> On Thu, Jul 21, 2016 at 5:35 PM, Jochimsen, Janko <
> janko.jochimsen@urios-beratung.de> wrote:
>
> > Hello Everybody,
> > I do have a problem with the communication between tapestry and java
> > Script or to be more precise a JQuery Script.
> > As a background Information I am using JQPlot Graphs that work quiet good
> > and I can start them from tapestry without problems.
> > Now I would like to increase the interaction of these elements by sending
> > mouse clicks back to the tapestry system for further use.
> > In order to call the plot I use
> >
> > public void afterRender() {
> >             Link link = resources.createEventLink("Call2", spec);
> >             String uri = link.toAbsoluteURI();
> >             String output = "Call JS with Parameter:[" + uri + "]";
> >             logger.info(" OUTPUT: " + output);
> >             javaScriptSupport.require("myBarRender").with(uri, spec);
> >
> >       }
> >
> > Where Call2 looks like this:
> > public void onCall2(EventContext eventContext) {
> >             if (eventContext != null) {
> >
> >                   JSONObject value = null;
> >
> >                   StringBuffer sb = new StringBuffer();
> >                   CaptureResultCallback<String> callback = new
> > CaptureResultCallback<String>();
> >                   resources.triggerEvent(EventConstants.REFRESH, new
> > JSONObject[] { value }, callback);
> >
> >                   if (callback.getResult() != null) {
> >                         Object obj = callback.getResult();
> >                         sb.append(" CALLBACK = " + obj.toString() +
> "..");
> >                   } else {
> >                         sb.append(" CALLBACK = NULL ");
> >                   }
> >                   String[] data = eventContext.toStrings();
> >
> >                   if (data.length > 0) {
> >                         for (int i = 0; i < data.length; i++) {
> >                               sb.append("data[" + i + "] =" + data);
> >                               String s = data[i];
> >                               if (s != null) {
> >                                    sb.append("content=" + s);
> >                               }
> >                         }
> >                   } else {
> >                         sb.append("NO DATA");
> >                   }
> >                   logger.info("Got Called from JS with data " +
> > sb.toString());
> >             } else {
> >                   logger.info("Got Called from JS with data == null");
> >             }
> >       }
> >
> > On the JavaScript-Side the code looks like this
> >
> > define([ "jquery" ], function($) {
> >
> >       return function(callbackuri, context) {
> >             var s1 = [ 2, 6, 7, 10 ];
> >             var s2 = [ 7, 5, 3, 2 ];
> >             var s3 = [ 14, 9, 3, 8 ];
> >             var callback = callbackuri;
> >
> >             plot3 = $.jqplot('chart3', [ s1, s2, s3 ], {
> >                   stackSeries : true,
> >                   captureRightClick : true,
> >                   seriesDefaults : {
> >                         renderer : $.jqplot.BarRenderer,
> >                         rendererOptions : {
> >                               highlightMouseDown : true
> >                         },
> >                         pointLabels : {
> >                               show : true
> >                         }
> >                   }
> >             });
> >             $('#chart3').bind(
> >                         'jqplotDataRightClick',
> >                         function(ev, seriesIndex, pointIndex, data) {
> >                               console.log("try to reach callback");
> >                               //
> >                               $.ajax(callback, {
> >                                    dataType : 'json',
> >                                    type : 'post',
> >                                    contentType : 'application/json',
> >                                    data : JSON.stringify({
> >                                          'action' : 'follow',
> >                                          'userid' : '11239528343'
> >                                    }),
> >                                    success : function(data) {
> >                                          console.log("Reached Server got
> > back ");
> >                                    }
> > //                            $.post(callback, $(this).serialize(),
> > //                            function(data, textStatus, jQxhr) {
> > //                                 console.log("Reached Server got back
> ");
> > //                                 $('#response pre').html(data);
> > //
> > //                            }, 'text').fail(
> > //                            function(jqXhr, textStatus, errorThrown) {
> > //                                 console.log(errorThrown);
> > //                            });
> > //
> > //                            ev.preventDefault();
> >
> >                               });
> >                               // Ende ajax
> >                         });
> >             // Ende Bind
> >       }
> >       // Ende Main function
> > })
> >
> > Result: Graph shows up. If I do a right click with the mouse the ajax
> > command will be executed. The console in the Tapestry will show that the
> > call has been received. The Firefox Console also gives the right
> feedback.
> > BUT.. the EventContext will be a EmptyEventContext Object and therefor
> all
> > data tests that I do will fail. As you can see I also tried a simple
> $.post
> > variation. Also no results.
> >
> > Anybody any idea?
> >
> > Thanks in advance
> >
> > Janko
> >
> >
> >
>

AW: Problem sending data from a JS Element back to Tapestry

Posted by "Jochimsen, Janko" <ja...@urios-beratung.de>.
Hi Chris,

thanks for your sift answer 

I think this is the right direction. I am just stuck with a very – probably stupid – problem. I included all relevant paths that I can think of with: 

define([ "jquery", "t5/core/dom", "t5/core/ajax", "t5/core/utils" ]

the function looks like this:
var buildUrl = function(link, params) {
		return utils.extendURL(link, {
		params : JSON.stringify(params)
		});
	};


Where the calling is:
var url = buildUrl(callback, {
		'action' : 'follow',
		'userid' : '11239528343'
	});


but in Firefox console I get still 

TypeError: extendURL is not a function
buildUrl()
 myBarRender.js:56
<anonym>
 myBarRender.js:30
jQuery.event.dispatch()
 jquery.js:137
jQuery.event.add/elemData.handle()
 jquery.js:126
jQuery.event.trigger()

Any Idea?

Thanks a lot

Janko


-----Ursprüngliche Nachricht-----
Von: Chris Poulsen [mailto:mailinglist@nesluop.dk] 
Gesendet: Donnerstag, 21. Juli 2016 19:20
An: Tapestry users <us...@tapestry.apache.org>
Betreff: Re: Problem sending data from a JS Element back to Tapestry

you cannot expect that your parameters end up as event context (unless you encode them into your url in that way).

I've had success using:

var url = buildUrl( setupDialogLink, params ); ajax( url, {
success: function(){ ... }
});

var buildUrl = function( link, params )
{
    return utils.extendURL( link, { params: JSON.stringify(params) } ); };

Where ajax/utils are those from t5/core/ajax / t5/core/utils

The handler on the server side looks like this:

handlerName( @RequestParameter( "params" ) JSONObject json )

HTH.

--
Chris





On Thu, Jul 21, 2016 at 5:35 PM, Jochimsen, Janko <
janko.jochimsen@urios-beratung.de> wrote:

> Hello Everybody,
> I do have a problem with the communication between tapestry and java
> Script or to be more precise a JQuery Script.
> As a background Information I am using JQPlot Graphs that work quiet good
> and I can start them from tapestry without problems.
> Now I would like to increase the interaction of these elements by sending
> mouse clicks back to the tapestry system for further use.
> In order to call the plot I use
>
> public void afterRender() {
>             Link link = resources.createEventLink("Call2", spec);
>             String uri = link.toAbsoluteURI();
>             String output = "Call JS with Parameter:[" + uri + "]";
>             logger.info(" OUTPUT: " + output);
>             javaScriptSupport.require("myBarRender").with(uri, spec);
>
>       }
>
> Where Call2 looks like this:
> public void onCall2(EventContext eventContext) {
>             if (eventContext != null) {
>
>                   JSONObject value = null;
>
>                   StringBuffer sb = new StringBuffer();
>                   CaptureResultCallback<String> callback = new
> CaptureResultCallback<String>();
>                   resources.triggerEvent(EventConstants.REFRESH, new
> JSONObject[] { value }, callback);
>
>                   if (callback.getResult() != null) {
>                         Object obj = callback.getResult();
>                         sb.append(" CALLBACK = " + obj.toString() + "..");
>                   } else {
>                         sb.append(" CALLBACK = NULL ");
>                   }
>                   String[] data = eventContext.toStrings();
>
>                   if (data.length > 0) {
>                         for (int i = 0; i < data.length; i++) {
>                               sb.append("data[" + i + "] =" + data);
>                               String s = data[i];
>                               if (s != null) {
>                                    sb.append("content=" + s);
>                               }
>                         }
>                   } else {
>                         sb.append("NO DATA");
>                   }
>                   logger.info("Got Called from JS with data " +
> sb.toString());
>             } else {
>                   logger.info("Got Called from JS with data == null");
>             }
>       }
>
> On the JavaScript-Side the code looks like this
>
> define([ "jquery" ], function($) {
>
>       return function(callbackuri, context) {
>             var s1 = [ 2, 6, 7, 10 ];
>             var s2 = [ 7, 5, 3, 2 ];
>             var s3 = [ 14, 9, 3, 8 ];
>             var callback = callbackuri;
>
>             plot3 = $.jqplot('chart3', [ s1, s2, s3 ], {
>                   stackSeries : true,
>                   captureRightClick : true,
>                   seriesDefaults : {
>                         renderer : $.jqplot.BarRenderer,
>                         rendererOptions : {
>                               highlightMouseDown : true
>                         },
>                         pointLabels : {
>                               show : true
>                         }
>                   }
>             });
>             $('#chart3').bind(
>                         'jqplotDataRightClick',
>                         function(ev, seriesIndex, pointIndex, data) {
>                               console.log("try to reach callback");
>                               //
>                               $.ajax(callback, {
>                                    dataType : 'json',
>                                    type : 'post',
>                                    contentType : 'application/json',
>                                    data : JSON.stringify({
>                                          'action' : 'follow',
>                                          'userid' : '11239528343'
>                                    }),
>                                    success : function(data) {
>                                          console.log("Reached Server got
> back ");
>                                    }
> //                            $.post(callback, $(this).serialize(),
> //                            function(data, textStatus, jQxhr) {
> //                                 console.log("Reached Server got back ");
> //                                 $('#response pre').html(data);
> //
> //                            }, 'text').fail(
> //                            function(jqXhr, textStatus, errorThrown) {
> //                                 console.log(errorThrown);
> //                            });
> //
> //                            ev.preventDefault();
>
>                               });
>                               // Ende ajax
>                         });
>             // Ende Bind
>       }
>       // Ende Main function
> })
>
> Result: Graph shows up. If I do a right click with the mouse the ajax
> command will be executed. The console in the Tapestry will show that the
> call has been received. The Firefox Console also gives the right feedback.
> BUT.. the EventContext will be a EmptyEventContext Object and therefor all
> data tests that I do will fail. As you can see I also tried a simple $.post
> variation. Also no results.
>
> Anybody any idea?
>
> Thanks in advance
>
> Janko
>
>
>

Re: Problem sending data from a JS Element back to Tapestry

Posted by Chris Poulsen <ma...@nesluop.dk>.
you cannot expect that your parameters end up as event context (unless you
encode them into your url in that way).

I've had success using:

var url = buildUrl( setupDialogLink, params );
ajax( url, {
success: function(){ ... }
});

var buildUrl = function( link, params )
{
    return utils.extendURL( link, { params: JSON.stringify(params) } );
};

Where ajax/utils are those from t5/core/ajax / t5/core/utils

The handler on the server side looks like this:

handlerName( @RequestParameter( "params" ) JSONObject json )

HTH.

-- 
Chris





On Thu, Jul 21, 2016 at 5:35 PM, Jochimsen, Janko <
janko.jochimsen@urios-beratung.de> wrote:

> Hello Everybody,
> I do have a problem with the communication between tapestry and java
> Script or to be more precise a JQuery Script.
> As a background Information I am using JQPlot Graphs that work quiet good
> and I can start them from tapestry without problems.
> Now I would like to increase the interaction of these elements by sending
> mouse clicks back to the tapestry system for further use.
> In order to call the plot I use
>
> public void afterRender() {
>             Link link = resources.createEventLink("Call2", spec);
>             String uri = link.toAbsoluteURI();
>             String output = "Call JS with Parameter:[" + uri + "]";
>             logger.info(" OUTPUT: " + output);
>             javaScriptSupport.require("myBarRender").with(uri, spec);
>
>       }
>
> Where Call2 looks like this:
> public void onCall2(EventContext eventContext) {
>             if (eventContext != null) {
>
>                   JSONObject value = null;
>
>                   StringBuffer sb = new StringBuffer();
>                   CaptureResultCallback<String> callback = new
> CaptureResultCallback<String>();
>                   resources.triggerEvent(EventConstants.REFRESH, new
> JSONObject[] { value }, callback);
>
>                   if (callback.getResult() != null) {
>                         Object obj = callback.getResult();
>                         sb.append(" CALLBACK = " + obj.toString() + "..");
>                   } else {
>                         sb.append(" CALLBACK = NULL ");
>                   }
>                   String[] data = eventContext.toStrings();
>
>                   if (data.length > 0) {
>                         for (int i = 0; i < data.length; i++) {
>                               sb.append("data[" + i + "] =" + data);
>                               String s = data[i];
>                               if (s != null) {
>                                    sb.append("content=" + s);
>                               }
>                         }
>                   } else {
>                         sb.append("NO DATA");
>                   }
>                   logger.info("Got Called from JS with data " +
> sb.toString());
>             } else {
>                   logger.info("Got Called from JS with data == null");
>             }
>       }
>
> On the JavaScript-Side the code looks like this
>
> define([ "jquery" ], function($) {
>
>       return function(callbackuri, context) {
>             var s1 = [ 2, 6, 7, 10 ];
>             var s2 = [ 7, 5, 3, 2 ];
>             var s3 = [ 14, 9, 3, 8 ];
>             var callback = callbackuri;
>
>             plot3 = $.jqplot('chart3', [ s1, s2, s3 ], {
>                   stackSeries : true,
>                   captureRightClick : true,
>                   seriesDefaults : {
>                         renderer : $.jqplot.BarRenderer,
>                         rendererOptions : {
>                               highlightMouseDown : true
>                         },
>                         pointLabels : {
>                               show : true
>                         }
>                   }
>             });
>             $('#chart3').bind(
>                         'jqplotDataRightClick',
>                         function(ev, seriesIndex, pointIndex, data) {
>                               console.log("try to reach callback");
>                               //
>                               $.ajax(callback, {
>                                    dataType : 'json',
>                                    type : 'post',
>                                    contentType : 'application/json',
>                                    data : JSON.stringify({
>                                          'action' : 'follow',
>                                          'userid' : '11239528343'
>                                    }),
>                                    success : function(data) {
>                                          console.log("Reached Server got
> back ");
>                                    }
> //                            $.post(callback, $(this).serialize(),
> //                            function(data, textStatus, jQxhr) {
> //                                 console.log("Reached Server got back ");
> //                                 $('#response pre').html(data);
> //
> //                            }, 'text').fail(
> //                            function(jqXhr, textStatus, errorThrown) {
> //                                 console.log(errorThrown);
> //                            });
> //
> //                            ev.preventDefault();
>
>                               });
>                               // Ende ajax
>                         });
>             // Ende Bind
>       }
>       // Ende Main function
> })
>
> Result: Graph shows up. If I do a right click with the mouse the ajax
> command will be executed. The console in the Tapestry will show that the
> call has been received. The Firefox Console also gives the right feedback.
> BUT.. the EventContext will be a EmptyEventContext Object and therefor all
> data tests that I do will fail. As you can see I also tried a simple $.post
> variation. Also no results.
>
> Anybody any idea?
>
> Thanks in advance
>
> Janko
>
>
>