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

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

  
Forge Component
(51)
Published on 15 Nov (10 days ago) by OutSystems R&D
51 votes
Published on 15 Nov (10 days ago) by OutSystems R&D
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?
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.

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