1

I'm new to JavaScript. I need help to modify this script. I want when I click on a table row to call the button below using the unique id of the button. 

$(document).ready(function(){
        $(selector).click(); //selector = h:commandLink
});


$(selector).find('tr').each(function(){ //selector = h:dataTable
        $(this).click(function(){
                $(selector).trigger('click'); //selector = h:commandLink       
        });
});

<h:commandLink id="lnkHidden" action="#{bean.pageRedirect}" style="text-decoration:none; color:white; display:none">

</h:commandLink>

Can you help me to solve this problem, please?

P.S This is the code of the table:

<h:form id="form" >
<!-- The sortable data table -->
<h:dataTable id="dataTable" headerClass="columnHeader" value="#{bean.dataList}" binding="#{table}" var="item">
    <!-- Check box -->
    <h:column>
        <f:facet name="header">
            <h:selectBooleanCheckbox style="margin-left: 0px;" value="#{bean.value}" class="checkall" >
                <f:ajax listener="#{bean.value}" render="@form" />
            </h:selectBooleanCheckbox>
        </f:facet>
        <h:selectBooleanCheckbox  onclick="highlight(this);" value="#{bean.value" >
            <!-- if the user deselects one row deselect the main checkbox -->
            <f:ajax listener="#{bean.deselectMain}" render="@form" />
        </h:selectBooleanCheckbox>
        <!-- Click on table code -->
        <h:commandLink id="lnkHidden" action="#{bean.pageRedirect}" style="text-decoration:none; color:white; display:none">

        </h:commandLink>
    </h:column>
    <!-- Row number -->
    <h:column>
        <f:facet name="header">
            <h:outputText value="№" />
        </f:facet>
        <h:outputText value="#{bean.value}" />
    </h:column>
..........

</h:dataTable>

This is part of the code generated into the web browser:

<tr class="">
<td>
<input id="form:dataTable:1:j_idt17" type="checkbox" onclick="jsf.util.chain(this,event,'highlight(this);','mojarra.ab(this,event,\'valueChange\',0,\'@form\')')" name="form:dataTable:1:j_idt17">
<a id="form:dataTable:1:lnkHidden" onclick="mojarra.jsfcljs(document.getElementById('form'),{'form:dataTable:1:lnkHidden':'form:dataTable:1:lnkHidden'},'');return false" style="text-decoration:none; color:white; display:none" href="#"></a>
</td>
<td>2</td>
<td>35435</td>
Improve this question
2
  • If you could be more complete, it would help. Toss up a JS Fiddle. Commented Apr 8, 2013 at 19:25
  • If Ian has answered your question, mark his as the chosen answer please. Commented Apr 9, 2013 at 13:31

3 Answers 3

Reset to default
2

With your use of JSP (or whatever language), the id attributes are what you want to use to target elements, but it's a little tricky since it generates them in a complex way.

Since you need to handle clicking on table rows, you could bind the event and trigger the click event like this:

$('table[id$="dataTable"]').find("tbody").on("click", "tr", function () {
    $(this).find('a[id$="lnkHidden"]').trigger("click");
});

This is required to be inside of the $(document).ready handler as well.

This will bind one click event handler to the <table>. When a <tr> is clicked, this handler runs, and this refers to the specific row. With that, I find the <a> (linkButton) contained in that row, with the specific id you're targeting, and trigger its click event.

The way I find the linkButton is with the "attribute" ([name]) and "ends with" ($=) selector. All of the generated elements have an id that ends with the original id set (with more information, used internally, at the beginning of the id)...it's just how the engine generates them.

I'm not sure what you were trying to do in your document.ready handler, but if need to trigger the click event for all commandLinks that we're targeting, you could use:

$('a[id$="lnkHidden"]').trigger("click");

So the final code I'd use is:

$(document).ready(function () {
    $('table[id$="dataTable"]').find("tbody").on("click", "tr", function () {
        $(this).find('a[id$="lnkHidden"]').trigger("click");
    }).on("click", 'a[id$="lnkHidden"]', function (e) {
        e.stopPropagation();
    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

It's not working properly. When I click on the table row nothing happens.
@PeterPenzov Sorry, I didn't realize that was also a problem. Please provide more of your HTML, otherwise you can read my update to my answer which assumes things
@PeterPenzov Just updated my answer again. I think this is what you were going for. Let me know if it works/helps
I don't why but something is completely wrong maybe in my code. It's not working.
Just a guess here, but you might be catching the bubble from the button. Here's the scenario: click on the <tr>, your event handler clicks on the <h:commandLink>, which then bubbles back up to the <tr>, which then clicks on the <h:commandLink>, and so on. This isn't a definite answer to your recursion, just a possibility.
|
2

Since events bubble up the DOM tree, if your <tr> is inside your <h:commandLink> then the click event will bubble up and fire.

If your <h:commandLink> is inside your <tr>, then your selection syntax is wrong. When you do: 

$(selector).find('tr')

This is attempting to find a descendant <tr> inside the <h:commandLink>.

One big thing is that your code as is is attaching event listeners on every single row in your table. This is bad practice since JavaScript events bubble. What you should do is something like this assuming what you want to click (selector) is actually inside your row:

$('table').on('click', 'tr', function() {
    $(this).find(selector).click();
});

This will bind an event handler to all <table>'s to listen for clicks on <tr> elements.

Improve this answer

Comments

1

You said when I click on a table row which means you need to register a click event for each rows and in this case you don't need to use each, instead you can use

$('table#dataTable').on('click', 'tr', function(){
    // here your code goes to click the button with ID lnkHidden
    $('#lnkHidden').trigger('click');

    // after the update of your question
    $(this).find('td:first a').trigger('click');
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.