CODEWITHSUNDEEP
javascriptjsf
user3848979
user3848979

Reputation: 31

using a javascript variable in jsf

I want to show/hide a table on clicking for which I have used a javascript function as:

function changeTableStyle(){
    if(document.getElementById('incompleteMigratedTable').style.display=='none')
    {
        document.getElementById('incompleteMigratedTable').style.display = '';
    }
    else
    {
        document.getElementById('incompleteMigratedTable').style.display = 'none';
    }
}

where style none is by default given when page loads. In other file, which is included in this one I have created the button as 

<h:CommandLink  id="show_details"
                onclick="changeTableStyle()"
                value="View"
                style="margin-left: 2px;font-weight:bold;color:blue;" >
    <f:ajax execute="@this"
            immediate="true"
            render="incompleteMigratedTable"
            event="click" ajaxSingle="true"
            />
</h:CommandLink>

this functionality works perfectly but the requirement is when it shows the table, text of button should change to 'Hide' and vice-versa. Can we create a variable in javascript function and use it in h:commandLink somehow to achieve this?

Upvotes: 2

Views: 1590

Answers (3)

Ivaylo Petrov
Ivaylo Petrov

Reputation: 1172

You should be able to use:

<h:CommandLink  id="show_details"
                onclick="changeTableStyle(this)"
                value="View"
                style="margin-left: 2px;font-weight:bold;color:blue;" >
    <f:ajax execute="@this"
            immediate="true"
            render="incompleteMigratedTable"
            event="click" ajaxSingle="true"
            />
</h:CommandLink>

Then in the changeTableStyle function you will have the element directly.

function changeTableStyle(button_element){
    if(document.getElementById('incompleteMigratedTable').style.display=='none')
    {
        // set button_element title to hide
        document.getElementById('incompleteMigratedTable').style.display = '';
    }
    else
    {
        // set button_element title to show
        document.getElementById('incompleteMigratedTable').style.display = 'none';
    }
}

Upvotes: 1

RevanProdigalKnight
RevanProdigalKnight

Reputation: 1326

I would recommend changing your javascript slightly so that it can be used for more than one object (and changing your xhtml to work with it).

XHTML:

<h:CommandLink id="show_details"
               onclick="toggleVisibility(this,document.getElementById('incompleteMigratedTable'))"
               value="View"
               style=margin-left:2px;font-weight:bold;color:blue;">
  <f:ajax execute="@this"
          immediate="true"
          render="incompleteMigratedTable"
          event="click" ajaxSingle="true"/>
</h:CommandLink>

JavaScript:

function toggleVisibility(link,table) {
  if (table.style.display === 'none') {
    table.style.display = '';
    link.innerHTML = 'Hide';
  } else {
    table.style.display = 'none';
    link.innerHTML = 'Show';
  }
}

Upvotes: 2

user1983983
user1983983

Reputation: 4841

Append another JS-function in the onclick attribute, pass the button as argument and change the text there:

onclick="changeTableStyle();changeButtonText(this);"

And the JS-function:

function changeButtonText(btn) {
    btn.value = btn.value === 'View' ? 'Hide' : 'View';
}

You can also do both in changeTableStyle, depends on your structure and if you need to hide the table without changing the buttons text.

If you provide more details about your use case I could maybe give a more proper answer on this. But you definitely can not put a JS-variable as attribute in JSF.

Upvotes: 1

Related Questions