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" >
Related
can you please tell me how to make different label with different colour ?
It will change all label with red colour.
http://jsfiddle.net/GZaqz/4/
<div data-role="page" id="FirstPage" data-position="fixed" >
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<label class="labelClass" id="openSubmenu">Move to Second Page:</label>
</div>
<div data-role="content">
<div >
<a data-role="button" class="custom-btn" data-corners="false" id="test">Level 5</a>
<a data-role="button" class="custom-btn">Level 5</a>
</div>
<div >
<label class="caseName_h">user name</label>
</div>
<div data-role="fieldcontain" class="">
<label data-role="none" for="name" class="test1">Phoneyy</label>
<input style="width: 280px;" data-role="none" type="text" name="basic" value="" />
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="basic">Phone</label>
<input style="width: 280px;" data-role="none" type="text" name="name" id="basic" value="" />
</div>
</div>
</div>
Usually JQM use the attribute data-theme to assign a color to a form or whatever..
Actually I don't remember if there is same attribute for labels.
you probably want to have a look here: Theme JQM and here: Content Theme JQM
I am using jquery mobile .In my header i have three button i open pop up screen on clicking the button .But the problem is that i click the (+) button pop up size is large (looking fine) But when click the setting button(first one) it size reduce why ? having similar contend .I need to increase the size of pop screen. Here is my code.
http://jsfiddle.net/ravi1989/HesVd/16/
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<!--div data-role="content">
<div id="here_table" class="scrollable" data-scroll="y" style ="height:400px" > </div>
</div-->
<div data-role="content">
<ul data-role="listview" data-inset="true" id="here_table" >
</ul>
<!--- CaseInformationScreen Popup screen---------------------------->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
</div>
<!--- CaseInformationScreen Popup screen End---------------------------->
<!--- User Setting Popup screen---------------------------->
<div data-role="popup" id="UserSettingScreen" data-close-btn="none">
<div data-role="header" data-theme="b" >
Cancel
<h1>User Settings</h1>
Ok
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">A</option>
<option value="rush">B</option>
</select>
</div>
</div>
<!--- User Setting Popup screen End---------------------------->
</div>
</div>
Problem with jQuery Mobile is that it has an internal logic of building responsive content.
Unless you specify values manually jQuery Mobile will provide them for you. In your case problem is in text area, its default values are wider then larges element (button) on a previous popup.
That's why it is important to set popup width manually, it is even advised by official documentation.
Working example: http://jsfiddle.net/Gajotres/2752A/
HTML :
<!--- User Setting Popup screen---------------------------->
<div data-role="popup" id="UserSettingScreen" data-close-btn="none" style="max-width:300px !important; width: 300px !important">
<div data-role="header" data-theme="b" >
Cancel
<h1>User Settings</h1>
Ok
</div>
<div data-role="content" data-theme="b" >
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
<input name="text-12" id="text-12" value="" type="text"/>
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">A</option>
<option value="rush">B</option>
</select>
</div>
</div>
</div>
If you take a look I have added a style attribute to popup container:
style="max-width:300px !important; width: 300px !important"
One more thing, popup content is now wrapped into a data-role="content" so that padding can be applied to it.
I have one page and one pop up page i want to show pop up screen on clicking a button .I have header on both pop up screen and page but when i click the button the pop up is display but it css is not well as actual .
I am using jquery mobile .
Here is my fiddle
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
Setting
<a href="#" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" >Add</a>
Edit
</div>
</div>
</div>
</div-->
<ul data-role="listview" data-inset="true" id="here_table" >
</ul>
</div>
</div>
<!-- Page two Case Information Screen-------------------------->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none">
<div data-role="header" data-theme="d" data-position="fixed">
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
</div>
Here's a demo : http://jsfiddle.net/hungerpain/HesVd/3/
What I've changed in your demo
I changed your HTML structure a lil bit :
<div data-role="page" id="Home">
<div data-role="header"></div>
<div data-role="content"></div>
</div>
<div data-role="popup" id="CaseInformationScreen"></div>
| |
| |
\ /
\ /
\ /
<div data-role="page" id="Home">
<div data-role="header"></div>
<div data-role="content">
<div data-role="popup" id="CaseInformationScreen"></div>
</div>
</div>
The reason is because popup has to lie inside page. Only then will the styling remain.
I removed the code you'd put for popup to fire and added it inline in the HTML like this:
Add
Note that I've added only the changed attributes. The rest of the attributes are in demo.
I have a very simple jquery mobile page. It has a header, a footer and the body has asks for login and password with textboxes, and then you can submit.
My problem is that jQuery Mobile makes the textboxes hold about 100 characters, making my entire display way too small. Is there a way to force it to make the textboxes only hold about 12 characters and then make everything in the body larger?
Here is my code:
<div data-role="page" id="login">
<div data-role="header">
<h1>heade</h1>
</div>
<div data-role="content">
<form action="login.py" id="login_form" data-ajax="false">
<div data-role="fieldcontain">
<label for="name" style="font-size: px; font-weight: bold;"> User Name: </label>
<input type="text" name="uname" minlength="3" />
</div>
<div data-role="fieldcontain">
<label for="password"> Password: </label>
<input type="password" name="password" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="reset" value="Reset" />
</div>
<div class="ui-block-b">
<input type="submit" value="Submit" />
</div>
</fieldset>
</div>
</form>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
</ul>
</div>
</div>
</div>
I see this post is old, but maybe this will help someone...
Did you try adding something like this to your css?
div input { width: 12px !important; }
I have this link on my page:
It shows up correct but it should render this when clicked:
<div data-role="page" id="advOptions">
<div data-role="header">
<h1>Advanced Options</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="stdDevs">Standard Deviations:</label>
<input type="textarea" name="stdDevs" id="stdDevs"/>
</div>
<div data-role="fieldcontain">
<label for="numsims">Number of Simulations:</label>
<input type="text" name="numsims" id="numsims" />
</div>
<div data-role="fieldcontain">
<label for="term">Forward Rate Data (in yrs):</label>
<input type="text" name="term" id="term" />
</div>
<div data-role="controlgroup" data-type="horizontal">
<fieldset class="ui-grid-a">
<button type="submit" data-theme="d" data-transition="pop" data-icon="delete">Reset</button>
<button type="submit" data-theme="a" data-transition="pop" data-icon="plus">Add</button>
</fieldset>
</div>
</div>
<div data-role="footer">
<h4>Chatham Financial</h4>
</div>
</div>
But it's trying to instead call the advOptions method on my controller which doesn't exist, looks like it's just trying to redirect from the base URL instead of opening that dialog.
What am I doing wrong?
The code looks good to me...
Are you adding that link to your page dynamically? Because if so, maybe JQuery Mobile did not recognize the data-rel="dialog" attribute. If this is the case, you should be able to simply call the .page() method on your page to let JQuery Mobile do its thing.