jQuery Mobile dynamically change button color

Question

I have a list of buttons generated dynamically...

var output="";
var active;
var x;
var i;
var user_id=localStorage.get('user_id');#

for(x=0;x<dynamic_count;x++)
{
    output+="<div class='tbl' data-role='button' data-table_id='"+(x+1)+"'>";
    output+="<p class='center_text'>"+(x+1)+</p>";
    output+="<div>";
}

$('.table_holder').html(output).trigger('create');

//active and active_count come from AJAX request (I have missed this bit our of the code..active[0]=a table number where as active[1]= s user_id

for(i=0;i<active_count;i++)
{
    if(active[1]==user_id)
    {
        $('.tbl').find("[data-table_id='"+active[0]+"']").css('backgroundColor', 'red');
    }
}

Unfortunately this has no effect on the background color of the desired element. I am not sure whether it is a problem with my selector code, my css code, or a propblem with my implementation of jQuery Mobile.

I have noticed that when dynamically adding elements that need styling with jQuery Mobile I have needed to use the trigger('create') method to apply the css.

This obviously over writes any amended css with the original jQuery css.

You want something like this? fiddle.jshell.net/Palestinian/vGt2A active button styled differently. — Omar
– Omar, Commented Apr 28, 2013 at 10:30

Omar · Accepted Answer · 2013-04-28 20:25:34Z

2

First, create a custom class e.g. .custom-class

CSS: Note that !important is essential to override JQM default styles.

.custom-class { background-color: red !important; }

Code:

Find all buttons with [data-table_id] attribute, compare values and apply .custom-class

var buttons = $(document).find('a[data-table_id]');

$.each(buttons, function () {
 $(this).removeClass('custom-class');
 if ($(this).attr('data-table_id') == user_id) {
  $(this).addClass('custom-class');
 }
});

Similar demo

answered Apr 28, 2013 at 20:25

Omar

31.7k9 gold badges73 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

chandresh_cool · Accepted Answer · 2013-04-28 09:37:38Z

0

Try this

$('.tbl').find("[data-table_id='"+active[0]+"']").css('background-color', 'red');

you are trying to assign background color like this

$('.tbl').find("[data-table_id='"+active[0]+"']").css('backgroundColor', 'red');

in jquery you need to use background-color instead of backgroundColor

answered Apr 28, 2013 at 9:37

chandresh_cool

11.9k3 gold badges32 silver badges46 bronze badges

1 Comment

Sideshow Over a year ago

unfortunately this has no effect - I believe the problem lies with the way jQuery mobile adds to the html5

Collectives™ on Stack Overflow

jQuery Mobile dynamically change button color

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related