Page 1 of 2

change dinamically background color in list item on mapping

Posted: Thu Feb 05, 2015 11:52 pm
by Jaime Vergara

Hi..
I have a itemlist. it's populate with REST Service. From the REST service's result I can get a diferent color (ex #CECECE) for any $. So, I want to use that color and change the item list. I put this in JS for the itemlist on mapping

element.attr("data-item-id", value.idRubro);
element.attr("data-item-count", value.NumCliente);
element.css("background", value.sColor);

the third line does not work. I've tried several ways bur I cant success.
PLease let me now

Thanks


change dinamically background color in list item on mapping

Posted: Fri Feb 06, 2015 5:06 am
by Yurii Orishchuk

Hi Jaime,

It should work,

Please try following code to be sure that code works.

pre

element.attr("data-item-id", value.idRubro);
element.attr("data-item-count", value.NumCliente);
element.css("background", "#f00");

/pre

And test it if you will have "red" collor items - it means - your code works. And the problem in your "value.sColor" variable.

Regards.


change dinamically background color in list item on mapping

Posted: Fri Feb 06, 2015 4:10 pm
by Jaime Vergara

Hi.. thank you for reply.

But is not working.

I'm using flat-ui theme.
This mi success- mapping - $

code in function (value, element) {

element.attr("data-item-id", value.idRubro);
element.attr("data-item-count", value.NumCliente);
element.attr("data-item-nombre", value.sNombre);
element.css("background", "#f00");
console.dir(value.sNombre+"-color="+value.sColor);

//try
//element.parents("li").css("background-color", value.sColor);
//element.css("background-color", "#EB3827");
//element.css("background", value.sColor);
//element.parents("li").css("background", value.sColor);
//Appery('mobilegrid_XX').css('background', '#000000');
//$(".ui-li-static-container").css("background-color", value.sColor);

what's error code??


change dinamically background color in list item on mapping

Posted: Fri Feb 06, 2015 6:36 pm
by M&M

Try this jaime

$(element).css("background-color", #000000);

Once tested that the above works, then replace the #000000 (black) with your own colour that you get from database

$(element).css("background-color", value.sColor);


change dinamically background color in list item on mapping

Posted: Fri Feb 06, 2015 7:55 pm
by Jaime Vergara

Hi and thanks

When I put yout code

$(element).css("background-color", "#000000");

in each tag now appear style="background-color: rgb(0, 0, 0);"... but nothing happen

then, in debug mode I set style="background-color: rgb(0, 0, 0);" in the tag inner tag and the listitem put on black.

so How can I set the DIV tag JS function??
Thanks again for your help


change dinamically background color in list item on mapping

Posted: Sat Feb 07, 2015 4:29 am
by M&M

can I see a screenshot of your mapping with the JS?


change dinamically background color in list item on mapping

Posted: Sat Feb 07, 2015 6:41 am
by Jaime Vergara

sure!!!.. 3 image

Thanks again

Image Image Image


change dinamically background color in list item on mapping

Posted: Sat Feb 07, 2015 8:03 am
by M&M

Seems like everything is in place. The simplest way to narrow down is this

Place another list item on the page. Leave all the defaults of the list item as it is.
Do a mapping for only the array

And in that JS add just this one line:
$(element).css("background-color", #000000);

See if all the list items are in black. Then let me know. Probably it is one of the properties. Hope you are have not added any new / other properties. Btw I am not sure but you may want to have a look at the list item property called "Linked". Try toggling it and also try using a swatch rather than inheriting it, just for a test


change dinamically background color in list item on mapping

Posted: Mon Feb 09, 2015 5:34 am
by Yurii Orishchuk

Hi Jaime,

Please give us your app public link and describe steps to see this list.

Regards.


change dinamically background color in list item on mapping

Posted: Mon Feb 09, 2015 10:07 pm
by Jaime Vergara

I did test in a new page and it's worked.

Now I know why fail.... I have 2 label in the list item and appery add a DIV tag in each LI tag.. (see next code)

So the question is: How I can reach by code in JS section to put background-color in the DIV tag inside the LI tag???

Thanks again

Code: Select all

                         <!-- lblRubro -- 

                         <!-- lblTag -- 

                         span class="ui-li-count" 
                             0 
                         /span