Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Highlighted
Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel
Accepted Solution

How to cut the length of the string i.e channel name here if it exceeds 20 characters or letters. The channel name is dynamically parsed from the xml sheet/file.

How to cut the length of the string i.e channel name here if it exceeds 20 characters or  letters. The channel name is dynamically parsed from the xml sheet/file.

 

 

 

my coe in the .js file is  

 

 

    


function generateHTMLMarkup(i, channel){
alert("this is lang"+str);
var str ="";
str += "<div class='ui-category-list-item-title-for-Global-Takeof'\">";
str += "<img class='img_chan'style='margin-top:10px;' src=\"" + channel['image'] + "\" />" +
"<a href=\"" + channel['link'] + "\">" + channel['name'].replace("Low",".") + "</a>" + "</div>";
str += "<div class='ui-list-item'>"+ "<a href=\""+ channel['link']+"\">"+"</a>"+" </div>";
alert("this is lang"+str);
return str;

}

 

 

 

 

 

nerateHTMLMarkup: function(i, channel){
alert("this is lang"+str);
var str ="";
str += "<div class='list1'\" >";
str += "<img class='img_chan' src=\"" + channel['image'] + "\" />" +
"<img class='img_chan' src=\"" + channel['image'] + "\" />" +
"<a href=\"" + channel['link'] + "\" >" + channel['name'] + "</a>" +
"<img class='img_chan' src=\"" + channel['image'] + "\" />" + "</div>";
str += "<div class='ui-list-item'>"+ "<a href=\""+ channel['link']+"\">" + " </div>";
alert("this is lang"+str);
return str;

 

 

 

etc

 

 

Give mthe the pace and exact code where Ihave tio implement.

Regular Contributor
Posts: 65
Registered: ‎01-03-2013
My Device: 9810
My Carrier: Tmobile

Re: How to cut the length of the string i.e channel name here if it exceeds 20 characters or letters. The channel name is dynamically parsed from the xml sheet/file.

You can use if statement  to check the size of STR and if it was grader then 20 show only 20 charctor 

var STR = "your channel name";
if (STR.length > 20) {
STR = STR.substr(0, 20) ;
}

 hope it help 

-----
Please press the like button to thank the user that helped you.
Accept as a solution if it solved the problem.
Cheers
Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: How to cut the length of the string i.e channel name here if it exceeds 20 characters or letters. The channel name is dynamically parsed from the xml sheet/file.

Iam very new to .js    please guide me    where exactly should I write this code for cutting the length of string   i.e  channel name

 

 

var mstep="lang";
var mstep1="";
var mchannels = [];
var highURL = "-----------------------------------------------";
var lowURL = "--------------------------------------------------";
var wifiURL = "----------------------------------------------";
var finalURL = "";

function test_fn() {

var channels = mchannels;
var markup = "";
for(i=0; i < channels.length; i++){
var ch=channels[i];
if(ch['language']==mstep1) {
markup += generateHTMLMarkup(i, channels[i]);
}
}
document.getElementById("accordian").innerHTML = markup;
}

function generateHTMLMarkup(i, channel){
alert("this is lang"+str);
var str ="";
str += "<div class='ui-category-list-item-title-for-Global-Takeof'\">";
str += "<img class='img_chan'style='margin-top:10px;' src=\"" + channel['image'] + "\" />" +
"<a href=\"" + channel['link'] + "\">" + channel['name'].replace("Low",".") + "</a>" + "</div>";
str += "<div class='ui-list-item'>"+ "<a href=\""+ channel['link']+"\">"+"</a>"+" </div>";
alert("this is lang"+str);
return str;

}

 

var xmlDataSource = {

URL: "---------------------------------------------------------------",

init: function() {
//URL, success callback, failure callback
this.connect(this.URL, this.responseHandler, this.failureHandler);
},

/**
* Parses XML document into JS Object array
* @param xmlDoc XML Document
* @returns {Array} array of device objects
*/
parseResponse: function(xmlDoc) {

var chElements = xmlDoc.getElementsByTagName("channel");

var channels = [];

console.log(chElements.length);

for(var i=0; i < chElements.length; i++){

var channel = { };

for(var j=0; j < chElements[i].childNodes.length; j++){

var node = chElements[i].childNodes[j];

if(node.nodeType != 1){ //not an element node
continue;
}

channel[node.tagName] = node.textContent;
}

channels.push(channel);
}
console.log(channels.length);
mchannels=channels;

return channels;
},

/**
* Handles the response, and displays device data in web app
* @param xmlDoc
*/
responseHandler: function(xmlDoc) {

var channels = this.parseResponse(xmlDoc);
var markup = "";
var lngrow = 0;
for(lng=0; lng < channels.length; lng++){
//FOR LANGUAGE

if(lng<1){
markup += this.generateHTMLMarkup1(lngrow, channels[lng]);
}else{
var ch=channels[lng];
var ch1=channels[lng-1];

if(ch['language']==ch1['language']) {

}else{
lngrow++;
markup += this.generateHTMLMarkup1(lngrow, channels[lng]);
}
}
//markup += this.generateHTMLMarkup(i, channels[i]);
}

document.getElementById("accordian").innerHTML = markup;

},

/**
* Generates HTML markup to be inserted in to Web App DOM.
* @index i, index of the device
* @param device, device object
*/
/*
generateHTMLMarkup: function(i, channel){

var str ="";
str += "<div class='ui-category-list-item-title ui-close' id='item_title_"+i+"'" +
"onclick=\"mwl.setGroupTarget('#accordian','#items_"+i+"', 'ui-show', 'ui-hide'); " +
"mwl.setGroupTarget('#accordian','#item_title_"+i+"', 'ui-open', 'ui-close'); return false;\">";
str += "<img src=\""+ channel['image'] +"\" height=100% align=left />" + channel['name'] +"</div>";
str += "<div class='ui-category-list-item-body ui-hide' id='items_"+i+"'>";
str += "<div class='ui-list'>";
str += "<div class='ui-list-item'>"+ "id: " + channel['id'] +"</div>";
str += "<div class='ui-list-item'>"+ "type: " + channel['type'] +"</div>";
str += "<div class='ui-list-item'>"+ "language: " + channel['language'] +"</div>";
str += "<div class='ui-list-item'>"+ "bandwidth: " + channel['bandwidth'] +"</div>";
str += "<div class='ui-list-item'>"+ "cellnapid: " + channel['cellnapid'] +"</div>";
str += "<div class='ui-list-item'>"+ "link: " + "<a href=\""+ channel['link']+"\">Start video</a> </div>";
str += "</div></div>";
return str;
},*/
generateHTMLMarkup1: function(varlng, channel){
//alert(parseInt(varlng));
var str ="";
str += "<div class='list" + (varlng%2==0?1:2) + "'\" onclick=\"mstep1='"+channel['language'] + "';showTab();\">"+ channel['language'] +"<img style=\"float:right; margin-top:3px;\" src=\"arrow.png\" width=30 height=30/>"+ "</div>";////Changed test function
return str;

},
nerateHTMLMarkup: function(i, channel){
alert("this is lang"+str);
var str ="";
str += "<div class='list1'\" >";
str += "<img class='img_chan' src=\"" + channel['image'] + "\" />" +
"<img class='img_chan' src=\"" + channel['image'] + "\" />" +
"<a href=\"" + channel['link'] + "\" >" + channel['name'] + "</a>" +
"<img class='img_chan' src=\"" + channel['image'] + "\" />" + "</div>";
str += "<div class='ui-list-item'>"+ "<a href=\""+ channel['link']+"\">" + " </div>";
alert("this is lang"+str);
return str;

ge},




failureHandler: function(reason) {
document.getElementById("accordian").innerHTML = "Could not get XML document.<br>"+ reason;
},

/**
* Retrieves a XML resource in given URL by using XMLHttpRequest.
* @param url URL of the XML resource to retrieve
* @param successCb Called, when the XML resourece is retrieved successfully. Retreived XML Document is passed as argument.
* @param failCb Called, if something goes wrong. Reason in text format, is passed as argument.
*/

connect: function(url, successCb, failCb) {

var xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET", url, true);

xmlhttp.setRequestHeader("Accept","text/xml,application/xml");
xmlhttp.setRequestHeader("Cache-Control", "no-cache");
xmlhttp.setRequestHeader("Pragma", "no-cache");

var that = this;
xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 ){

if(xmlhttp.status == 200){

if(!xmlhttp.responseXML){
try {
//In case server didn't respond with correct MIME type for a XML file.
var domParser= new DOMParser();
var xmlDoc = domParser.parseFromString(xmlhttp.responseText,"text/xml");

successCb.call(that,xmlDoc);

} catch (e) {
failCb.call(that,"Response was not in a XML format.");
}

}else{
successCb.call(that,xmlhttp.responseXML);
}
}else{
failCb.call(that,"Connection failed: Status "+xmlhttp.status);
}
}
};
xmlhttp.send();
}
};

