Forum | Appery.io

I have the following UI. What I need to do - is for each of the collapsible headers ( their names are 'header_week', 'header_month', 'header_quarter' , etc. ) --- I need to change the title on the header to:

Week - (nn) - where 'nn' is the number of data elements that satisfy the data query implied by the UI - date combination. I already have fetched these numbers from a server-side service that I wrote to get these numbers - and, the numbers are stored in localstorage vars.

I know I can address the text in the header by:

Appery('header_week').text(), and assign it the same way - however - when I do that - I loose the icon, and the nice formatting in the header. ( to do this - and the result was aweful looking - I did Appery('header_week').text( Appery('header_week').text.replace('Week', 'Week - (10)') ) - lost the icon, the format was huge, etc.

I assume I need some CSS to do this - can you help with a css suggestion to do this?

Hi Bruce,

Please use following JS code to change header text of the collapsible set:

precode

var headerElement = Apperyio("mobilecollapsblockheader_371").find(".ui-btn");
var textNode = headerElement[0].childNodes[0];

var currentText = textNode.nodeValue;
var count = 34;
var goalText = currentText.replace(/\[.+\]/gi, "").trim() + "[" + 34 + "]&quot
textNode.nodeValue = goalText;

/code/pre

Regards.

thanks Yurii !

Tweaked code to handle all my controls - and ended up with this ... Thanks! (my could be more elegant - but - it works great...)

in success event - for my service that gets the totals:
console.log('successful execution of service_get_totals...');
// redisplay the totals in the controls...

fupdateheaders( data );

function fupdateheaders( data ){
var aofheaders = [ ['header_week', 'week'] , ['header_month' , 'month' ], ['header_quarter', 'quarter'] , ['header_year', 'year'], ['header_beyond', 'beyond']];
var ncounter = 0;
var nlength = aofheaders.length ;
var headerElement;// = Apperyio("header_week").find(".ui-btn");
var textNode;// = headerElement[0].childNodes[0];
var currentText ;//= textNode.nodeValue;
var count ;
var goalText ; //week (" + count + ")" ;
var sprefix = '';

for ( ncounter = 0; ncounter < nlength; ncounter++ ){
headerElement = Apperyio( aofheaders[ ncounter ][0] ).find(".ui-btn");
textNode = headerElement[0].childNodes[0];
currentText = textNode.nodeValue;
switch ( ncounter ) {
case 0:
count = data.week ;
sprefix = 'Week:';
break;

     case 1: 
         count = data.month ; 
         sprefix = 'Month:'; 
         break; 

     case 2: 
         count = data.quarter; 
         sprefix = 'Quarter:'; 
         break; 

     case 3: 
         count = data.year; 
         sprefix = 'Year:'; 
         break; 

     case 4: 
         count = data.beyond; 
         sprefix = 'Beyond:'; 
         break; 

}
goalText = sprefix + " (" + count + ")" ;
// console.log('in transformation....');
textNode.nodeValue = goalText;
}
return ;
}