using a javascript variable in jsf

Question

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?

So you want on a button click to change the visibility of a table and change the title of the button from show to hide or the other way around? — Ivaylo Petrov
– Ivaylo Petrov, Commented Jul 17, 2014 at 12:07
yes, the visibility function is working, I am not able to change the text of the button on clicking. These two snippets are in different xhtml files, ajax code is included in javascipt code file and since its a dynamic code, I am not able to find the id of commandLink tag. — user3848979
– user3848979, Commented Jul 17, 2014 at 12:15
BTW be careful with style.display = '' some browsers don't like it! They want a value and throw error for an empty value. Try style.display = 'initial' instead — frikinside
– frikinside, Commented Jul 17, 2014 at 12:34

RevanProdigalKnight · Accepted Answer · 2014-07-17 12:31:02Z

2

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';
  }
}

edited Jul 17, 2014 at 12:31

answered Jul 17, 2014 at 12:25

RevanProdigalKnight

1,3261 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3848979 Over a year ago

Thanks a lot.Its working perfectly. I was not aware of innerHTML feature as I am novice in Javascript. Will keep in mind.

RevanProdigalKnight Over a year ago

@user3848979 If that works, you should mark it as the answer so that the question is marked as resolved.

user1983983 · Accepted Answer · 2014-07-17 12:24:51Z

1

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.

answered Jul 17, 2014 at 12:24

user1983983

4,8412 gold badges18 silver badges24 bronze badges

Comments

Ivaylo Petrov · Accepted Answer · 2014-07-17 12:38:18Z

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';
    }
}

Collectives™ on Stack Overflow

using a javascript variable in jsf

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related