change dinamically background color in list item on mapping

[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

[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.

[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??

[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);

[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

[M&M]

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

[Jaime Vergara]

sure!!!.. 3 image

Thanks again

[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

[Yurii Orishchuk]

Hi Jaime,

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

Regards.

[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