jquery mobile listview: how to dynamically set themes for individual
's

Question

I am using a jqm 1.3 Listview, and I am successfully capturing onClick.

  function handle_onClick( )
    { jQuery( "#my_panel li" )
        .each( function( )
             { jQuery( this ).attr( 'data-theme' , "a" ).trigger('refresh') ;
             }) ;
   }

see fiddle (EDIT: updated fiddle)

BUT the data-themes of the <li>'s are not being updated.

In practice my <li>'s will not be using the same theme.

Is there a way to pro-grammatically change them, individually?

What is `gf_Lc_handler__set_li_themes` in your fiddle ? Also where are you wiring up `handle_onClick`? — Nix, Mar 07 '13 at 14:20
sorry, I saved the fiddle before I changed that ... "gf_Lc_handler__set_li_themes" is supposed to be "handle_onClick" — dsdsdsdsd, Mar 07 '13 at 14:55
I updated it ... notice how it does not refresh the individual items until you do a mousemove event following the click event. — dsdsdsdsd, Mar 07 '13 at 14:58
You need to click "Set as base" to merge it into the original link. Problem with your code is that it sets every li to the new theme. Take a look at my answer how to do it individually. — Gajotres, Mar 07 '13 at 15:17

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

Here's a working example: http://jsfiddle.net/Gajotres/YNYnU/

$('#my_panel li' ).on( 'click' ,  function( argo_e ) { 
    $(this).attr('data-theme','d');
});

You were using wrong function to enhance listview markup. In this case we don't need to enhance listview markup, setting data-theme attribute to the correct li element is more then enough.

Also take a look at my other answer/article about this topis: https://stackoverflow.com/a/14550417/1848600. Every jQuery Mobile component has a distinct function used to enhance its markup, and every one of them is listed in that article.

And here's example of your code with my fix: http://jsfiddle.net/Gajotres/AeBuV/

edited May 23 '17 at 12:21

Community

1
1

answered Mar 07 '13 at 14:25

Gajotres

57,309
16
102
130

when I click, the
, the theme is not immediately updated, but rather it only updates once I mouseout of the

dsdsdsdsd

Mar 07 '13 at 19:23

yeah it seems that no matter what I do, the

's do not update their visual appearance until I mouseover/out of them individually ... hmmm

– dsdsdsdsd Mar 07 '13 at 19:36

score 1 · Answer 2 · answered Mar 07 '13 at 23:51

the key is to:

remove ui-btn-up-### and ui-btn-hover-### classes, using regex to pick them out of the long class string that jqm creates,
then addClass( ui-btn-up-NEW_THEME) ,
then update data-theme

see fiddle :

function handle_onClick( argoj_element , args_language_id )
  { 
    jQuery( "#my_panel li" )
      .each( function( )
        { var lvb_active = ( jQuery( this ).attr( 'data-lang_id' ) == args_language_id ) ;

          var lvs_theme_default = 'a' ; 
          var lvs_theme_active  = 'e' ;  
          var lvs_theme         = lvb_active ? lvs_theme_active : lvs_theme_default  ;

          var lvs_current_class  = jQuery( this ).attr('class')                   ;
          var lvs_removes        = lvs_current_class.match(/ui-btn-up-\w+/gi ).join( " " ) ;
              lvs_removes       += " "  ;
              lvs_removes       += (lvs_current_class.match(/ui-btn-hover-\w+/gi )||[]).join( " " ) ;
          var lvs_adds           = "ui-btn-up-" + lvs_theme ;

          jQuery( this ).removeClass( lvs_removes )  
                        .addClass   (  lvs_adds   ) 
                         .attr( 'data-theme' , lvs_theme ) ;  
         }) ;             
  }

This is excellent. However, I'd like a more baked-in approach. You just need to be able to update `data-theme` and `refresh` the list view. — Abdulsattar Mohammed, Aug 28 '13 at 09:18

jquery mobile listview: how to dynamically set themes for individual 's

2 Answers2

jquery mobile listview: how to dynamically set themes for individual
's