Content of <f:view> not visible when using "Inspect element" in webbrowser

Question

I'm using JSF and Materialize to develop an e-commerce site. I had no problem so far: the form to insert new products in the db works fine, login and registration forms too. Now I'm trying to create a product's catalog, so I need to visualize on the page all the products, but the code isn't interpreted correctly. In inspect element, inside <div class="card-image"> there's no code.

Here's my products.jsp page:

<div class="row">
    <div class="col s12 z-depth-3">
        <div class="card">
            <div class="card-image">
                <f:view>
                    <h1>Products</h1>
                    <h:form>
                        <table>
                            <tr>
                                <th>Name</th>
                                <th>Price</th>
                            </tr>
                            <c:forEach var="product" items="#{productController.products}">
                                <tr>
                                    <td><h:commandLink
                                            action="#{productController.findProduct}"
                                            value="#{product.name}">
                                            <f:param name="id" value="#{product.id}" />
                                        </h:commandLink></td>
                                    <td>${product.price}</td>
                                </tr>
                            </c:forEach>
                        </table>
                    </h:form>
                </f:view>
            </div>
        </div>
    </div>
</div>

That's the page on the browser:

Instead if I use only the JSF code it works fine. Do you know how to fix that problem? Thank you all.

Answer 1

Don't use HTML DOM inspector in webbrowser to explore the JSF-generated HTML output. The HTML DOM inspector only shows browser's interpretation of the raw HTML output. In case browser doesn't recognize a certain element as per the doctype, or misses an element while it's expected as per the doctype, or finds an element in the wrong place as per the doctype, then the average webbrowser will leniently hide, autoinsert or move it (otherwise surely half of Internet would be broken).

Always look at raw HTML output by rightclick and View page source (or press Ctrl+U in Chrome) in case you want to explore the real JSF-generated HTML output.

My bet that you still see unparsed JSF/JSTL tags in there. This question is then already answered in JSF returns blank/unparsed page with plain/raw XHTML/XML/EL source instead of rendered HTML output. That HTTP 500 error in your browser console confirms this more. You're opening the page using .jsp extension instead of whatever is being mapped on FacesServlet which is apparently /faces/*. Note that while the answer deals with JSP's successor Facelets (JSP is deprecated in JSF more than 5 years ago), the same principle applies to JSP as well. You need to ensure that the FacesServlet is invoked in order to get JSF tags to run. In case you actually got a HTTP 500 error on that, then you should read (or search) the exception and stack trace for the answer.