Change only that list item background if the list service return different response from storage variable

[Mark Wong]

I've used a list service to list objects out
What I want to achieve is when the label in that list item is not equal to a local storage variable, the background of that list item will change (only that list item)
(I know how to set the background - Appery('mobilelistitem_197').css('background-image','url("http://i.imgur.com/Jw2JC0H.png")');

[Alena Prykhodko]

Hello Mark,

You can run custom JavaScript to check the values on "Value change" event and depending on result change background.

[Mark Wong]

Sorry I don't understand,
The code I've used:
codevar flip = Apperyio('mobilelabel_205').text();
var user = Apperyio.storage.user_name.get();
if (flip != user){
Appery('mobilelistitem_197').css('background-image','url("http://i.imgur.com/Jw2JC0H.png")');
}/code

It only change the first item rather than all the items that meet the requirement

[Yurii Orishchuk]

Hi Mark,

It's better to use following solution:

1. In Success mapping. Add link from $ - listItem/grid.

2. Click JS on this link.

3. Use following JS code:

   pre

   if(value.someVariable == "incomming"){
   jQuery(element).addClass("incomming");
   }
   else{
   jQuery(element).addClass("outcomming");
   };

   /pre

   Then you can use "incomming" and "outcomming" class to separate view in accordance with your requirements. For example you can set background, margins, paddings etc...

   Regards

[Mark Wong]

Hi Yurii,
So I need to create a new CSS script and create these two new classes,
Right?
value.someVariable should I replace with anything?

[Mark Wong]

Here is a screenshot,
The list service response include "user_name" which I need to use for classifying whether should the background be 1 or 2
But how should I define it by using JS?
Thank you!

[Mark Wong]

Please Ignore the comment above.

There are no background changing happen to the listitems.
My CSS code
codebackground1{
background-image:url(http://i.imgur.com/Jw2JC0H.png);
}
background2{
background-image:url(http://i.imgur.com/5hftupF.png);
}
/code
Is there any error in my code?Because I use weinre debugger and everything seems ok.

[Yurii Orishchuk]

Hi Mark,

You forget dot before class names in the CSS rules:

pre

.background1{
background-image:url(http://i.imgur.com/Jw2JC0H.png);
}
.background2{
background-image:url(http://i.imgur.com/5hftupF.png);
}

/pre

Details: http://www.w3schools.com/css/css_sele...

Regards

[Mark Wong]

The CSS has blocked the background image changing

[Mark Wong]

Any progress?
I found out when I disable the background of
.ui-body-b, .ui-page-theme-b .ui-body-inherit, html .ui-bar-b .ui-body-inherit, html .ui-body-b .ui-body-inherit, html body .ui-group-theme-b .ui-body-inherit, html .ui-panel-page-container-b (flat-ui.css)&
.ui-body-b, .ui-page-theme-b .ui-body-inherit, html .ui-bar-b .ui-body-inherit, html .ui-body-b .ui-body-inherit, html body .ui-group-theme-b .ui-body-inherit, html .ui-panel-page-container-b (jqm.css)
the background image appear