Add Game Modue

jquery mobile

by gravitybox

HTML

<div data-role="page">

    
    <a  data-role="button" class="addGame">Add Game</a>

            <ul id='listview' data-role='listview' data-inset='true'></ul>

    </div>

CSS

.ui-hidden{
    display:none !important;
}

JavaScript

$(document).ready(function(){

    var gameSelector = '<li id="chooseGame"><span></span><select name="select-choice-0" id="select-choice-1" > <option value="Default">Select a Game</option><option value="GAME 1">GAME 1</option> <option value="GAME 2">GAME 2</option> <option value="GAME 3">GAME 3</option> <option value="GAME 4">GAME 4</option>  </select></li>'

    $(document).on('click', '.addGame', function(){
        
        $(this).addClass('ui-hidden');
        $("#listview").append(gameSelector); 
        $("#listview").append("<li class='addGame'>Add Game</li>"); 
        $("#listview").listview("refresh");
    }); 

    $(document).on('click', '.changeGame', function(){
        
        $(this).parent().append(gameSelector); 
        $(this).remove();
       $("#listview").listview("refresh");
       
    });     
   
    $(document).on('change', '#select-choice-1', function(){
          
         var gamename = $('#select-choice-1').val();
         $(this).parent().append("<li class='changeGame'>"+gamename+"</li>");
        $(this).remove();
       $("#listview").listview("refresh");
    
    }); 
    

  
});