render page title using jsf 2 - ajax

is there any way to include the page's title inside an f:ajax tag, so that its content is also updated at run time?
currently my f:ajax tag looks like this -
<f:ajax render="#form">
i tried to add an id to the h:head tag, and add that id to the 'render' property of the f:ajax tag, but if i do so i get an error when the page loads -
<f:ajax> contains an unknown id 'pageHead' - cannot locate it in the context of the component B1
cheers,
eRez

Interesting question. I think there is no such command in render of ajax (like #form) to re-render the page title. What you can do is to wrap <title> with <h:form> or other "grouping" component (eg. h:panelGroup as Daniel said) like this :
<h:form id="titleForm">
<title>#{fooBean.fooTitle}</title>
</h:form>
And then call ajax update eg. with button :
<h:commandButton immediate="true" value="Change title">
<f:ajax event="click" render=":titleForm" listener="#{fooBean.changeTitle}"/>
</h:commandButton>
Bean:
private String fooTitle;
public void changeTitle() {
this.fooTitle= "updatedTitle";
}
// getter/setter
I don't know what else could you do, this should work. So wrap your title with <h:form id="..."> and then render it from ajax.

Related

What URL should I use in $.ajax() in order to submit a form

Working in JSF2 and ajax, i can't figure out what's the value of the $.ajax URL attribute in JSF context as i want to submit a form and update a div staying in the same page
Is it the following?
((HttpServletRequest) facesContext.getExternalContext().getRequest()).getContextPath()`
in my opinion you need pass value to the backing bean and set the parameter, after this you need to update this part (div).
see this http://www.mkyong.com/jsf2/4-ways-to-pass-parameter-from-jsf-page-to-backing-bean/
<p:commandButton action="#{bean.setId}" update="div">
<f:attribute name="id" value="12" />
</p:commandButton>
Another way is using flash, see this: https://javaserverfaces.java.net/nonav/docs/2.0/javadocs/javax/faces/context/Flash.html
lets say you have a form like this:
<div id="yourDivId">
<h:outputText value='#{yourControllerClass.yourAttribute}'></h:outputText>
</div>
<h:form>
<h:commandButton value="update">
<f:ajax execute="#form" listener="#{yourControllerClass.updateAttribute}"
render=":yourDiveId">
</f:ajax>
</h:commandButton>
</h:form>
in your ControllerClass/bean:
public final void updateAttribute(AjaxBehaviorEvent event){
// do what ever you want, get values, set another values, after that your Div will be auto updated
}
this way, you don't need to care about ajax params or URL...etc.
EDIT:
if you want to get a paramater from a request URL, then you can get it like this:
String paramVal = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get(key);

h:commandLink actionlistener is not invoked when used with f:ajax and ui:repeat

h:commandLink actionlistener is not invoked when used with f:ajax and ui:repeat
When I click the link, I have to pass a parameter in the bean's "onload" method and refresh the panelgroup "assist". It works fine when I use the commandButton but not with commandLink.
<h:panelGroup id="assist" styleClass="tabbed-panel-vertical">
<ul id="assistlink" class="tabbed-panel-vertical-tabs">
<ui:repeat var="assistants"
value="#{permissions.repAssistants}">
<li><h:commandLink
actionListener="#{permissions.onload}"
value="#{assistants.name}"
styleClass="#{permissions.selectedAssistant==assistants.userId ? 'selected' : ''}">
<f:ajax
render=":permissionsform:assist :permissionsform:permissionsContent"
execute="#this">
<f:attribute name="assistantId"
value="#{assistants.userId}" />
</f:ajax>
</h:commandLink></li>
</ui:repeat>
</ul>
`public void onload(ActionEvent event) {
Long userId = Long.valueOf(541);// user.getUserId();
Long assistantId = (Long) event.getComponent().getAttributes().get("assistantId");
System.out.println("User " + assistantId);
}`
As per the comments:
#BalusC Its javascript issue. Thanks for directing me to look at the javascript console. JS error "Uncaught ReferenceError: mojarra is not defined"
Make sure that you've a <h:head> tag in your master template instead of <head>. This way JSF will be able to auto-include the necessary JavaScript file for the Ajax magic.

JSF f:ajax listener not called

I am trying to have an h:inputText switch out with a different one when an h:commandButton is clicked. To do this, I am trying to tie an f:ajax command with the h:commandButton, with the listener setting a value on the bean (deciding which one to display), and re-rendering the area.
I have tried using listener on the f:ajax, actionListener on the h:commandButton, action on the h:commandButton with execute on the f:ajax. Nothing worked. The mothed I am trying to call is not being called at all - there is no println (see what follows).
The panelGroup is being re-rendered, which is why I need the onevent attribute that re-attaches some JavaScript hint text based on the title (I had an earlier question involving this).
The method I am trying to call:
public void morePressed(AjaxBehaviorEvent e) {
easySearch = !easySearch;
System.out.println("Made it!");
}
The JSF segment that is not working (note the last h:commandButton is trying to re-render the panelGroup):
<h:form>
<h:panelGroup id="switchSearchTexts">
<h:inputText accesskey="s" alt="Search" id="searchBoxPeople" title="Search Plebeians" valueChangeListener="#{peopleBean.simplePersonQuery}" size="25" rendered="#{peopleBean.easySearch}">
<f:ajax render="peopleDataTable" event="keyup" />
</h:inputText>
<h:inputText accesskey="s" alt="Search First Name" id="searchBoxFN" title="Search First Name" size="25" rendered="#{!peopleBean.easySearch}">
<f:ajax render="peopleDataTable" event="keyup" />
</h:inputText>
</h:panelGroup>
<div id="expandBox">
<h:inputText id="searchBoxLN" alt="Search Last Name" styleClass="hideToggle" title="Search Last Name" size="25" />
<h:inputText id="searchBoxAddress" alt="Search Address" styleClass="hideToggle" title="Search Address" size="25" />
</div>
<h:commandButton type="button" styleClass="moreButtonAsText" id="moreButtonAsText" value="â–¸More">
<f:ajax listener="#{peopleBean.morePressed}" render="switchSearchTexts" event="click" onevent="callFunctionAjaxRequest" />
</h:commandButton>
This is the JavaScript (jQuery) that I attach to the More button on pageload. I give it not because I think it could help, but I don't know if this could interfere with the ajax listener in any way:
$(function() {
textboxHint();
$('input[id$="moreButtonAsText"]').toggle(function(e) {
$(this).prop('value', '\u25c2Less');
$(".hideToggle").show(300);
}
, function () {
$(this).prop('value', '\u25b8More');
$(".hideToggle").hide(100);
$('input[id$="searchBoxAddress"]').prop('value', function() {
return $(this).prop('title');
});
$('input[id$="searchBoxAddress"]').blur();
});
});
I have no idea. As I said, I have tried actionListener on h:commandButton with various appraoches there, as well as various approaches to the listener on the ajax. Can anybody see why the listener does not work?
Update:
What I ended up doing, before having an answer, is converting everything to display and hide based on JavaScript, with stuff I needed hidden if they didn't have javascript initially hidden, etc.
However I need the f:ajax elsewhere, now.
The solution is to take out event="click" on the h:commandButton. I still do now know why this was causing it to break, but hey, whatever works.
I had an issue like this. It turned out that an inputText somewhere had a value="#{something.something}" where the property wasn't settable. The exception wasn't being reported anywhere. I had to put a breakpoint on Exception and all subclasses to find it.
Do you really have a function named callFunctionAjaxRequest in your js code? cause if not it may cause the button not to work (because its being referenced to a not existing function) ,
look at the firebug for a possible errors...
try this version of your command button (event="click" can be removed too... and self execute too)
<h:commandButton type="button" styleClass="moreButtonAsText" id="moreButtonAsText" value="More">
<f:ajax listener="#{peopleBean.morePressed}" render="switchSearchTexts" />
</h:commandButton>
Another thing , in your ajax calls of the upper input texts you got reference to searchBoxPeople twice (instead to searchBoxFN in the second f:ajax), fix it cause otherwise when working with searchBoxFN its f:ajax will try to execute an element that its not being rendered ... (can cause serious issues...)
p.s prependId="false" in your h:form will simplify your selectors in jQuery...
The issue is that the managed bean needs to be set up with the right signature event as an input param. Through lots of testing, I was trying to use the same class taking an AjaxBehaviorEvent. As in the same example on the previous forum.
when I declared an ActionListener event (compliant with the button jsf action), the bean is executed!
I had the same problem and followed your example to help me exactly. I simply (20 hrs) fixed this by including the following in my bean:
The first one now gets fired!
public void actionListener(ActionEvent actionEvent) {
// Add event code here...
System.out.println("Made it!");
}
public void morePressed(AjaxBehaviorEvent e) {
System.out.println("Made it!");
}

JSF AJax - How to render the output from an URL

I am trying to render the output of an URL in the same page, using JSF / Ajax (a4j) and so far I am having no luck. BTW, I am using RichFaces 4.0. For example, if the User clicks a row in a Table (or just a button), I like to show a web page right below the Table, that is relevant to the row clicked. Is there a way I can get the relevant URL using a Backing Bean and invoke that URL using A4J Tags? I searched for such tags or sample code and so far I could not find any.
Thanks for your help.
Embedding the result of an external URL in your webpage can only neatly be done with help of a HTML <iframe> element.
So, this should do:
<h:form>
<h:dataTable value="#{bean.websites}" var="website">
<h:column>#{website.name}</h:column>
<h:column>
<h:commandButton value="show" action="#{bean.setWebsite(website)}">
<f:ajax render=":website" />
</h:commandButton>
</h:column>
</h:dataTable>
</h:form>
<h:panelGroup id="website">
<iframe src="#{bean.website.url}"></iframe>
</h:panelGroup>
with
#ManagedBean
#ViewScoped
public class Bean {
private List<Website> websites; // +getter
private Website website; // +getter+setter
// ...
}

jsf ajax partial rendering

I'm using JSF 2.0.4
There is a component under a form in which there is an f:ajax
<h:form id="formid"....>
......
<h:outputText id="textid" ........../>
.........
<h:commandLink id=".." value="...">
<f:ajax event="click" render="formid" execute="input" listener="#{bean.action}"/>
<h:commandLink/>
<h:form/>
Is there any expression for render attribute to exclude textid from formid so that the form is rendered but not the outputText after the ajax is fired?
I'm not aware of a way to specify "everything in the form except this", but instead of using the form id as the render keyword, you could just list off the child ids under the form you want rendered and not include the id of the outputText, i.e. something like
<f:ajax event="click" render="id1 id2 id3" execute="input" listener="#{bean.action"/>
I'm not sure why you want this though - if you don't want the output text to be updated when that ajax event fires, I would think all you would have to do is simply not update it in the listener?

Resources