function showTab(){
document.getElementById("tabs").style.display = "block";
document.getElementById("headertext").innerHTML = "Please Select your desired bandwidth";
document.getElementById("accordian").innerHTML = "";
LoadParser();
}
function hideTab(){
document.getElementById("tabs").style.display = "none";
document.getElementById("headertext").innerHTML = "Please select your desired Language";
document.getElementById("accordian").innerHTML = "";
LoadParser();
}
function hideText(){
//document.getElementById("headertext").style.display = "none";
/*document.getElementById("headertext").innerHTML = "";*/
LoadParser();
}
function showText(){
//document.getElementById("headertext").style.display = "";
/*document.getElementById("headertext").innerHTML = "";*/
LoadParser();
}
function LoadParser(quality){
if(quality==="3g"){
finalURL = highURL;
}else if(quality==="wifi"){
finalURL = wifiURL;
}else{
finalURL = lowURL;
}
//alert(finalURL);

xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange=parseXML;
xmlHttp.open("GET",finalURL,true);
xmlHttp.send();
}

function parseXML()
{
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{
var str ="";
var output = xmlHttp.responseText;
parser=new DOMParser();
xmlDoc=parser.parseFromString(output,"text/xml");

var items = xmlDoc.getElementsByTagName("channel");
if(items.length>0){
for(i=0;i<items.length;i++){
if(items[i].getElementsByTagName("language")[0].childNodes[0].nodeValue==mstep1){
//alert(items[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);

str += "<div class='list" + (i%2==0?1:2) + "'\">";
str += "<img class='img_chan' style='margin:10px 0px; float:left;' src=\"" + items[i].getElementsByTagName("image")[0].childNodes[0].nodeValue + "\" />" +
"<a class='link_fon' href=\"" + items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue + "\">" +items[i].getElementsByTagName("name")[0].childNodes[0].nodeValue.replace("Low","").replace("Medium","").replace("High","") + "</a>" + "<img style=\"float:right; margin-top:30px;\" src=\"arrow.png\" width=30 height=30/>"+ "</div>";
str += "<div class='ui-list-item'>"+ "<a href=\""+ items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue+"\">"+" </div>";

/*alert("@@@@@@@2"+str);*/
}//if select according to language
}//for iteration
document.getElementById("accordian").innerHTML = str;
}//if length
}// if status
}

