CODEWITHSUNDEEP
javascripthtmljsf-2
Bernad Ali
Bernad Ali

Reputation: 1729

Make div tag visible using java-script or Ajax render option in JSF

Currently I’m facing problem with the div component after add the ajax render in the suggestioinField component the div display change to none.How to make it the page to stay in the same page even thought after its render to the action.

This is the javascript function i used to hide and show the divident

function AddShow(id){
  document.getElementById(id).style.display="block";}

Add Button to show div tag :

<h:commandButton type="button" id="cmdadd1" value="#{message.btn__list_add}" onclick="AddShow('Add')" immediate="true"/>

JSF Page-Div Content 

<div id="Add" display:none;"> 
  <h:outputLabel value="#{message.label_listA }" />                 
  <o:suggestionField id="addvalA"  value="#{MainAction.CodeAdd}" customValueAllowed="false"
   manualListOpeningAllowed="true"  autoComplete="true" suggestionMinChars="1   onchange="O$.ajax.request(this,event,{ execute: 'frmList: addvalA ', listener: ‘MainAction.doSelectCodeAdd', render: 'frmList' })"onkeydown="O$.ajax.request(this,event,{listener: 'MainAction.doResetA'})" onblur="O$.ajax.request(this,event,{render:'frmList'})" ><o:dropDownItems value="#{MainAction.doCodeAdd}"/> </o:suggestionField>                            

   <h:commandButton  id="cmdAddConfirm"  value="#{message.btn_create}"  >
       <f:ajax execute="@form" render="@form" listener="#{MainAction.doConfirmAdd}"/>                           
  </h:commandButton>


  </div>

is there any way to do this?

Upvotes: 0

Views: 667

Answers (1)

Daniel
Daniel

Reputation: 37061

add the following to your js file I assume that you got jQuery (from primefaces) , and anyway the jsf.ajax.addOnEvent(function (data)... is the important part ...

jQuery(window).load(function () {
    jsf.ajax.addOnEvent(function (data) {
        if (data.status === "success") {
            if(data.source.id  === "cmdAddConfirm"){
                AddShow('Add');
            }
        }
    });
});

short explanation :

On each ajax call the jsf.ajax.addOnEvent will be called , inside it only after it was ended successfully and only if the call was made from cmdAddConfirm button , you will call your js function to set the display to block

Upvotes: 2

Related Questions