jquery - issue while freezing li tag in jquery mobile

Question

I dynamically created list view using Ajax and json with jQuery mobile everything works fine except 1 condition. i have to freeze 1st Li tag in list view to show as header. i tried data-position="fixed" but it's not working for Li tag. any other way to freeze 1st Li in list view??

example

here is my code.

function popupFunc(data, status) {

            var no = JSON.parse(data.d);


            // creating html string
            var PoplistCode = '<ul data-role="listview"  data-inset="true" data-theme="d"  id="customerList">' + '<li id="header" data-role="list-divider" data-position="fixed" data-inset="true" data-theme="a" >Code: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Name:</li>';

            // running a loop
            $.each(no, function (index, value) {
                PoplistCode += '<li><a href="home.aspx?Batch=' + this.dept + '">'  + this.id + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'  + this.id + '</a></li>';

            });

             PoplistCode += '</ul>';
//            //appending to the div
             $('#Popvalue').html(PoplistCode);

             $('#Popvalue').addClass("popheight");



//            // refreshing the list to apply styles
             $("#Popvalue").trigger("create");

             $.mobile.hidePageLoadingMsg();

        }

i dynamically creating li tags from json object. i need to freeze 1st li which is contain id as header.

Answer 1

try this:

change your first li element to this ==> <li data-role="list-divider">Menu</li>

working example HERE - FIDDLE

UPDATE FIDDLE:

FIDDLE-DEMO

what you have to do is to update your javascript with the id and class and add the style in your .css file

let me know if this is what you looking for