i have a select button on a jquery mobile page with a data-native-menu="false". The list of options is too long for a pop-up, that is why jqm uses a page overlay to show the select-menu.
i'd like to use this select menu for navigation, so i bind to the change event a changePage function.
here's what happens: i tap on a list item, the new page slides in and slides out again immediately. My guess is that this happens because the page overlay of the custom select menu wants to go back to the page it was invoked from ?!?
Any ideas to prevent this?
thank you in advance :-))
Here's my code
html:
<div id="one" data-role="page" data-theme="a">
<div >
<div class="myHeader"></div>
</div>
<div data-role="content">
<div id="startbuttons">
PREIS ERMITTELN
<select name="miet" id="miet" data-theme="b" data-native-menu="false" data-icon="false" data-iconpos="center" data-overlay-theme="b">
<option data-placeholder="MIETSTATIONEN">MIETSTATIONEN</option>
<option value="mietstation_dummy.html">HAMBURG</option>
<option value="mietstation_dummy.html">BERLIN</option>
<option value="mietstation_dummy.html">MÜNCHEN</option>
<option value="mietstation_dummy.html">HAMBURG</option>
<option value="mietstation_dummy.html">BERLIN</option>
<option value="mietstation_dummy.html">MÜNCHEN</option>
<option value="mietstation_dummy.html">HAMBURG</option>
<option value="mietstation_dummy.html">BERLIN</option>
<option value="mietstation_dummy.html">MÜNCHEN</option>
<option value="mietstation_dummy.html">HAMBURG</option>
<option value="mietstation_dummy.html">BERLIN</option>
<option value="mietstation_dummy.html">MÜNCHEN</option>
</select>
</div>
<p class="linktxt" data-theme="a">Oder besuchen Sie unsere<br><a data-theme="a" href="hmm.html">Standard-Website</a></p>
<p class="linktxt kontakt"><a data-theme="a" href="hmm.html">Kontakt</a> | <a data-theme="a" href="hmm.html">Impressum</a></p>
</div>
</div>
js:
$('#miet').change(function(event){
var $vn = $('#miet').val();
$.mobile.changePage(''+$vn, { transition: "slide"} );
$('#miet').val('MIETSTATIONEN').selectmenu('refresh');
return false;
});
ps: if i set data-native-menu="true" it works like a charm (but i really like to use the custom select menu)
Not entirely sure if this is what you are looking for (or if you actually solved it), but have a look at this guy's answer on a similar thing (the very last comment on the thread). It might point you in the right direction ;)
JQuery Mobile changePage() flaky when called from dynamically created select option?
Related
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
http://jsfiddle.net/NZ2FJ/
As you can see in the example above, data-placeholder="true" is not working.
Can anyone suggest workaround please?
Also the official document does not show the placeholder.
Thanks in advance.
<div data-role="fieldcontain">
<label for="subject"><em>* </em> Subject: </label>
<select name="subject" id="subject" class="required" data-placeholder="true" data-native-menu="false">
<option value="" >Select subject</option>
<option value="Art">Art</option>
<option value="Band">Band</option>
<option value="Choir">Choir</option>
<option value="Design">Design</option>
<option value="Drama">Drama</option>
...
...
</select><br />
</div>
You have added the attribute data-native-menu="false" which is causing jQM to behave this way
You Example:
http://jsfiddle.net/NZ2FJ/1/
Without the attribute:
http://jsfiddle.net/NZ2FJ/3/
if you want to keep the data-native-menu="false" attribute so you get a pop-up selection box, simply make the first option selected from you js on pageload:
$(document).ready(function () {
$("#subject option:first").attr('selected', 'selected');
});
I updated jquery Mobile to 1.2.0 and it works fine now.
I am using jquery mobile select menu with data-native-menu as false. The issue is if i click select menu, overlay popups on extreme right, instead of above the select menu control. i fixed my page max-width as 400px. Jquery mobile calculating the overlay position based on screen size,hence if i reduced the screen size overlay popup above the select menu control. But how can i make the select menu to overlay within my page size in maximized mode of screen?
<div style="margin:0 auto;">
<div data-role="page" style="width:400px">
<div data-role="fieldcontain">
<label for="select-choice-9" class="select">Shipping method(s):</label>
<select name="select-choice-9" id="select-choice-9" multiple="multiple" data-native-menu="false">
<option>Choose options</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div>
</div>
Here is the picture. The gray area is the page size (data-role=page). Since I have a bigger monitor, the menu appears on the extreme right.
Set the width on the fieldContain div instead of the parent div
<div data-role="page">
<div data-role="fieldcontain" style="width:400px">
<label for="select-choice-9" class="select">Shipping method(s):</label>
<select name="select-choice-9" id="select-choice-9" multiple="multiple" data-native-menu="false">
<option>Choose options</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div>
I've finally found the HTML for the jQuery Mobile selector menu component, thanks to my other question, but I'm stuck again.
I'm currently using this code, which works nicely:
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-choice-nc" class="select">Font Choice:</label>
<select name="select-choice-4" id="select-choice-nc">
<option value="arial">Arial</option>
<option value="papyrus">Papyrus</option>
<option value="helvetica">Helvetica</option>
<option value="calibri">Calibri</option>
</select>
</div>
</div><!-- /content -->
But how do I tell which option has been selected?
It's just like jQuery sans Mobile (perhaps jQuery Immobile?). As with other form elements, use .val() to get the value of the <select>:
$('#select-choice-nc').val();
I have a view page that has two DIV tags.
If the session[UserType] = ‘Guest’ , then I need to diplay Guest DIV Section.
Else
If session[userType] = ‘Logged’
, then I don’t need to diplay Guest DIV Section.
<div id="Logged" >
<div class="txtContent">
<label for="product" class="Form_Label">product:<em>*</em></label>
<%= Html.DropDownList("product", " -- Select one -- ")%>
</div>
</div>
<div id="Guest">
<label for="DeliveryMethod">Delivery Method: </label>
<select name="DeliveryMethod" id="Select1" style="width: 100px">
<option value="email">Email</option>
<option value="fax">Fax</option>
<option value="mail">Mail</option>
</select>
</div>
Appreciate your responses.
Thanks
Sounds like you could do with either jQuery or a partialView.
My flavour would be to display a partial view based on the decision point.
Remember that your page shouldn't have any logic in it so you may want to write a helper to make the decision for you.
As an alternative you could render the page and then call a jQuery method that will return a partial view based on the parameter you send it.
If you require code please add a comment and I'll post some.
Edit
#Rita, if you're happy to have the HTML present on the page and you only want to hide/show the divs then here is the code for that;
<input type="hidden" id="hdnSessionValue" value="<%=session[UserType]">
<div id="Guest">
<label for="DeliveryMethod">Delivery Method: </label>
<select name="DeliveryMethod" id="Select1" style="width: 100px">
<option value="email">Email</option>
<option value="fax">Fax</option>
<option value="mail">Mail</option>
</select>
</div>
Then you have the following jQuery;
<script language="javascript">
$(document).ready( function () {
if ( $('#hdnSessionValue').val() == "Guest")
$('#Guest').show();
else
$('#Guest').hide();
} );
</script>
Edit2
Based on the amount of HTML you have to hide/show I don't think a jQuery postback is required.