Search code examples
jquery-mobilecordovajquery-mobile-listview

Custom listview with checkbox, image and button in jQuery Mobile

I am working in Listview in jQuery Mobile dynamically. I can't make this design.

enter image description here

Code: 

<li data-role="list-divider" role="heading">Category</li>
<li id="305"> <a href="#" class="achk">    
<fieldset data-role="controlgroup" style="width:53px;">  
<input type="checkbox" name="checkbox_attribute_0" id="checkbox_attribute_0" data-iconpos="notext" />  <label for="checkbox_attribute_0" action="selectAttribute" data="test"></label> 
</fieldset>   
<label onclick="viewMessage(305, 0);" class="lblImage"  data-corners="false">    
<fieldset data-role="controlgroup" style="height:0px !important">   
<img alt="" src="img/letter.png" />  
</fieldset>   
</label>  
<div onclick="viewMessage(305, 0);" >   
<h4>Advanced-customization-Jquery-Mobile-Buttons </h4>
<p>Advanced-customization-Jquery-Mobile-Buttons</p><p>Date  : November 15, 2013</p> 
</div>   
<a href="#" onclick="deleteMessage(305, 0)">Delete</a> 
</a>
</li>

Here is the jsfiddle of the code I have done so far.

Solution 
  • Add these lines in your function.    
   $("#inbox_list").trigger("create");
   $("#inbox_list").listview("refresh");

    Update Code

    $('#dvCount').html(data.count);                
 //$('input[type=checkbox]').checkboxradio().trigger('create');
 $('[data-role="listview"]').html( list ).trigger('create');                
 $('[data-role="listview"]').listview('refresh');