Regular Contributor
Posts: 65
Registered: ‎01-03-2013
My Device: 9810
My Carrier: Tmobile

Re: How to cut the length of the string i.e channel name here if it exceeds 20 characters or letters. The channel name is dynamically parsed from the xml sheet/file.

var STR = "your channel name";
if (STR.length > 20) {
STR = STR.substr(0, 20) ;
}

where are you assigning the channel name in your code send me that part of the code, it need more time read  and understand all your code

-----
Please press the like button to thank the user that helped you.
Accept as a solution if it solved the problem.
Cheers
Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: How to cut the length of the string i.e channel name here if it exceeds 20 characters or letters. The channel name is dynamically parsed from the xml sheet/file.

two  places

 

 

 

 function generateHTMLMarkup(i, channel){
    
        var str ="";
        str +=  "<div class='ui-category-list-item-title-for-Global-Takeof'\">";        
        str +=  "<img class='img_chan'style='margin-top:10px;' src=\"" + channel['image'] + "\"  />" +
                "<a href=\"" + channel['link'] + "\">" + channel['name'].replace("Low",".") + "</a>" + "</div>";
                str += "<div class='ui-list-item'>"+  "<a href=\""+ channel['link']+"\">"+"</a>"+" </div>";
                
        return str;

    }

 

 

 

 

 

 

generateHTMLMarkup: function(i, channel){
        alert("this is lang"+str);
        var str ="";
        str +=  "<div class='list1'\" >";        
        str +=  "<img class='img_chan' src=\"" + channel['image'] + "\"  />" +
                "<img class='img_chan' src=\"" + channel['image'] + "\"  />" +
                "<a href=\"" + channel['link'] + "\" >" + channel['name'] + "</a>" +
                "<img class='img_chan' src=\"" + channel['image'] + "\"  />" + "</div>";
                str += "<div class='ui-list-item'>"+  "<a href=\""+ channel['link']+"\">" + " </div>";
                    alert("this is lang"+str);
        return str;

        },

 

