jQM - data role none Demo

by Nibin George

HTML

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" id="chefPlaceOrder">
    <div data-role="header">
        <h1>Chef Details</h1> 
    </div>  
    <div data-role="main" class="ui-content">
        <p id="todaySpecial"></p>
        <a href="#foodOption" class="ui-btn">Back to list</a>
    </div>    
</div> 

<div data-role="page" id="foodOption">
    <div style="width: 100%; margin-top:21%; margin-left: 1%; color: black;">
                    <ul data-role="listview" id="listOfFoodOptions" data-inset="true">
                        <li data-chefid="1"><a href="#" style="text-decoration:none;"> <img alt="chef" src="http://lorempixel.com/20/20/food/1/" width="20px" height="20px" />Chef'+ value.Chef.Name +' is cooking'+ value.Chef.Item +'</a>
                            </li>
                    </ul>
    </div>
</div>

CSS

#text {
    border-radius: 0 !important;
}

JavaScript

$(document).ready(function(){
            $("#listOfFoodOptions li").on("click",function(){    
                var Id = $(this).jqmData("chefid");
                alert(Id);
                $("#todaySpecial").text("Details for chef with ID = " + Id);
                /*$(":mobile-pagecontainer").pagecontainer("change", "#chefPlaceOrder", {transition : "slide"});*/
            });
            
   });