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 ?
Related
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');
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>
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>
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" >
When creating a jQuery Mobile Accordion, how do I get a section of the accordion to open when a button is clicked?
When the user clicks the search button, I want to load the results into a list in the second panel, collapse the first and expand the second.
<div data-role="collapsible-set">
<div id="filterContainer" data-role="collapsible" data-collapsed="false">
<h3>Filters</h3>
<p>controls to pick options</p>
Search
</div>
<div id="resultsContainer" data-role="collapsible">
<h3>Results</h3>
<p>list of results</p>
</div>
<div>
Live Example:
http://jsfiddle.net/h2pPz/19/
HTML:
<div data-role="page" id="home" class="type-home">
<div data-role="content">
<div data-role="collapsible-set">
<div id="filterContainer" data-role="collapsible" data-collapsed="false">
<h3>Filters</h3>
<p>controls to pick options</p>
<!-- Either button syntax works -->
<!-- Search -->
<input type="button" value="Search" id="search"/>
</div>
<div id="resultsContainer" data-role="collapsible" data-collapsed="true">
<h3>Results</h3>
<p>list of results</p>
</div>
<div>
</div>
</div>
JS:
$('#search').click(function() {
$('#resultsContainer').trigger('expand');
});