jquery mobile checkbox in popup not working. Clicking the checkbox could not change the checkbox value.
<div class="ui-popup-container pop in ui-popup-active" id="popup1-popup" >
<div id="popup1" data-role="popup" data-dismissible="false" data-theme="a" class="ui-popup ui-body-a ui-overlay-shadow ui-corner-all">
<div class=" ui-checkbox">
<input type="checkbox" data-cacheval="false">
</div>
</div>
</div>
How to debug it? where to set a breakpoint? The style class ui-checkbox is added by enhancement, but the class ui-checkbox does not exist in jquery-mobile.js.
Thanks for help.
Related
I'm making a multi-page web app. I want it to have a left and right panel that are available no matter what page you're on. I managed to do that but the contents don't seem like they have the jQuery CSS rules applied to them. I did
$("[data-role=panel]").panel().enhanceWithin();
And that made my panel work... kinda of the labels for my check marks aren't formatted like they were when the panel wasn't external. I guess I'll just put the code up. I swear I've searched this site forever trying to find answers.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
<div data-role="panel" id="RoomInfoPanel" data-display="overlay" data-theme="b" data-position="right" data-dismissible=false>
<div data-role="main" class="ui-content">
<h2 id="roomNumberHeader">Panel Header..</h2>
<p class="main" id="CrewText">Crew Assigned:</p>
<select id="selectCrew" >
<option>Select Crew</option>
</select>
<div id="cblist" style="display:inline">
<label for="#compChk" class="ui-content">Completed</label>
<input type="checkbox" value="first checkbox" id="compChk" />
<input type="checkbox" value="first checkbox" id="paidChk" />
<label for="#paidChk">Paid</label>
</div>
<div data-role="main">
Edit Crews
</div>
</div>
</div>
Remove # in for attribute. It should be for="checkboxID" without hash.
I'm using jQuery Mobile and no matter how much content is on the page there is always a scrollbar that appears to the right. Even turning on overflow-hidden doesn't make it go away. The page has nothing but a header, a link, and a panel. How can it be removed?
The HTML is roughly as follows:
<body>
<!-- Document framework -->
<div data-role="page">
<div data-role="panel" id="toolmenu" data-theme="a">
<form>
<fieldset data-role="controlgroup">
<legend>Select Tool:</legend>
<input name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked" type="radio">
<label for="radio-choice-v-2a">One</label>
<input name="radio-choice-v-2" id="radio-choice-v-2b" value="off" type="radio">
<label for="radio-choice-v-2b">Two</label>
<input name="radio-choice-v-2" id="radio-choice-v-2c" value="other" type="radio">
<label for="radio-choice-v-2c">Three</label>
</fieldset>
</form>
</div>
<div data-role="header">
<h1>TITLE</h1>
</div>
<div data-role="content">
Stuff<br />
Open panel link
</div>
<div data-role="footer" data-position="fixed">
Footer
</div>
</div>
</body>
Thanks.
I solved the problem. The issue was that I had the css files in the wrong order. When you are using a custom theme with jquery mobile, you have to have the css files in a particular order--namely, your themeroller-created custom theme has to come BEFORE the jquery mobile css, and you have to use jquery.mobile.structure-1.4.2.min.css (or the equivalent for whatever version you are using anyway), not the full css file.
I just started exploring J query mobile. I tried to open a dialog with following code.
<a data-role="button" href="test_my_dialog.php" data-icon="plus" data-iconpos="left" data-mini="true" id="test_dialog" data-rel="dialog">Test Dialog </a>
The dialog opens but there is no close button and header as it is being displayed at demos at following link Dialogs
Is there anything I'm missing here ?
EDIT: The markup of test_my_dialog.php
<div data-role="page">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>
Add As
</legend>
<input id="radio1" name="RC_type" value="radio1" type="radio">
<label for="radio1">
Team Driver
</label>
<input id="radio2" name="RC_type" value="radio2" type="radio">
<label for="radio2">
Team Member (Driver2)
</label>
</fieldset>
</div>
</div>
</div>
Add a header div to the dialog, it will automatically get a close button to the left.
Demo
<div data-role="page" id="myDialog">
<div data-role="header">
<h1>Header</h1>
</div>
</div>
If you want to change button's position to right, add data-close-btn="right" attribute to dialog div.
<div data-role="page" id="myDialog" data-close-btn="right">
Try modifying the page definition of your dialog with the following code and add a header-section to your dialog page
<div id='mydialog' data-role='page' data-add-back-btn='true'>
...
</div>
I am opening a page as a dialog. This dialog does not style the checkbox correctly.
Tried using checkboxradio("create"); but no joy.
How do I get the checkbox to style correctly in the Dialog box??
Here's a jsFiddle with the code.
You need to put the checkbox in a div with the proper markup
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</fieldset>
</div>
Example: http://jsfiddle.net/shanabus/8xMX2/12/
Based on the example in the docs here: http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html
I think you'll have to put the checkbox inside of a form tag in order to get jQuery Mobile to style it.
Looks like this might be a bug. Adding the <form> tag works but you also had create but needed refresh for the checkboxradio():
http://jsfiddle.net/8xMX2/11/
JS
$('#page2').live('pageshow', function(){
$("input[type='checkbox']").checkboxradio("refresh");
});
HTML
<div data-role="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
Open as Dialog
</div>
</div>
<div id="page2" data-role="page">
<div data-role="header">
Back
<h1>Page Two</h1>
</div>
<div data-role="content">
<form>
This is a dialog Box.
JQM seems to be not styling the below checkbox.<br>
<input type="checkbox" name="cb1" id="cb1" />
<label for="cb1">A Checkbox</label>
<br>
A button is styled well.<br>
Just a Button
</form>
</div>
</div>
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.