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>
Related
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.
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 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>
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');
});
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.