Javascript Function Button display

Question

I have the following javascript function which is called from a apex:commandbutton. hasuser is a variable of the controller

  function toggleButton(box, id1, id2) {
        var user='{!hasuser}';
          var elm1 = document.getElementById(id1);
          var elm2 = document.getElementById(id2);
          if(box.checked && user){
                elm1.style.display = "";
          else if(box.checked && !user)
                  elm2.style.display = "";
          else{
                  elm1.style.display = "none";
                  elm2.style.display = "none";
               }
           } 

Always the first button seems to be displayed.

No matter whatever the value of the user variable(true or false)..Can anyone tell me what is wrong? I can't figure it out.

Answer 1

in javascript you need to check like user=='true' and user=='false'

Because in javascript variable user stored as string..

Answer 2

JavaScript loaded when page is loaded. So, even if the value of hasuser(Controller variable) changed in the controller then also JavaScript will not refresh with the new value.

There are many ways to accomplish this and it totally depends upon how the value is updated in the controller. One way is to take this variable (hasuser) in the inputHidden as below:

<apex:inputHidden value="{!hasUser}" id="checkUserID"/>

and reRender this id (checkuserId) after completing the action where in the hasUser values gets changed. After making this change you need to get this variable in your JavaScript function with the help of id attribute of apex:inputHidden. for ex: var user = document.getElementById('checkUserID');// Please note that you have to pass the full hierarchical id of the input hidden in the JavaScript like frm:checkUserID and so on to get the updated value.

Another thing is when you try to use any controller variable like '{!hasUser}' then JavaScript treats it as a string with true and false text.

Hope it will help you!!!