Finding elements id in a JSF dataTable via JQuery

Question

This is my jsf table:

<h:dataTable value="myBean.rows" var="b">
    <h:column>
    <div class="slider-range-min">                               
        <h:inputHidden id="buildingId" value="#{b.buildingId}" />
        <h:inputHidden id="amount" value="#{b.amount}" />
    </div>
   </h:column>
</h:dataTable>

Now, lets say, I have in JavaScript access to above 'div' via jQuery:

$(this).

I can access first inputHidden value this way: $(this).children[0].innerHTML, but my goal is to get this hiddenInput field via id(buildingId), because order of these hiddenInputs can change, so access through children[0] could be no longer valid. How to achieve this?

(13:52:12 16.03.2013)

Hmm, no of your solutions does not work. This is my JavaScript code:

 $(function() {
            $( ".slider-range-min" ).slider({
              range: "min",
              value: 37,
              min: 0,
              max: 700,
              stop: function( event, ui ) {
                  var buildingId = $(this).find('#buildingId').val();

                  console.log(buildingId);

As you can see, each div is a JQuery UI slider. Console prints 'undefined'. In html document one of these inputs in this table appears with id: "foodTableForm:foodTable:0:buildingId". So, as you can see, these id's are modyfied because of the table.

Why not `$('#buildingId').html()` ? Your question might be a little unclear. — Denys Séguret, Mar 16 '13 at 12:27
You want to *find* the `id` of the `input`, or find the `input` *using* the `id`? — David Thomas, Mar 16 '13 at 12:29
I can't get it in your way, because, these inputHidden elements are in table, so in HTML source, there would be no element with 'buildingId' id. — friko, Mar 16 '13 at 12:31
I have access to particular div in table via $(this). Now, I want to find in this div, element with 'buildingId'. It can't be done with $('#buildingId'), because this is a table, so there would be appended something to the id in html document. It can be done using $(this).children[0], but this is not complete solution because those input can change in future. — friko, Mar 16 '13 at 12:37

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

According to this answer, if a h:inputHidden is used more than once, the actual HTML will look like this:

<input type="hidden" id="form:0:hidden" name="nameofyourform:uniquenumber:buildingId" value="value" />

Assuming this is a reference to the div, you should be able to do one of two things:

var buildingId = $(this).find("input[name*='buildingId']").val();

*= is the 'contains' selector. The other option is to look at the source and figure out how the naming works. If the unique id is somehow equivalent to the row index in the table, you could find the row index of the table and build your id:

var rowId = $(this).closest('tr').index(); // add or subtract if the id of the field is off by a certain number...

var buildingId = $("#yourform:" + rowId + ":buildingId").val();

edited May 23 '17 at 12:11

Community

1
1

answered Mar 16 '13 at 12:35

scott.korin

2,537
2
23
36

1

@scott The rendered id would not be `buildingId` and it would be unique. – a better oliver Mar 16 '13 at 12:50
Edited based on a small amount of research into the h:inputHidden. :) – scott.korin Mar 16 '13 at 13:05
Thank's for answer, but I already used @zeroflag's solution, but hope your solution on finding id in this way will work :). – friko Mar 16 '13 at 13:08

score 0 · Answer 2 · answered Mar 16 '13 at 12:35

0

$(this).find('#buildingId').val()  // #{b.buildingId}

answered Mar 16 '13 at 12:35

makedon

331
1
10

No, this makes only sense if there is more than one element with this id, which would be illegal. – Denys Séguret Mar 16 '13 at 12:46
There is no perfect code. I agree that it is illegal, but it will work. – makedon Mar 16 '13 at 12:57
1

@makedon: "it is illegal, but it will work" really isn't the attitude to take. If it goes against the specification it *shouldn't* be done at all, regardless of whether it works or not. – James Donnelly Mar 16 '13 at 13:00

score 0 · Answer 3 · answered Mar 16 '13 at 13:01

0

You may not know the generated id, but you do know that it ends with buildingId (It should, at least).

So when you have access to the div via $(this) you can get the value with $(this).find("[id$='buildingId']"), where $means "ends with".

Maybe you have to replace id with name.

answered Mar 16 '13 at 13:01

a better oliver

26,330
2
58
66

Thank you zeroflagL, works perfectly ! Thank you for such awesome forum like stackoverflow, users are able to answer in few seconds :). – friko Mar 16 '13 at 13:05
Thank you for such an an awesome question ;) – a better oliver Mar 16 '13 at 13:13

Finding elements id in a JSF dataTable via JQuery

3 Answers3