I have a page, one section of which I want to load only after the whole page is loaded. For this, I'm using the following code on the page:
<script type="text/javascript">
alert("In the JS");
$(document).ready(
function() {
$.post(jspPath+'/myCommunity/ajax/hotTopicDiscussion.faces',
function(data) {
jsf.ajax.request(this, 'post', {render: 'discussionTopic'});
}
);
}
);
</script>
also
<h:panelGroup id="discussionTopic" reRendered="#{discussionBean.doRender}">
This doRender is a bean property which I set once the AJAX call is done. But this is not loading the data. I can see the ajax method is getting called.
It seems, that your call of jsf.ajax.request is incorrect. According to JsDoc reference arguments of request are following:
source:
The DOM element that triggered this Ajax request, or an id string of the element to use as the triggering element.
event:
The DOM event that triggered this Ajax request. The event argument is optional.
options:
The set of available options that can be sent as request parameters to control client and/or server side request processing.
So first element must be some element inside form or may be form itself. You may try to pass form's id or form element itself to this function.
Do you really need to submit a form ajaxically? That's where the jsf.ajax.request() is for. It seems like that you just want to load some static content inside some <div>. Just do as follows
<script>
$(document).ready(function() {
$.get("#{request.contextPath}/myCommunity/ajax/hotTopicDiscussion.faces", function(data) {
$("#discussionTopic").html(data);
});
});
</script>
<h:panelGroup id="discussionTopic" layout="block" />
Or, simpler, with jQuery.load():
<script>
$(document).ready(function() {
$("#discussionTopic").load("#{request.contextPath}/myCommunity/ajax/hotTopicDiscussion.faces");
});
</script>
<h:panelGroup id="discussionTopic" layout="block" />
In both cases, I assume that the hotTopicDiscussion.xhtml has <ui:composition> as root element and that it contains only the necessary HTML (and thus not <html> and so on).
If you indeed really need to submit a form ajaxically, then simplest would be to let JS "click" the button programmatically. It will delegate all the way up to the proper and needed jsf.ajax.request() call. A jsf.ajax.request() call is useless anyway without a physical form/button component on the page. You can if necessary hide the form by CSS.
<script>
$(document).ready(function() {
$("[id='form:button']")[0].onclick();
});
</script>
<h:form id="form" style="display:none;">
<h:commandButton id="button" action="#{bean.submit}">
<f:ajax render=":discussionTopic" />
</h:commandButton>
</h:form>
<h:panelGroup id="discussionTopic" layout="block" />
Related
I have jsp page that imports Testing.java
<jsp:useBean id="test" scope="session" class="Testing" />
<jsp:useBean id="sb" scope="session" class="SessionBean" />
<jsp:useBean id="eb" scope="session" class="ErrorBean" />
I need to call public method that is in Testing class after user confirms changes.
this is what I have so far:
<tr>
<td align="left">
<a href="<%=test.persistPrintingInfo(eb,sb) %>" >
<img src="../images/update.gif" OnClick="if( !confirm('Update printing information?')) return false"></a>
</td>
</tr>
Does anyone know how to do this?
Can I maybe call javascript method and call persistPrintingInfo() through javascript?
the page has been sent by the server to your browser. while javascript can modify the content of your page , in order to call a bean's method you must make a call to the server(a request to the servlet) beacause the bean lives on the server side. and this call can be made by creating an url mapped to the servlet, or a form whose action is the servlet
`<FORM ACTION="${pageContext.request.contextPath}/sampleServlet">`
if the form's method is GET, then on the doGet() method of the servlet you call your bean's method.
this form does not need to contain any kind of field. it is created just to make a request to the servlet. while you would normally click the submit button to proceed to the action, this time we will submit the form through javascript. with some javascript tricks, i think this form can also be hidden, because you don't actually need it to be displayed in your page
so you simply create this form in your jsp, and submit it through javascript , like this:
on your link, you will have onClick=myJavascriptMethod(); in your jsp, you create a javascript block
<script type="text/javascript">
function myJavascriptMethod)=()
{
document.forms["myform"].submit();
}
</script>
You can use this way, although there is better approaches using servlets.
<%com.example.Testing.yourMethod()%>
a second approach which i found while googling is this one:
How do I pass current item to Java method by clicking a hyperlink or button in JSP page?
in your case, the code will be
<img.. >
the newPage.jsp will contain just
<%yourPackage.YourClass.yourMethod()%>
Exception :
Description: The requested resource /Strut2Examples/checkMethods/updateCRUD is not available. How to call the namespace based action from normal HTML for with Struts2. It works with Struts2 Forms. Please help me to understand.
HTML :
<s:form namespace="/checkMethods" action="executeCRUD" >
<s:submit label="execute" value="execute" />
</s:form>
<form name="normalForm" id="normalForm">
<input type="button" value="update" onclick="submitForm()"/>
</form>
Java Script :
<script type="text/javascript">
function submitForm()
{
var myForm = document.getElementById("normalForm");
myForm.action="checkMethods/updateCRUD";
myForm.submit();
}
</script>
If you want to use HTML form tag you should build the URL using the action name and namespace attributes of the url tag. For example
<form action="<s:url namespace="/checkMethods" action="deleteCRUD"/>" method="POST">
The same concern the JavaScript code where you could mix url tag. Like this
myForm.action='<s:url namespace="/checkMethods" action="deleteCRUD"/>';
Actually if you define the action attribute of the form you don't need to construct the URL in the event handler function. Just do submit() .
You should take url tag seriously, because for example you have constructed URL in the action attribute that lacks context path and slash and errors like that you did can't count.
im newbie in Jquery , i want to do a placeholder in jsf , something like this : http://niklaskoehler.de/demos/vordefinierter-text/ . I've the next code :
<head>
<script type="text/javascript">
jQuery(document).ready(function() {
var $ = jQuery;
var Element = "#email";
var InputText = "Placeholder demo";
$(Element).val(InputText);
alert("sup bro"); //this alert works
$(Element).bind('focus',function(){
$(this).addClass('focus');
if($(this).val()==InputText){
$(this).val('');
}
}).bind('blur',function(){
if($(this).val()==""){
$(this).val(InputText);
$(this).removeClass('focus');
}
});
});
</script>
</head>
And this is my form :
<h:form>
<div class="form-item">
<h:inputText id="email" title="Email" value="#{UserAction.email}"/>
</div>
</h:form>
And nothing happen with the input , what is wrong in my code?
jQuery doesn't work with JSF component tree in server side. Instead, it works with HTML DOM tree in client side. In case of JSF, you should instead be looking at JSF-generated HTML output while writing jQuery. As you're encountering rather unpredictable HTML element IDs like pbGfb9435b3_2d720d_2d478d_2d8183_2d657b3839216b_j_id1:j_idt5:email, you're likely running a JSF portlet instead of servlet. The pgXxx ID prefix occurs on portlets only.
As a word of advice, don't select non-unique elements by ID. Select by class name instead.
E.g.
<h:inputText ... styleClass="email" />
with
var selector = ".email";
var inputText = "Placeholder demo";
$(selector).val(inputText);
(I took the liberty to fix poor variable names; they should not start with uppercase and the CSS selector is not an element)
See also:
How to refer to a JSF component Id in jquery?
How to select JSF components using jQuery?
Sark,
Execute your web page and viewsource for same.
Whatever ID you will find for your <input type='text' id='something'
add the same id to your Jquery
var Element = "#something";
I am trying to find a way to invoke a piece of java code within the JSP using HTML form
<form method="get" action="invokeMe()">
<input type="submit" value="click to submit" />
</form>
<%
private void invokeMe(){
out.println("He invoked me. I am happy!");
}
%>
the above code is within the JSP. I want this run the scriptlet upon submit
I know the code looks very bad, but I just want to grasp the concept... and how to go about it.
thanks
You can use Ajax to submit form to servlet and evaluate java code, but stay on the same window.
<form method="get" action="invokeMe()" id="submit">
<input type="submit" value="click to submit" />
</form>
<script>
$(document).ready(function() {
$("#submit").submit(function(event) {
$.ajax({
type : "POST",
url : "your servlet here(for example: DeleteUser)",
data : "id=" + id,
success : function() {
alert("message");
}
});
$('#submit').submit(); // if you want to submit form
});
});
</script>
Sorry,not possible.
Jsp lies on server side and html plays on client side unless without making a request you cannot do this :)
you cannot write a java method in scriptlet. Because at compilation time code in scriptlet becomes part of service method. Hence method within a method is wrong.
How ever you can write java methods within init tag and can call from scriptlet like below code.
<form method="get" action="">
<input type="submit" value="click to submit" />
</form>
<%
invokeMe();
%>
<%!
private void invokeMe(){
out.println("He invoked me. I am happy!");
}
%>
Not possible.
When the form is submitted, it sends a request to the server. You have 2 options:
Have the server perform the desired action when the it receives the request sent by the form
or
Use Javascript to perform the desired action on the client:
<form name="frm1" action="submit" onsubmit="invokeMe()"
...
</form>
<script>
function invokeMe()
{
alert("He invoked me. I am happy!")
}
</script>
You can't do this since JSP rendering happens on server-side and client would never receive the Java code (ie. the invokeMe() function) in the returned HTML. It wouldn't know what to do with Java code at runtime, anyway!
What's more, <form> tag doesn't invoke functions, it sends an HTTP form to the URL specified in action attribute.
This should be a very simple question. I have a richfaces tree that is rendered using JSF. When the user clicks on a node I want a javascript function to run. Nothing more nothing less. No redirects, no re-submit, no-rerender, no Ajax. Just plain old Javascript.
I have seen the onselected attribute of the tree and it indeed fires a Javascript method. But of course I want to know which node was clicked.
Here is what I have so far
<head>
<script type="text/javascript">
function documentClicked(nodeRef)
{
alert("Node is "+nodeRef);
}
</script>
</head>
<rich:tree switchType="client" value="#{ajaxDocumentTree.rootNode}"
var="document" onselected="documentClicked()" >
<rich:treeNode iconLeaf="../images/tree/doc.gif"
icon="../images/tree/doc.gif">
<h:outputText value="#{document.friendlyName}" />
</rich:treeNode>
But this does not work because nodeRef is undefined. I expected that the first argument of the callback would be the selected node but this is not the case.
So the question is this:
How do I fire a Javascript function with the selected node from a richfaces tree?
The answer is that the javascript code should be on the node level instead of the tree level.
<head>
<script type="text/javascript">
function documentClicked(nodeRef)
{
alert("Node id is "+nodeRef);
}
</script>
</head>
<rich:tree switchType="client" value="#{ajaxDocumentTree.rootNode}"
var="document" >
<rich:treeNode onclick="documentClicked('#{document.id}')">
<h:outputText value="#{document.friendlyName}" />
</rich:treeNode>
I have little experience with JSF, but shouldn't this (in the scope of your event handler) be referring to the selected node, as it usually does in JavaScript?
Change your function to this and try it out:
function documentClicked()
{
alert("Node is " + this);
}
EDIT: the above was obviously not correct. As per my comment below, change your JSF to
<rich:tree switchType="client" value="#{ajaxDocumentTree.rootNode}"
var="document" onselected="documentClicked(this)" >