Listview with many items is too slow when create - jquery-mobile

I work on mobile app using and phonegap , the app have JqueryMobile listview with many items
(more than 20 items li ) and every li have textbox and 3 radio buttons , when i try to create and refresh listview using this code :
$("#ListView").trigger('create').listview().listview("refresh");
It takes 15 second to create the listview .
any one know how i can speed the create of listview with many items?
below handelbar template that i used to populate listview:
<ul data-role="listview" data-inset="true" id="lstQuestions">
{{#each Data}}
<li data-role="fieldcontain" >
<label >{{DOrder}} - {{Title}}</label>
<fieldset data-role="controlgroup" data-type="horizontal" >
<input type="radio" name="rdo-{{ID}}" id="rdo-{{InspectionID}}-{{ID}}-3" value="3" data-theme="c" />
<label for="rdo-{{InspectionID}}-{{ID}}-3">Nothing</label>
<input type="radio" name="rdo-{{ID}}" id="rdo-{{InspectionID}}-{{ID}}-2" value="2" data-theme="c" />
<label for="rdo-{{InspectionID}}-{{ID}}-2">No</label>
<input type="radio" name="rdo-{{ID}}" id="rdo-{{InspectionID}}-{{ID}}-1" value="1" data-theme="c" />
<label for="rdo-{{InspectionID}}-{{ID}}-1">Yes</label>
</fieldset>
<fieldset data-role="controlgroup" class="fieldsetClass">
<label for="txt-{{ID}}">Comment</label>
<input type="text" id="txt-{{ID}}" name="txt-{{ID}}" value="{{Comment}}" />
</fieldset>
</li>
{{/each}}
</ul>

Qudah. I'm have been develop app with phonegap an jQuery Mobile. In jQuery Mobile, listview is very very slow. If have many item then ever never use listview. Solution: you should rewrite listview and ignore data-role="listview", your app will faster.
<ul>
<li>
<li>
</ul>
//very faster than
<ul data-role="listview">
<li>
<li>
</ul>

Related

Jquery Tab with radio button -> empty $_POST

I would like using JqueryUI tab with radio button.
Tab selection working well, but radio button selection don't work. Radio button still empty in my $_POST
Here is the source code :
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">
<label for="choice1">Nunc tincidunt</label>
<input type="radio" name="test" value="choice1" id="choice1" />
</a>
</li>
<li>
<a href="#tabs-2">
<label for="choice2">Protor lorem</label>
<input type="radio" name="test" value="choice2" id="choice2" />
</a>
</li>
</ul>
<div id="tabs-1">
My content 1
</div>
<div id="tabs-2">
My content 2
</div>
</div>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
Where is my mistake ?

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.
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>
Delete
</a>
</li>
Here is the jsfiddle of the code I have done so far.
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');

How to put an icon next to text fileld in jquery mobile?

I need to put an icon next to text field in jquery mobile.
<div data-role="fieldcontain">
<label for="card">Verification Number</label>
<input data-mini="true" type="text" name="card" id="card">
<a href="card.png">
<img src="questionicon.jpg">
</a>
</div>
First of all you have unclosed tags in your html code.
you have to close all the tags for the code working without errors.
the img and input tag are not close.
Here is a working Fiddle Demo for your needs
Have change a little bit your html code:
<div data-role="fieldcontain" id="myfield">
<label for="card">Verification Number</label>
<ul>
<li>
<input type="text" name="card" id="card"/>
</li>
<li>
<a href="#">
<img src="image.jpg" width="20px" height="20px" id="myimage"/>
</a>
</li>
</ul>
</div>

Jquery Mobile align text box

I have the following listview with text boxes. I wanted to get the same feel as the ipad.
How do I align the text boxes so are right below one another. Currently it looks mismatched.
<ul data-role="listview" data-inset="true" style="width:30%;">
<li data-role="fieldcontain">
<label for="name">First Name:</label>
<input type="text" name="fname" id="fname" value="" />
</li>
<li data-role="fieldcontain">
<label for="name">MI:</label>
<input type="text" name="mi" id="mi" value="" style="width:5%;" />
</li>
</ul>
Don't know why you needed to set style for ul and input tags.
But I have put together a fiddle with different styling you can achieve.
http://jsfiddle.net/nachiket/nnRPv/
Does any one of it helps?

How can I style the legend of jquery-mobile radio buttons like a list divider

Putting radio buttons in a fieldset with data-role="controlgroup", jquery-mobile renders them like an inset list, but the legend is simply text. I would like the legend to look like the list dividers of a list view.
So instead of this:
I would like something like that:
You could put the radiogroup inside of a listview, and use the listdivider style for the title. To get to a result which is similar to what you demonstrated, you need to remove some padding, margins and borders.
See this example: http://jsfiddle.net/zdMhF/
The code:
<div data-role="page">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Choose a pet:</li>
<li style="padding:0;border:0;">
<div data-role="fieldcontain" style="margin:0;">
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
</div>
</li>
</ul>
</div>
</div>​

Resources