I have a text input and want to focus upon init. But nothing happens when the code is run. Any idea? I am using jquery mobile 1.4.0
<input type="text" name="txb" id="txb" value="" data-clear-btn="true" data-mini="true"/>
<script>
$('#home').on('pageinit', function () {
$('#txb').focus();
Put it in the pageshow event.
$(document).on("pageshow", "#page1", function(){
$('#txb').focus();
});
DEMO
Related
Hello guys i had textboxes and i want them to be a spinner when focused and to be the textbox when blur
this is my code
$(".spinner").focus(function () {
$(this).spinner();
});
$(".spinner").blur(function () {
$(this).spinner("destroy");
});
demo
http://jsfiddle.net/ygyogba0/
but im getting an error of "Cannot read property 'replaceWith' of undefined"
can anyone help me with this?
thanks in advance
This is working for me in chrome and IE11. It seems that the spinner widget was not setting focus after it's create. Using "On" is a great practice esp if you start doing partial postbacks. However, in firefox it was not setting the focus even with the extra call. This is an issue discussed at length in forums. If you need FF you will have to deal with that.
However, The FF issue is only an issue if the user never clicks in the spinner. I am not sure this solution is ready for prod.
$("body").on("focus", ".spinner", function () {
$(this).spinner({
create: function (event, ui) {
$(this).focus();
// Trying (and failing) to deal with FF
/*setTimeout(function () {
$(this).focus()
}, 10); */
}
});
});
$("body").on("blur", ".spinner", function () {
$(this).spinner("destroy");
});
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type="text" class="spinner" /><br>
<input type="text" class="spinner" /><br>
<input type="text" class="spinner" /><br>
<input type="text" class="spinner" /><br>
I'm using standard JQM date picker with input tag like this
<input type="date" data-clear-btn="false" id="dp" value="2006-09-14">
on request here is jsfiddle example: http://jsfiddle.net/GardenOfEmuna/47VUw/
Now I want to display value in a trigger button and open datepicker upon clicking on it.
Has anyone idea how to open datepicker with a trigger button?
You are not using a jqm datepicker, since there is none. You are using the native browser datepicker control and you can't trigger it as proved in this thread
Possible solution:
I've created a jsFiddle, it uses the datepicker from jquery ui with a wrapper class as shown in the jqm documentation (link)
html
<div data-role="page" id="foo">
<div data-role="content">
<input id='myDatePicker' type="text" data-role="date">
<button id='myButton' class="ui-btn">Button</button>
</div>
</div>
js
$(document).on('pageinit',function(){
$('#myButton').click(function() {
$('#myDatePicker').datepicker( "show" );
});
});
resources
jquery.mobile-1.4.2.min.css
jquery-1.9.1.min.js
jquery.mobile-1.4.2.min.js
jquery.ui.datepicker.js
I've got a checkbox that I want hidden on the page. My obvious first attempt was the following:
<input type='checkbox' style='display:none' />
However, I noticed jquery mobile automagically wraps the checkbox in a div that looks like this:
<div class='ui-checkbox'>
<input type='checkbox' style='display:none;' />
</div>
I would assume that there's some kind of data- element that would prevent this additional styling, but haven't found it in the docs or elsewhere. It's easy enough to override the .ui-checkbox in css to hide it as well, but would prefer a more jquery mobile-standard approach. Does such a thing exist?
The attribute that prevents styling is data-role="none"
<input type='checkbox' style='display:none' data-role="none" />
See the Jquery doc: "Preventing auto-initialization of form elements"
For future users.
Just in case you want to disable for every form element or your forms are loading dynamically where you cannot edit markup use this.
$(document).on('pagebeforecreate', function( e ) {
$( "input, textarea, select", e.target ).attr( "data-role", "none" );
});
I have too many places to change inputs and add data-role="none"
The following code works for me:
<script>
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select,input";
});
</script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
I'm using the jquery ui autocomplete for my jquery-mobile site. It is working without problems, als long as I open the site directly.
If i navigate to the side with ajax navigation it doesn't work.
Edit testable example:
<div data-role="page" data-theme="b" id="main" data-add-back-btn="true class="main"">
<div data-role="content">
<input type="search" name="search" id="search" value="" />
</div>
<script>
$('#main').live('pagecreate',function(event, ui) {
var availableTags = [
"Testone",
"Testtwo",
"Testthree"
];
$( "#search" ).autocomplete({
source: availableTags,
minLength: 2,
});
});
</script>
</div>
I have a jQM site with autocomplete, and hit a similar issue: the ajax call triggered to populate the autocomplete options wasn't always done by the time the page wanted to fire the autocomplete code itself.
I put this down to the nature of the Javascript being triggered (i.e. it's asynchronous, so you take your chances…).
Now, this is a bit of a hack I know, but adding a wee time-out worked for me (you will need to experiment with the time period). In my app I have something like this after my jQM $(document).bind("mobileinit"... code:
<script type="text/javascript">
$(function(){
// Horrible, but necessary
setTimeout(doAutoComplete, 2500);
});
function doAutoComplete(){
$( "#YOUR_FIELD_ID" ).autocomplete({
// Your ac code here…
});
}
</script>
I am trying to install the jQuery UI autocomplete on my website. I have it up and working but I want it to automatically submit the search form when someone clicks on an option. The default behavior seems to be that it just fills out the form with the selected item and then the user must click the submit button. I want it to just automatically redirect like Google. I'm running PHP 5.+ and MYSQL 5+ and jquery.1.4.2 and jqueryui.1.8.6.
Here is the javascript:
<script>
$(function() {
$( "#query" ).autocomplete({
source: "/scripts/autocomplete_handler.php",
minLength: 2,
select: function(event, ui) {
$('#query').val(ui.item);
$("#results").text(ui.item); // for testing purposes
$('#search_form').submit();
}
});
});
</script>
Here is the form:
<form name="search_form" id="search_form" action="search.php" method="get">
<input type="text" name="query" id="query" />
<input type="submit" value="Search" />
</form>
<code id="results"></code>
As you can see, I am trying to change the value of the input field "query" using $('#query').val(ui.item). The problem is that when I select an autocomplete option $_GET['query'] becomes [object Object]. i.e. My website searches for the string "[object Object]" instead of the value that I clicked.
At the bottom of the form there is a code tag with id "results". I also can't get this to populate with the text(ui.item). If anyone could help it would be much appreciated, I'm sure I'm not the only one who wants this type of Google like functionality in their autocomplete, but I can't find any examples anywhere.
Try this in your select function:
$('#query').val(ui.item.value);