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
