wood burning stoves 2.0*
The moose likes JSF and the fly likes dynamic div gets reset Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "dynamic div gets reset" Watch "dynamic div gets reset" New topic
Author

dynamic div gets reset

Amlan Karmakar
Greenhorn

Joined: Sep 20, 2012
Posts: 10
I am trying to display the `chatBean.selectedUser` in the dynamic div that is generated by the javascript when the h:commandLink is clicked. The problem that I am facing is the that the page is refreshed whenever I click the commandLink button due to `action=#{chatBean.refresh}`, so the dynamic div gets reset and I am unable to create the dynamic divs. I need to submit the form to update the selectedUser property, but the form submit resets the page.

1)Here is the xhtml page


2) Here is the chatBean



3) Here is the user entity class

Volodymyr Levytskyi
Ranch Hand

Joined: Mar 29, 2012
Posts: 505
    
    1

Hello!

If you want not to reload your page when command link is clicked and form is submitted (chatBean.refresh is executed) you can use AJAX<f:ajax execute='id1,id2' render='id1,id4'/>.
But if you simply need to hide your div via javascript without executing chatBean.refresh method, you should add 'return false'. Consider this link:

To disable page reloading when javascript is executed you should add 'return false'. It must work!


True person is moral, false is right!
Amlan Karmakar
Greenhorn

Joined: Sep 20, 2012
Posts: 10
Volodymyr Levytskyi wrote:Hello!

If you want not to reload your page when command link is clicked and form is submitted (chatBean.refresh is executed) you can use AJAX<f:ajax execute='id1,id2' render='id1,id4'/>.
But if you simply need to hide your div via javascript without executing chatBean.refresh method, you should add 'return false'. Consider this link:

To disable page reloading when javascript is executed you should add 'return false'. It must work!



Since I am new to JSF, so it would be helpful if you tell me how I should use the for my code.
Volodymyr Levytskyi
Ranch Hand

Joined: Mar 29, 2012
Posts: 505
    
    1

Hello!

I am sure there are lots of examples on the Internet. I give you one simple example of ajax:
As you can see inside f:ajax there is attribute execute and render. They can accept id of elements which are separated by space but not by comma as I stated before. Attribute execute contains list of components' ids which are executed when button is clicked. If you want to execute only parent commandButton of <f:ajax> use '@this' instead of its id. Attribute render contains components' ids separated by space which are rendered. Only components whose ids
are included inside 'execute' are executed. Only components whose ids are included inside 'render' are rendered. Attribute onevent specifies javascript function which also is accomplished. As well as @this you can use @form to specify that form which encloses the <f:ajax> is executed or rendered. As well as @this and @form you can
use @all to specify that all components on page are executed. @none means no component is executed or rendered.
Example of listener attribute:
<f:ajax listener="#{mybean.someaction}" render="somecomponent" />
Example of event attribute:
<h:commandButton id="submit" value="Submit">
<f:ajax event="click" execute="userNo" />
</h:commandButton>
One more example of event attribute:
<h:inputText id="userNumber" size="1" required="true" requiredMessage="try to guess it " value="#{userNumberBean.userGuess}" style="color: red">
<f:ajax event="valueChange" execute="someID1 someID2 someID3"/>
</h:inputText>
Event type 'valueChange' is only for components whose value can be changed by user.


To use the bundled JavaScript resource API directly in a web application, such as a Facelets
page, you need to first identify the default JavaScript resource for the page with the help of the
hutputScript tag:
<h:form>
<hutputScript name="jsf.js" library="javax.faces" target="head"/>
</h:form>
Specifying the target as head causes the script resource to be rendered within the head element
on the HTML page.
In the next step, identify the component to which you would like to attach the Ajax
functionality. Add the Ajax functionality to the component by using the JavaScript API:
<h:form>
<hutputScript name="jsf.js" library="javax.faces" target="head">
<h:inputText id="inputname" value="#{userBean.name}"/>
<hutputText id="outputname" value="#{userBean.name}"/>
<h:commandButton id="submit" value="Submit"
onclick="jsf.ajax.request(this, event,
{execute:’inputname’,render:’outputname’});
return false;" />
</h:form>
The jsf.ajax.request method takes up to three parameters that specify source, event, and
options. The source parameter identiies the DOM element that triggered the Ajax request,
typically this. The optional event parameter identiies the DOM event that triggered this
request.
Amlan Karmakar
Greenhorn

Joined: Sep 20, 2012
Posts: 10
Thanks for the explanation. Now I am able to solve my problem. Thanks a lot.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: dynamic div gets reset