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.

Answer 1

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