CODEWITHSUNDEEP
jsfprimefaces
dan
dan

Reputation: 91

JQuery works on page load, but not after

I have the following JQuery on a page.

$("." + clazz).on("mousedown", function() {
    $(this).removeClass(clazz);
    $(this).addClass(clazzPressed);
});
$("." + clazz).on("mouseup", function() {
    $(this).removeClass("clazzPressed");
    $(this).addClass("clazz");
    setCookie('cmpaid',$(this).attr('id'),1);
    divClickAction();
});

And this works just fine for me. However, I use some AJax and update somethings on a page. One the update happens, this code no longer works.

I suspect it has to do with it only being called on page load. Once I update my page, the new stuff doesnt know about it. Is there a way to update the new stuff to have this JQuery code too?

If it matters, this is the code that gets updated through Ajax:

<h:panelGroup id="urlList"  >
                <script src="/resources/scripts/divClick.js"/>
            <script src="/resources/scripts/cookie.js"/>
                <ui:repeat id="urlRepeater" value="#{uRLManagerManagedBean.urls}" var="url" >
                    <div id="#{url.id_value.toString()}" class="divClick" style="margin-bottom: 10px;margin-left: 15px;">            
                        <div style="float:right;">
                            <p:outputLabel value="#{url.category.category}" /><br/>
                            <p:outputLabel value="Embedded" rendered="#{url.isEmbedded}"/>
                        </div>
                        <p:graphicImage value="#{streamedContentManagedBean.image}"  styleClass="urlImageSize" style="float: left;min-width: 25px;"> 
                            <f:param name="id" value="#{url.image.idAsString}" />
                        </p:graphicImage>
                        <h:panelGrid columns="1" >
                            <p:outputLabel value="#{url.name}" />
                            <p:outputLabel value="#{url.url}" rendered="#{not url.isEmbedded}" />  
                            <p:outputLabel value="#{url.embed.url}" rendered="#{url.isEmbedded}" /> 
                            <p:outputLabel value="#{url.type.toString(url.type)}" />
                            <h:outputText value="#{url.description}" escape="false"/> 
                        </h:panelGrid>
                    </div>
                </ui:repeat>

                <h:panelGroup layout="block" class="cardBody" style="margin-bottom: 10px;margin-left: 15px;padding:10px 10px 10px 10px;" rendered="#{empty uRLManagerManagedBean.urls}" >
                    <h:outputLabel value="No Urls" style="font-size: 25px;color: white;"/>
                </h:panelGroup>
            </h:panelGroup>

It is JSF and gets updated later by some code. But this problem should be independent of that.

Upvotes: 0

Views: 103

Answers (1)

Zak
Zak

Reputation: 327

Place your javascript code in a function and then call that function on page load.

Then register a listener on the page for the preRenderView event:

<f:metadata>
    <f:event type="preRenderView" listener="#{backingBean.preRenderViewListener}"/>
</f:metadata>

In the listener method:

public void preRenderViewListener()
{
    RequestContext.getCurrentInstance().execute("someJavaScriptFunction()");
}

The JavaScript will be called again after every ajax request.

Upvotes: 1

Related Questions