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');
Related
I wanna add flip switch at right side of header using jquery mobile. I tried this but it goes to next line.
<div data-role="header" >
<a href="#main-panel" class="ui-btn ui-btn-c ui-btn-corner-all ui-alt-icon ui-nodisc-icon ui-btn-icon-notext ui-icon-bars" ></a>
<h1>Flowers</h1>
<fieldset>
<div data-role="fieldcontain" class="">
<input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch" data-on-text="True" data-off-text="False">
</div>
</fieldset>
</div>
All you need to do is to place your flipswitch inside of a "control-group" element.
<fieldset data-role="controlgroup" data-type="horizontal" class="ui-btn-right">
<input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch" data-on-text="True" data-off-text="False">
</fieldset>
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 ?
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>
Hi can you please tell me how to hide and show a div in query mobile.
May be i have two solution use hide and show function.
Or use toggle class ?
here is my fiddle.
http://jsfiddle.net/ravi1989/3LEdJ/2/
I need to show or hide on click of "openclosebutton" .This div
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h" >Search</a>
</div>
<div class="ui-block-c">
Next
</div>
<div class="ui-block-d">
Previous
</div>
<div class="ui-block-e">
close
</div>
</div>
The probem you have is the width of the text field. I suggest you to use a grid layout to achieve the desired effect:
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h" >Search</a>
</div>
<div class="ui-block-c">
Next
</div>
<div class="ui-block-d">
Previous
</div>
</div>
See the documentation here.
I have a PhoneGap+jQuery Mobile android index.html file.
<div data-role="page" id="dashboard"> has a <ul><li> like this.
<li>
정보 입력
</li>
when I click #enterInfo li, the page sometimes changes correctly to this page.
<!-- page enterInfo -->
<div data-role="page" data-theme="b" id="enterInfo">
<div data-role="header" data-position="inline">
cancel
<h1>정보 입력</h1>
save
</div><!-- /header -->
<div data-role="content" id="enterInfo" >
<p>
<form method="post" class="dialog" id="enterInfoForm" action="http://wafflemaker.kr/flatlens/enterInfo.php" data-ajax="true">
<fieldset>
<div data-role="fieldcontain">
<p id="juminP">
<label for="jumin">주민등록번호</label>
<input type="text" id="jumin1" name="jumin1" size="6" />-<input type="password" id="jumin2" name="jumin2" size="6" />
<label for="age">연령</label>
</p>
<select name="age">
<option value="20s" selected>20대</option>
<option value="30s">30대</option>
<option value="40s">40대</option>
<option value="50s">50대</option>
<option value="60s">60대</option>
</select>
<label for="as_dong">주소(지역구를 찾아줍니다)</label>
<input type="text" id="as_dong" name="as_dong" value=""/>
</div>
<input type="button" id="as_search" name="as_search" value="검색">
<!--
<a href="index.html" rel="external" data=role="button" data-icon="arrow-r" data-iconpos="right" data=theme="a"
onclick="searchAddress(document.getElementById('as_dong').value);">검색</a>
-->
<a class="button" type="submit" id="enterInfoFormSubmit" name="submit" href="#">전송</a>
</fieldset>
</form>
</p>
<div id="as_show"></div>
검색어 -> 부산광역시 : 부산광역시를 가지는 주소를 표시<br>
검색어 -> 거제3동 : 거제3동을 가지는 주소를 표시
</div><!-- /content -->
But after 4-5 repetition of clicking on li -> cancel, the screen changes to phone call screen, with numbers 1270-50193.
What the bug. Can you please help it out?
In your code snippet the ids are duplicated:
<div data-role="page" data-theme="b" id="enterInfo">
<div data-role="content" id="enterInfo" >