[Silk UI Web] CharacterCount results in js error shown as feedback

Igor Kirtak

Question

We have this structure on our page: Table records, where each record contains some text and the expandable area wrapped in a web block. Clicking a hidden button shows the web block via ajax refresh. And inside of it, there is some amount of controls, including one or two CharacterCount controls.

Steps:
1. Expand the control in one of the rows (so that web block with counts is loaded via Ajax)
2. Ajax-refresh the whole table (in our case there are filters that you can change on page, I think it doesn't matter how it is refreshed)
Result: Error message popping up about "error in client script: Cannot read property 'length' of undefined".

Stack trace as shown in JS console:

_osjs.js?9_0_1_25:5 TypeError: Cannot read property 'length' of undefined

at callBackKeyUp (eval at <anonymous> (_osjs.js?9_0_1_25:18), <anonymous>:18:61)

at Object.bindEvents (eval at <anonymous> (_osjs.js?9_0_1_25:18), <anonymous>:11:13)

at .OnAfterAjaxRequest (_osjs.js?9_0_1_25:65)

at eval (eval at <anonymous> (_osjs.js?9_0_1_25:1), <anonymous>:2:15)

at _osjs.js?9_0_1_25:18

at Function.$.extend.globalEval (_osjs.js?9_0_1_25:18)

at OsEvaluateUserJavaScript (_osjs.js?9_0_1_25:5)

at OsExecuteJSONUpdate (_osjs.js?9_0_1_25:5)

at OsExecuteNextJSONUpdate (_osjs.js?9_0_1_25:5)

at OsExecuteJSONUpdate (_osjs.js?9_0_1_25:5)

As I understand, this happens in the javascript of CharacterCount, here:

function callBackKeyUp(){
        that.currValue = that.maxvalue - $(that.input).val().length;
        $(that.place).html(that.currValue);
    }

If I delete CharacterCount - the error stops happening.
It looks like for some reason the control executes it's function after ajax refresh, but since the web block containing it is missing by default - the target input is not found, and the CharacterCount itself is not there either.
One more thing - this happens only once on page, I mean you can only repeat the error again if refresh the page in browser.

Anybody seen this except me? Is there anything that can be done?

22 Mar 2016

Igor Kirtak

I have solved this by creating my own version of CharacterCount control. I just took source from SilkUI and simplified it. Logically, the only difference seems to be in that original version contained this call in event binding function:

osAjaxBackend.BindAfterAjaxRequest(bindEvents);

I don't know what's inside of that, but it is probably what caused problems.

My script is much shorter than original version (I mean textCounter() function in control's javascript), here it is:

function CharacterCount_init(inputSelector, counterSelector, limit) {
    var CharacterCount_update = function() {
        $(counterSelector).html(limit - $(inputSelector).val().length);
    }
    CharacterCount_update();
    $(inputSelector).keyup(CharacterCount_update);
}

I don't know, maybe I'm missing some understanding, if other things around in original script were important, but I have tested and my version works good, and without error.

23 Mar 2016

Douglas Wilkinson

Thanks for sharing Igor. Ran into this problem myself today. It's not a problem any more thanks to you!

05 Jul 2017

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines