Forum Stats

  • 3,853,841 Users
  • 2,264,285 Discussions
  • 7,905,471 Comments

Discussions

Content presenter, ADF and jQuery

GaganArneja
GaganArneja Member Posts: 33 Red Ribbon
edited Jul 9, 2018 5:47AM in WebCenter Portal

Hi All, using WCP 12.2.1.1

Have a custom content presenter template with custom pagination. The content presenter template displays some images on the screen.

This is all working fine. Pagination works fine too.

The twist is : I have a jquery function (fires on document.ready) that goes over every image in the page, decides if it is a landscape or portrait image, and applies css classes accordingly.

This jquery works alright till I click "Next" or "Previous" on my pagination links to load the next set of images. I cannot get my jquery function to run again for the fresh set of images.

I need my jquery function to run when the page is partially re-rendered, and not just when it is loaded.

What I have tried :

There is a jquery method ajaxComplete - a callback function whenever any ajax call is made on the page - this does not work with JSF

JSF specifies an alternative : jsf.ajax.addOnEvent - I tried this, but my function is still not called.

Added the library using : <h:outputScript name="jsf.js" library="javax.faces" target="head"/>

Here's my code : (slightly simplified)

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:dt="http://xmlns.oracle.com/webcenter/content/templates" xmlns:c="http://java.sun.com/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:cmfn="http://xmlns.oracle.com/webcenter/content/functions"> <af:resource type="javascript">         $(document).ready(function () {            jsf.ajax.addOnEvent(function(data) {               alert('This alert needs to be called even when Previous or next links are clicked');          });          });   </af:resource>   <c:set var="documentConnection" value="#{documentsService.defaultConnectionName}"/>   <c:set var="itemsPerPage" value="4"/>   <dt:contentListTemplateDef var="nodes">     <h:outputScript name="jsf.js" library="javax.faces" target="head"/>            <c:set var="numitems" value="#{fn:length(nodes)}"/>      <c:set var="maxpages" value="#{(numitems - numitems % itemsPerPage)/itemsPerPage + (numitems % itemsPerPage gt 0 ? 1 : 0)}"/>      <c:set var="maxpagesn" value="#{fn:replace(maxpages,'.0','')}"/>      <c:set var="iterfirst" value="#{(((empty viewScope.pageNum or viewScope.pageNum lt 1) ? '1' : viewScope.pageNum)  - 1) * itemsPerPage}"/>      <c:set var="prevdisabled" value="#{empty viewScope.pageNum or viewScope.pageNum le 1}"/>      <c:set var="nextdisabled" value="#{viewScope.pageNum eq  maxpagesn}"/>      <af:panelGroupLayout id="pglpgn" styleClass="paginator">         <af:link styleClass="ebabbutton" id="lprev" text="Previous" disabled="#{prevdisabled}" >            <af:setActionListener from="#{(empty viewScope.pageNum ? '1' : (viewScope.pageNum - 1))}" to="#{viewScope.pageNum}"/>         </af:link>                 <af:link styleClass="ebabbutton" id="lnext" text="Next" disabled="#{nextdisabled}">            <af:setActionListener from="#{empty viewScope.pageNum ? 2 : viewScope.pageNum+1}" to="#{viewScope.pageNum}"/>         </af:link>      </af:panelGroupLayout>      <af:panelGroupLayout id="pgl2"  partialTriggers="pglpgn">         <af:iterator first="#{iterfirst}" rows="#{itemsPerPage}" var="albumrow" varStatus="iterator" value="#{nodes}" id="it0">                     <af:panelGroupLayout  id="albumImageHolder" layout="vertical">                        <af:image shortDesc="#{albumrow.albumTitle}" styleClass="albumimg ebabimgfit" source="#{WCAppContext.applicationURL}/content/conn/#{documentConnection}/uuid/dDocName%3a#{docName}?rendition=web" id="thumbnail"/>                     </af:panelGroupLayout>                        </af:iterator>      </af:panelGroupLayout>   </dt:contentListTemplateDef></jsp:root>

Answers

  • Ravistar
    Ravistar Member Posts: 125 Blue Ribbon
    edited Jul 9, 2018 5:47AM

    Hi User,

    Follow below action points and let me know the result.

    01 Instead of using af:link use h:a tag and call java script function on onclick of pagination buttons.

    02 surround af:link with with h:a tag call java script function on onclick of pagination buttons.

    Thanks & Regards,

    Ravi

This discussion has been closed.