I am working with JSF and Richfaces quite a long time, however have one very interesting thing I still haven't found how to manage with those frameworks. My team is developing web application with Java as its base and JavaScript + HTML + CSS as its face. And so for making connectors between Frontend and Backend we are using Ajax for JSF (A4J) by creating functions in our .xhtml pages like this:
<a4j:jsFunction
name="myFunction"
actionListener="#{...}"
data="#{ if needed to return something }"
render="myOutputPanel"
oncomplete=" do some JS functions after success return "
>
<f:param name="myParam" value=" if has default value " />
</a4j:jsFunction>
However, we are trying to separate JAVA development from HTML, and HTML from JavaScript as much as possible. This means, we are making calls to a4j:jsFunction outside of .xhtml files, but from JS files, like this:
// content of javascript file
var myModule = {
private: function(){
var myAchor = document.getElementById("myAnchor");
myAchor.onclick = function(){
myFunction("param");
return false;
};
}
return {
// public methods
}
}
By using that approach, we've to maintain HTML code separately from JavaScript and that makes sence. However, JavaScript code, which is generated by aj4:jsFunction is still inside the HTML when rendered into the page and located into <span> tag. I'm not asking why, because seems there's a reason for that.
As you can notice in JavaScript code above, I am trying to use modules, which has public and private methods. And here's a problem I am having currently: When calling global a4j:jsFunction I am loosing a scope of a module and cannot return to it after I get data from Backend from a4j:jsFunction connector. Therefore, I wish to ask, if there's a way to keep a scope of my module by making AJAX calls inside the module and get returns also inside it?