I have changed  to channe name  from channel name Low , channel name High , channel nmae Medium with the code below

 

 

 

 

        str +=  "<div class='list" + (i%2==0?1:2) + "'\">";        
        str +=  "<img class='img_chan' style='margin:10px 0px; float:left;' src=\"" + items[i].getElementsByTagName("image")[0].childNodes[0].nodeValue + "\"  />" +
                "<a class='link_fon' href=\"" + items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue + "\">" +items[i].getElementsByTagName("name")[0].childNodes[0].nodeValue.replace("Low","").replace("Medium","").replace("High","") + "</a>" + "<img style=\"float:right; margin-top:30px;\" src=\"arrow.png\" width=30 height=30/>"+ "</div>";
                str += "<div class='ui-list-item'>"+   "<a href=\""+ items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue+"\">"+" </div>";
                   

Regular Contributor
Posts: 65
Registered: ‎01-03-2013
My Device: 9810
My Carrier: Tmobile

Re: How to cut the length of the string i.e channel name here if it exceeds 20 characters or letters. The channel name is dynamically parsed from the xml sheet/file.

[ Edited ]
function generateHTMLMarkup(i, channel){
 
  // i am assigning your Channel name to channelName varbale
  var channelName = channel['Name'];
  if (channelName.length > 20) {
    channelName = channelName.substr(0, 20) ;
  }
       
       var str ="";
       str +=  "<div class='ui-category-list-item-title-for-Global-Takeof'\">";        
       str +=  "<img class='img_chan'style='margin-top:10px;' src=\"" + channel['image'] + "\"  />" +
               "<a href=\"" + channel['link'] + "\">" + channelName.replace("Low",".") + "</a>" + "</div>";
               str += "<div class='ui-list-item'>"+  "<a href=\""+ channel['link']+"\">"+"</a>"+" </div>";
               
       return str;
}





generateHTMLMarkup: function(i, channel) {
  
        alert("this is lang"+str);
        
        // i am assigning your Channel name to channelName varbale
        var channelName = channel['Name'];
        if (channelName.length > 20) {
          channelName = channelName.substr(0, 20) ;
        }
                
        var str ="";
        str +=  "<div class='list1'\" >";        
        str +=  "<img class='img_chan' src=\"" + channelName
                + "\"  />"
                + "<img class='img_chan' src=\""
                + channel['image']
                + "\"  />"
                + "<a href=\"" + channel['link'] + "\" >" + channelName + "</a>"
                + "<img class='img_chan' src=\"" + channel['image']
                + "\"  />" + "</div>";
       str += "<div class='ui-list-item'>"+  "<a href=\""+ channel['link']+"\">" + " </div>";
                    alert("this is lang"+str);
        return str;

},


 

-----
Please press the like button to thank the user that helped you.
Accept as a solution if it solved the problem.
Cheers
Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: How to cut the length of the string i.e channel name here if it exceeds 20 characters or letters. The channel name is dynamically parsed from the xml sheet/file.

No it is not working yamafarooq

 

 

instead it is not showing my channel images also.

 

 

I willgive another try any how.

 

 

 

Regular Contributor
Posts: 65
Registered: ‎01-03-2013
My Device: 9810
My Carrier: Tmobile

Re: How to cut the length of the string i.e channel name here if it exceeds 20 characters or letters. The channel name is dynamically parsed from the xml sheet/file.

Can you check the array name and element name, it could be due to wrong spelling, try console log after to check the element names in code i have send.

 

NOTE: I have update the code see you need to change some part of the code

 

and can you send me the console log result add the line after if statement

 

add

 

console.log("the channel name is :" +channelName);

 

i have checked the code and it gives the right result see the picture, the value of alert is 20 characters  only 

 

 

 

 

ddde.JPG

-----
Please press the like button to thank the user that helped you.
Accept as a solution if it solved the problem.
Cheers
Regular Contributor
Posts: 65
Registered: ‎01-03-2013
My Device: 9810
My Carrier: Tmobile

Re: How to cut the length of the string i.e channel name here if it exceeds 20 characters or letters. The channel name is dynamically parsed from the xml sheet/file.

in the code change the change

var channelName = channel['Name'];

 

to

 

var channelName = channel['name'];

-----
Please press the like button to thank the user that helped you.
Accept as a solution if it solved the problem.
Cheers
Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: How to cut the length of the string i.e channel name here if it exceeds 20 characters or letters. The channel name is dynamically parsed from the xml sheet/file.