Use radio buttons instead of Checkbox popup in Jquery Mobile Table

Question

Use radio buttons instead of Checkbox popup in Jquery Mobile Table

2.2k views Asked by SaurabhLP At 09 May 2013 at 05:52

Well searching for the code or plugin or anything similar to what i need...

SCREENSHOT:- enter image description here

The screenshot say it all, basically i want to embed radio buttons for column toggle in jquery mobile tables, so that user can get one column which he selects... Same like a radio button functions...

For the table we implement this line in our code:-

<table class="ui-responsive" data-role="table" data-mode="columntoggle"  data-column-btn-theme="d" data-column-btn-text="Click to select week's day..." data-column-popup-theme="c">

Is their a plugin for it or any custom code available? How to do this?

Original Q&A

There are 1 answers

**Gajotres** · Accepted Answer · 2013-05-09 13:39:25

Working example: http://jsfiddle.net/Gajotres/f5eTT/

Only difference to normal toggle table is that your main column must also be your first column.

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
                    <thead>
                        <tr>                        
                            <th data-priority="1">Movie Title</th>                            
                            <th data-priority="2">Rank</th>
                            <th data-priority="4">Year</th>
                            <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
                            <th data-priority="5">Reviews</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>                            
                            <td>1</td>
                            <td>1941</td>
                            <td>100%</td>
                            <td>74</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>                            
                            <td>2</td>
                            <td>1942</td>
                            <td>97%</td>
                            <td>64</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>                            
                            <td>3</td>
                            <td>1972</td>
                            <td>97%</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>                            
                            <td>4</td>
                            <td>1939</td>
                            <td>96%</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>                            
                            <td>5</td>
                            <td>1962</td>
                            <td>94%</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>                            
                            <td>6</td>
                            <td>1964</td>
                            <td>92%</td>
                            <td>74</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>                            
                            <td>7</td>
                            <td>1967</td>
                            <td>91%</td>
                            <td>122</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>                            
                            <td>8</td>
                            <td>1939</td>
                            <td>90%</td>
                            <td>72</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>                            
                            <td>9</td>
                            <td>1952</td>
                            <td>89%</td>
                            <td>85</td>
                        </tr>
                        <tr>
                            <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>                            
                            <td>10</td>
                            <td>2010</td>
                            <td>84%</td>
                            <td>78</td>
                        </tr>
                    </tbody>
                </table>
                <table data-role="table" id="table-test" data-mode="columntoggle" class="ui-responsive table-stroke">
                    <thead>
                        <tr>                        
                            <th data-priority="1">Movie Title</th>                            
                            <th data-priority="2">Rank</th>
                            <th data-priority="4">Year</th>
                            <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
                            <th data-priority="5">Reviews</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>                            
                            <td>1</td>
                            <td>1941</td>
                            <td>100%</td>
                            <td>74</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>                            
                            <td>2</td>
                            <td>1942</td>
                            <td>97%</td>
                            <td>64</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>                            
                            <td>3</td>
                            <td>1972</td>
                            <td>97%</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>                            
                            <td>4</td>
                            <td>1939</td>
                            <td>96%</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>                            
                            <td>5</td>
                            <td>1962</td>
                            <td>94%</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>                            
                            <td>6</td>
                            <td>1964</td>
                            <td>92%</td>
                            <td>74</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>                            
                            <td>7</td>
                            <td>1967</td>
                            <td>91%</td>
                            <td>122</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>                            
                            <td>8</td>
                            <td>1939</td>
                            <td>90%</td>
                            <td>72</td>
                        </tr>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>                            
                            <td>9</td>
                            <td>1952</td>
                            <td>89%</td>
                            <td>85</td>
                        </tr>
                        <tr>
                            <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>                            
                            <td>10</td>
                            <td>2010</td>
                            <td>84%</td>
                            <td>78</td>
                        </tr>
                    </tbody>
                </table>                
            </div>
        </div>    
    </body>
</html>

Javascript :

$(document).on('pagebeforeshow', '.ui-page', function(){ 
    alterTablePopup('table-column-toggle', 0);
    alterTablePopup('table-alt',0);    
});

function alterTablePopup(tableID, showColumnID) {    
    if($.mobile.activePage.find('#'+tableID).length > 0) {
        // First unsellect everything, we must trigger click event so table look could change  
        cleanTableColumns(showColumnID, tableID);

        $(document).on('popupafteropen', '#' + tableID + '-popup',function(event, ui) {
            var popup = $(this);        

            //Hide old fieldset
            popup.find('fieldset').hide();
            $.mobile.activePage.find('#radio-fieldset').remove();

            $('<fieldset>').attr({'data-role':'controlgroup','id':'radio-fieldset'}).appendTo(popup);
            popup.find('input').each(function(i){            
                (i === showColumnID) ?   $('<input>').attr({'name': tableID+'-radio','id': tableID+'-radio-'+i,'type':'radio','value':'v'+i,'checked':'checked','class':tableID+'-radio'}).appendTo('#radio-fieldset') :  $('<input>').attr({'name':tableID+'-radio','id':tableID+'-radio-'+i,'type':'radio','value':'v'+i}).appendTo('#' + tableID + '-popup #radio-fieldset');           

                $('<label>').attr({'for':tableID+'-radio-'+i}).text($(this).prev().find('.ui-btn-text').text()).appendTo('#' + tableID + '-popup #radio-fieldset'); 
            }); 
            $('[type="radio"]').checkboxradio();
            $.mobile.activePage.trigger('create');
        }); 

        $(document).on('popupafterclose', '#' + tableID + '-popup',function(event, ui) {
            var popup = $(this);  

            $.mobile.activePage.find('#radio-fieldset').remove();
            popup.find('fieldset').show();        
        });

        $(document).on('vmouseup', '#' + tableID + '-popup #radio-fieldset .ui-controlgroup-controls .ui-radio', function(e){ 
            if(e.handled !== true) // This will prevent event triggering more then once
            {        
                var selectedRadio = $(this).find('[type="radio"]').attr('id').replace(tableID+"-radio-","");
                cleanTableColumns(selectedRadio, tableID);
                e.handled = true;
            }    
        });     
    }
} 

function cleanTableColumns(columnNo, tableID){
    $('#' + tableID + '-popup').find('.ui-checkbox label').each(function(i){
        ($(this).hasClass('ui-checkbox-on')) ? $(this).trigger('vclick') : ''; // Unselect every selected field
        (i == columnNo) ? $(this).trigger('vclick') : ''; // select first for further use       
    });  
}

TechQA.

Use radio buttons instead of Checkbox popup in Jquery Mobile Table

There are 1 answers

Related Questions in JQUERY

Related Questions in JQUERY-MOBILE

Related Questions in JQUERY-MOBILE-CHECKBOX

Related Questions in JQUERY-MOBILE-RADIO

Related Questions in JQUERY-MOBILE-TABLE

Popular Questions

Popular Tags

Trending Questions