Async table and the client side problem

, ,
1

Hi,

I’m pulling in an IS service to a portlet, and results are being displayed in an Async table. No problem.
I’ve added a javascript block to my view, when the page is loaded, some specific columns change the style with another color, but when i display the 10 next result, the table lost the javascript effect. The objective here is to have the same style on the table even if i switch the next or previous result.
When I run this, the column appears in the wished style,…but i can foun the event “onload” for the async table for the client side of this controle.

Thanks for any and all help.

2

The table paging for an async table is a partial page refresh (ajax). It appears that you are using the onload handler to run your script? There isn’t an onload event for the partial page refresh so your code would not run in that scenario.

Perhaps you could attach a refresh complete listener to the table control to do the same logic?

For example:


var tableModel = CAF.model("#{caf:cid('tableId_here')}");

//create a listener to get a callback when the table is refreshed
var listenerFn = function(refreshedId) {
    //TODO: do your custom script here.
};
tableModel.addRefreshCompleteListener(listenerFn);
3

Thank you Eric for your reponse :wink:
but i don’t know where have i to put the code example u sent me?

in my page CAF i put a script block that contains a javascript function “function detectDiffLines()” and a window.onload=detectDiffLines

u r right, the prevNext control of the async table use ajax to refresh result, i don’t know exactly where i have to put ur example !!

can u give me more details ?

thanks and regards

4

You can just add the additional javascript code to the content of your existing script block.

For example, you could probably just reuse your existing function like this:


var tableModel = CAF.model("#{caf:cid('tableId_here')}");
tableModel.addRefreshCompleteListener(detectDiffLines);
5

Thank you Eric, the code work very well with my script, this how my script block looks :


function deltaVersions(){
var arrayLignes = document.getElementById("jsfwmp21190:defaultForm:asyncTable").rows; //recovering the lines of the table
var longueur = arrayLignes.length;//so we can apply the property length

for(var i=3; i<longueur-1; i++)//can directly set the variable i in the loop
{
                var arrayColonnes = arrayLignes[i].cells;//cells were recovered from line
                var largeur = arrayColonnes.length;
                

                               var dev = arrayColonnes[1].innerHTML;
                               var int = arrayColonnes[3].innerHTML;
                               var prep = arrayColonnes[5].innerHTML;
                               var prod = arrayColonnes[7].innerHTML;

                               if(dev!=int || prep!=prod || int!=prep || dev!=prod)//if delta between env
                               {
                                               arrayLignes[i].style.backgroundColor = "#EE7600";
                               }
                }
                //asynch for pagination
                var tableModel = CAF.model("#{caf:cid('asyncTable')}");
                tableModel.addRefreshCompleteListener(deltaVersions);
                
}
window.onload=deltaVersions;

just a small issue i found, the looding of the table become a little slow, dont’t know if that’s belong of the call of the addRefreshCompleteListener method in the body of my function?
another issue, in the top of my function, i use the name of the table from the name i got in the page html source “jsfwmp21190:defaultForm:asyncTable”, so the script is not portable, i have to change this name if i use it for another view, have u any method how to get this element from the id of the table?

Thanks again :wink:

6

You can dynamically calculate the client-side id of the table with an expression.

For example, change this:


var arrayLignes = document.getElementById("jsfwmp21190:defaultForm:asyncTable").rows;

to this:


var arrayLignes = document.getElementById("#{caf:cid('defaultForm:asyncTable')}").rows;
7

Thank you very much :wink: