Issue with dynamically changing data-theme in split button listview

Question

I am trying to follow the outline in this thread to dynamically change the color swatch of a split button list view by changing the data-theme. Interestingly, the scheme works when I put in an alert statement in the javascript, but when I take the alert out, this doesn't work well.

Here is the sample:

With alert: http://jsbin.com/ifodij/4/
Without alert: http://jsbin.com/ifodij/3/ (try toggling on two buttons before trying to toggle off)

Any suggestion as to why this is happening and what I might be missing? Thanks.

Jeemusu · Accepted Answer · 2012-09-03T07:33:46.627

I'm not too sure as to the cause. But this is how I would re-write what you are doing (which appears to fix the problem):

Firstly, remove your inline javascript (onclick="toggleChecked('2', 'TR02')") from the HTML.

Next, replace your toggleChecked() function with the following javascript:

$(document).ready(function(){
   $('a[id^="star"]').on("click", function(){

      if ($(this).data("theme") == "d") {
         $(this).buttonMarkup({ theme: 'e' }).button();
      } else {
         $(this).buttonMarkup({ theme: 'd' }).button();
      }
   });
});

The above is an event listener, that will check to see when any anchor with an id starting with star is clicked.

Refreshing the button appears to be a bit buggy, often classes from the previous theme hang around despite rebuilding the button.

UPDATE

Actually scrap the above, it seems like such a convoluted way of achieving a selected button. Why not just change the CSS, using the above as a guide, remove the inline styles and use the following jQuery:

$(document).ready(function(){
   $('a[id^="star"]').on("click",function(){
      $(this).toggleClass("ui-btn-pressed");
   }); 
});

Here is a jsbin: http://jsbin.com/ifodij/8/edit

Thanks for taking the time to reply. I also need the number after star in the ID, either by directly passing to a function (which is what I was trying to do), or by some other means. I need to update the theme and do some other stuff. Any ideas? — Samik R, Sep 03 '12 at 15:19
Moving "$(this).toggleClass('ui-btn-pressed');" into the toggleChecked() function seems to solve it nicely. Thanks again. — Samik R, Sep 03 '12 at 15:30
No problems. Using my code, you could get the id's number by doing something like `var id_number = $(this).attr('id').replace('star',''); ` . Just pop it after the toggleClass line. http://jsbin.com/ifodij/9/edit — Jeemusu, Sep 04 '12 at 01:12

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

unfortunately the above accepted answer didnot work for me to change the split icon theme, I solved my problem form here $(this).find('span.ui-btn').buttonMarkup({ theme: 'b' });

edited May 23 '17 at 11:55

Community

1
1

answered Dec 02 '13 at 12:50

shyam.y

1,441
1
16
17

Issue with dynamically changing data-theme in split button listview

2 Answers2