Form Wizard Pro And JQuery Word Count

Posted by Shaun Geisert Friday, March 23, 2012 4:46:00 PM Categories: CSS jQuery MojoPortal

Here’s a quick n’ dirty example of how to do a friendly word counter within mojoPortal using a plugin I’ve used in the past: http://themeforest.s3.amazonaws.com/67_wordCounter/index.htm.  The jQuery as it is on that page needed minor alterations to work with mojo. One caveat I haven’t programmed around yet: Currently mojo prevents you from entering a css class with non-alphanumeric characters.  Because my need was somewhat trivial/urgent, I just went straight to the database, and entered “count[100]” for the css class of the question (within the sts_WebFormQuestion table), using these queries (first I gave the textarea a class of count150):

SELECT * FROM sts_WebFormQuestion WHERE CssClass = 'count150'
UPDATE sts_WebFormQuestion SET CssClass = 'count[150]' WHERE CssClass = 'count150'

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Word Count</title>
    <!-- Include jQuery Library -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function () {
            $("[class*='count[']").each(function () {
                var elClass = $(this).attr('class');
                var minWords = 0;
                var maxWords = 0;
                var countControl = elClass.substring((elClass.indexOf('[')) + 1, elClass.lastIndexOf(']')).split(',');

                if (countControl.length > 1) {
                    minWords = countControl[0];
                    maxWords = countControl[1];
                } else {
                    maxWords = countControl[0];
                }

                var textarea = $(this).find('textarea').eq(0);

                textarea.after('<div class="wordCount"><strong>0</strong> Words</div>');
                if (minWords > 0) {
                    $(this).siblings('.wordCount').addClass('error');
                }

                textarea.bind('keyup click blur focus change paste', function () {
                    var numWords = jQuery.trim(textarea.val()).split(' ').length;
                    if (textarea.val() === '') {
                        numWords = 0;
                    }

                    $(this).siblings('.wordCount').children('strong').text(numWords);

                    if (numWords < minWords || (numWords > maxWords && maxWords != 0)) {
                        $(this).siblings('.wordCount').addClass('error');

                        var words = $(this).val().split(/\b[\s,\.-:;]*/);
                        var content = $(this).val();
                        for (var i = maxWords; i < words.length; ++i) {
                            content = trimNonWords(content);
                            content = content.substring(0, content.length - words[i].length);
                        }
                        $(this).val(content);

                    } else {
                        $(this).siblings('.wordCount').removeClass('error');
                    }
                });
            });
        });

        function trimNonWords(str) {
            var col = str.length - 1;
            while (" ,.-:;".indexOf(str.charAt(col)) >= 0) {
                --col;
            }
            if (col + 1 < str.length) {
                return str.substring(0, col + 1);
            }
            return str;
        }
    </script>
</head>
<body>
    <div class="settingrow qparagraph require count[10]">
        <label for="ctl01_mainContent_ctl00_ctlfa584558e79e45608bd4bcadb1073c82_txtfa584558e79e45608bd4bcadb1073c82"
            id="ctl01_mainContent_ctl00_ctlfa584558e79e45608bd4bcadb1073c82_lblfa584558e79e45608bd4bcadb1073c82"
            class="settinglabel">
            Your Answer (10 words max)</label>
        <br class="clear">
        <textarea name="ctl01$mainContent$ctl00$ctlfa584558e79e45608bd4bcadb1073c82$txtfa584558e79e45608bd4bcadb1073c82"
            rows="7" cols="60" id="ctl01_mainContent_ctl00_ctlfa584558e79e45608bd4bcadb1073c82_txtfa584558e79e45608bd4bcadb1073c82"></textarea>
        <span id="ctl01_mainContent_ctl00_ctlfa584558e79e45608bd4bcadb1073c82_valfa584558e79e45608bd4bcadb1073c82"
            style="visibility: hidden;">*</span></div>
</body>
</html>
Comments are closed on this post.