I added some new choices to my Select Menu and now JQM changed the "pop-up" behavior to a new window with a black background along with the menu choices?
I'm OK with the new window, but now my custom JavaScript code is no longer triggered because of the new JQM pop-up window?
Here's my Select Menu code:
<div data-role="fieldcontain">
<label for="ttType">Work-Order Type:<span class="required">*</span></label>
<select name="ttType" id="ttType" data-native-menu="true" data-mini="true" data-theme="d">
<cfoutput query="rsType" group="ttOption">
<optgroup label="#ttOption#">
<cfoutput>
<option value="#ttDesc#">#ttDesc#</option>
</cfoutput>
</optgroup>
</cfoutput>
</select>
</div>
Here's the field that no longer works:
<div data-role="fieldcontain">
<label for="ttEscalate">Escalation:<span class="required">*</span></label>
<input name="ttEscalate" type="text" id="ttEscalate" value="" readonly="readonly"
wdg:subtype="N1DependentField" data-mini="true" wdg:type="widget"
wdg:recordset="rsType" wdg:valuefield="ttDefEsc" wdg:pkey="ttDesc"
wdg:triggerobject="ttType"/>
</div>
<div data-role="fieldcontain">
Basically, when the "Select Type" value changes, I automatically fill in the Escalation text field with a "related value"
How do I stop JQM from defaulting to that black window? I'd prefer to just have the select drop-down stay on the same page.
PS: If I change the data-native-menu back to false, everything works fine, but I lose all the nice JQM formatting!
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.
How to open popup box after selecting the option from drop down list in phonegap. I have gone through documents but only through anchor tag we can acheive that. Please help how can I do this.
Thanks in advance
If you are using select tag for dropdown then bind function onchange() with select tag.
AS
In HTML
<select id = "status_selector" onchange="fnStatusChanged()"></select>
In Java Script
<script>
function fnStatusChanged(){
// Write Something
}
<script>
Given a standard jQM select widget, e.g:
<div class="ui-field-contain">
<label for="select-native-1">Basic:</label>
<select name="select-native-1" id="select-native-1">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
and standard popup markp, e.g.:
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Selected Val?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">You selected the item with a value of</h3>
<p id="selectedVal"></p>
OK
</div>
</div>
You can handle the change event of the select and then call the popup widget's open method to launch the popup:
$("#select-native-1").on("change", function () {
var val = $(this).val();
$("#selectedVal").html(val);
$("#popupDialog").popup("open");
});
Here is a working DEMO
I am using JQM datebox but I cannot get it to show several date inputs in a single row. This is the closest I've got:
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<label for="fromDate">
From
</label>
<input data-theme="c" name="fromDate" id="fromDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' />
<label for="toDate">
To
</label>
<input data-theme="c" name="toDate" id="toDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' readonly="readonly"/>
</fieldset>
And it sets the width properly but keeps putting it into a new line:
Also, the date shown in the flipbox does not match the one actually selected (check the date on the title):
Plus the dialog is shown too much to the left and it gets cropped.
Any help please?
I have a solution that just uses DIVs and CSS outside of the jQM data-roles. Here is a DEMO
Basically, instead of fieldcontain and controlgroups, I have contained each label/date input pair in a DIV set to display inline instead of block. Then the label and input are each also in DIVs set to inline with min-widths. In this way:
if your screen is wide enough, everything is displayed in one line.
as your screen narrows, the second label/input pair rolls to the next
line
as your screen narrows even more the labels also stack on top of the
inputs.
In the fiddle, try dragging the splitter to the left of the results plain to see the form automatically configure itself to the available width.
So the HTML looks like this:
<div class="dispInlineCont">
<div class="dispInlineLabel" >
<label for="fromDate">From</label>
</div>
<div class="dispInline">
<input data-theme="c" name="fromDate" id="fromDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' />
</div>
</div >
<div class="dispInlineCont">
<div class="dispInlineLabel" >
<label for="toDate">To</label>
</div>
<div class="dispInline">
<input data-theme="c" name="toDate" id="toDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' readonly="readonly"/>
</div>
</div>
<!-- Clear floats for each new line -->
<div class="clearFloats"></div>
And the CSS looks like this:
.dispInline, .dispInlineLabel, .dispInlineCont{
display: inline-block;
border-bottom-width:0;
}
.dispInlineLabel{
min-width: 55px;
}
.dispInline{
min-width: 200px;
}
.clearFloats{
clear:both;
}
Of course you can mess with the min-widths to get the behavior you want. The ClearFloats allows you to add the next controls on the next line.
I am getting started with JQueryMobile and love it. I am wondering if there is a way to place a prepended a select menu beside a standard text input.
For example, if the text input were to be for a name, then the prepended select would contain Mr, Mrs, etc.
Edit 1:
I've looked at the control group docs and for a case like buttons it works e.g.
<div data-role="controlgroup" data-type="horizontal">
Icon only
Icon only
</div>
However if I use an input like
<div data-role="controlgroup" data-type="horizontal">
Icon only
<input type = "text" name = "some_input" id = "some_input">
</div>
It gives a weird result with the input overlapping the button.
Edit 2:
I've looked at grids but cannot see a way to have a div span 2 grids. e.g.
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b ui-block-c">Block C</div>
</div>
I've tried the above, but it doesn't work as desired, for example
<div class="ui-grid-c">
<div class="ui-block-a">
<label for = "full_name">
Name
<select id = "honorific" data-mini="true" data-inline="true">
<option value = "mr">Mr</option>
<option value = "mrs">Mrs</option>
<option value = "miss">Miss</option>
</select>
</label>
</div>
<div class="ui-block-b ui-block-c ui-block-d">
<input type="tel" data-clear-btn="true" id = "full_name" name = "full_name">
</div>
</div>
simply yeilds the select box below the full name label, and the input only spans what appears to be one cell/block - rather than the 3 cells/blocks of the grid.
From what I've seen control group works best with buttons, check boxes, etc. Not with the combination you're expecting to do. So here are two solutions for you.
Without using grids
You'll just have to make the two elements as an inline-block, like this :
.ui-select, .ui-input-text {
display:inline-block
}
Demo with No grids, No control group.
Using grids
The way you're using grids is wrong. You'll have to use two-column grid, which will have these two two classes alone: ui-block-a & ui-block-b, like this :
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
</div>
This will scale your markup accordingly. Here's how the HTML looks like :
<div class="ui-grid-a">
<div class="ui-block-a" style="width:100px">
<select name="select-choice-min" id="select-choice-min" data-mini="true">
<option>Mr.</option>
<option>Mrs.</option>
<option>Ms.</option>
</select>
</div>
<div class="ui-block-b">
<input type="text" name="name" id="name" value="" placeholder="Enter Name" />
</div>
</div>
Demo with grids
<div data-role="fieldcontain">
<select data-mini="true" data-inline="false" data-history="false" data-native-menu="false" data-theme="d" data-overlay-theme="b" name="elArr[]">
<option value="" data-placeholder="true">test</option>
<option value="1">1</option>
</select>
</div>
Hi, I like use data-native-menu with data-histroy attribute same time. data-history property doesn't work. When opened native menu, it add hash ui-state=dialog to location bar.