CODEWITHSUNDEEP
javascriptjqueryhtmlcssjsf
dasLort
dasLort

Reputation: 1294

Simple CSS id-selector not working

Since I started working with JSF pages, I struggled with CSS selectors. I thought that I understood the basic concept but turns out I must be missing something. Of course I read http://api.jquery.com/category/selectors/ but my impression is that these examples are too simple for my use case. So here is what I got in minimalistic form:

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<ui:define name="center">
    <p:dialog header="Dialog" widgetVar="findParamDialog" resizable="false" id="findParamDlg" modal="true">
        <h:form id="findParamForm">
            <p:scrollPanel id="sp" mode="native">  
                <p:dataTable id="qPdt" var="p" value="..." rowKey="#{p}" selection=""
                 selectionMode="single">
                    <p:column>...</p:column>
                </p:dataTable>
            </p:scrollPanel>

        <script>
        $(document).ready(function() {
            $('#sp').on('click','tr',function() {
                var $item = $(this).closest("tr").find("td:nth-child(1)").text().trim();
                alert('ye');
            });
        });   
        </script>

        </h:form>
    </p:dialog>        
</ui:define>

When I click the row of my datatable I want the alert popup. On another xHTML page this is already working but the scenario is that there is no dialog that contains the scrollpanel.

Now, what I expect is that #sp refers to the one and only element with that id. But that's not working. Moreover, several tries to include the form (findParamForm\\:sp or \\:findParamForm\\:sp or #findParamForm\\:sp or findParamForm sp or findParamForm > sp) didn't work either. So what is my thinking mistake here? Why can't I just refer to sp with the id selector #?

I have the impression is has something to do with these so-called container elements. Please tell me what I am missing here. I am 99,9% sure that the script itself is working, so I suspect the selector. Thanks in advance

Upvotes: 0

Views: 237

Answers (2)

Kuba
Kuba

Reputation: 2089

Basically it's not too wise to access ids that are generated by JSF like

formId:namingContainerId:componentId

because they can change if you reuse your components. It's much wiser to access them by css class.

What you are doing though and what BalusC mentioned - You base your JavaScript(client side) code on a JSF XHTML(server side). JSF is a HTML generator, it generates HTML that is different in browser(when you analyze source code) than what you see in your text editor. I bet you have never seen a <h:panelGroup> tag in your browser. p:scrollPanel will simply generate a couple of <div> tags with some style.

If you really want to access a JSF component by it's ID like formId:componentId then you would have to escape colons, otherwise jQuery thinks they are some css pseudo selectors. Here's a snippet.

XHTML

<h:form id="formId">
    <h:panelGroup id="componentId" style="display: none;" />
    <h:panelGroup onclick="test('formId:componentId');" />
</h:form>

Output

<form id="formId" ...>
     <span id="formId:componentId" style="display: none;" />
     <span onclick="test('formId:componentId');" />
</form>

JavaScript

function test(id) {
     id = id.replace(/:/g, "\\:");
     $("#" + id).show();
}

or

function test(id) {
     element = document.getElementById(id);
     $(element).show();
}

Upvotes: 0

Balachandran
Balachandran

Reputation: 9637

typo error

$("#sp").on("click","tr",function() {
     ^^^^-----

Upvotes: 1

Related Questions