CODEWITHSUNDEEP
jqueryxpages
David Leedy
David Leedy

Reputation: 3593

Re-Initialize JQuery have XPages Partial Refresh updates DOM

I have a tabbed panel from the core controls and inside it is an <xp:inputText> which has a hook for some jQuery used to limit the field length. It works great if I have this tab on the screen when I change the page to edit mode. If however I am not on that tab and switch to edit mode and THEN change to the tab I want, it does not work.

I assume it's because these controls did not exist when jQuery fired up. Anyone know a way to have jQuery refresh itself to pick up the new DOM additions that weren't there on initial load?

This is the code that exists higher on the page : 

<xp:scriptBlock id="scriptBlock1">
        <xp:this.value><![CDATA[$('input[maxlength]').maxlength({
            alwaysShow: true,
            threshold: 10,
            warningClass: "label label-success",
            limitReachedClass: "label label-danger"
        });]]></xp:this.value>
    </xp:scriptBlock>

The field is this : 

<xp:inputText id="inputText2"
                        value="#{viewScope.vsWorkingContentAdd.description}">
                        <xp:this.attrs>
                            <xp:attr name="maxlength" loaded="true" value="75"></xp:attr>
                        </xp:this.attrs>
                    </xp:inputText>

Again, the code works, as it finds fields that already exists. This question is about in XPages when you do a partial refresh and an <xp:inputText> appears, how do you get jQuery to see it?

Upvotes: 2

Views: 169

Answers (1)

Gary Forbis
Gary Forbis

Reputation: 878

You are correct that objects which have attributes and events assigned through javascript will need them re-assigned after they are reloaded during a partial refresh. You can modify the script block to look something like this:

function setValidation() {
    $('input[maxlength]').maxlength({
        alwaysShow: true,
        threshold: 10,
        warningClass: "label label-success",
        limitReachedClass: "label label-danger"
    });
 }

$(document).ready(function() {
    setValidation(); // On page load
    dojo.subscribe('partialrefresh-complete', function(method, form, refreshId, options) {
        setValidation(); // On partial refresh
    });
});

Upvotes: 6

Related Questions