Javascript Input Selector

Question

I currently have a character counter implemented on a visualforce page that includes a flow using this method.

I would like to use this same method to count characters on a field in another visualforce page. This page is a template for our payment processing site (powered by Linvio PaymentConnect.) In order to collect custom fields, we must identify them within the donation page record inside Salesforce. Linvio then uses its managed package components to display these fields. Here is an example of what it looks like when you create a custom field:

My issue is occurring when trying to identify the field I'd like to count characters on. If I view the source code on the final visualforce, I'm given:

<td class="fieldColumn " id="siteDonationPage:SiteTemplate:pc_donation_form:customFieldTable:0:j_id124" colspan="1">

<input id="siteDonationPage:SiteTemplate:pc_donation_form:customFieldTable:0:customText" type="text" name="siteDonationPage:SiteTemplate:pc_donation_form:customFieldTable:0:customText" />

</td>

The code I'm using inside my visualforce to define the field is:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="{!URLFOR($Resource.CharCounter)}" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){

        $("[id$=0:customText]").jqEasyCounter({
            'maxChars': 65,
            'maxCharsWarning': 50
        });

    });
    </script>

I've also tried the following id's in place of "0:customText" above with no success:

• customText
• siteDonationPage:SiteTemplate:pc_donation_form:customFieldTable:0:customText

Could someone please help me provide a character counter on this field. Thanks in advance.

PS: Here is my original post for a similar situation that was resolved

Answer 1

It is probably easier to use a class selector:

<apex:inputField value="{!record.Field__c}" styleclass="max65Char">
<script>
    (function ($) {
        "use strict";
        $(function () {
            $(".max65Char").jqEasyCounter({/*options*/});
        });
    }(jQuery));
</script>

If you have no way to change the markup, you would probably want a component specific selector (e.g. replace "max65Char" with "textArea"). To add it to a specific field, you would need a more thorough understanding of the incoming markup. If it is fairly static you could work with :nth-child(n) selectors and just set it so the nth field has a character maximum.