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>
Related
I'm trying to test out the jquery-ui's tooltip to no avail. Here is what I did: https://jsfiddle.net/o99ua97c/. But it is not working and I couldn't quite figure out why.
<script>
$(document).ready(function(){});
$('#myINPUT').tooltip({
function() {
content: return 'tooltip from jquery-ui';
}
});
</script>
</head>
<body>
<label for="myINPUT">Enter Something</label>
<input type="text" size="20" id="myINPUT"/>
</body>
The document ready should be around the tooltip call. The tooltip is called to early now.
Edit, there seem to be some other problems as well.
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
It works at first open of the page but when i navigate to other pages that uses also the datepicker. It no longer works. Did i missed something in my code? Please see below. Thank you so much.
<link href="css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$('#btnDfrom').focus(function () {
$(this).datepicker();
});
$('#btnDto').focus(function () {
$(this).datepicker();
});
</script>
<span id="filtertxt">Date From: </span>
<input type="text" id="btnDfrom" />
<span id="filtertxt">Date To: </span>
<input type="text" id="btnDto" />
This one does not work also
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
Jquery UI datepicker isn't intended to be called multiple times on the same element, which is what would happen if you call it on a focus event.
All you need to do is call it once on the target element, like so:
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
The datepicker plugin will take care of handling clicks and focus events on the elements by itself, you don't need to.
EDIT: You should also check that you are both including the script files, css files and this code on each page where you use the datepicker (but make sure it's only included once!)
your code is looking cool
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
check your code I think may be jquery is Conflicting somewhere in your pages.
I am new to knockout, I have found an example of checkbox binding which could be very useful in my website.
Link to the example: http://knockoutjs.com/documentation/checked-binding.html
I tried to apply it to my page but it didn't work, then I tried to copy this example without changing anything but still it didn't work. I tried it on different browser(Chrome, Firefox, IE) and including different version of knockout libraries, but still it didn't work.
I have no other idea what I am doing wrong, please help!
Here is the code of this example:
<!DOCTYPE html>
<head>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js'></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez tytułu</title>
</head>
<body>
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
Preferred flavors of spam:
<div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div>
<div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div>
<div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div>
</div>
<script type="text/javascript">
var viewModel = {
wantsSpam: ko.observable(true),
spamFlavors: ko.observableArray(["cherry","almond"]) // Initially checks the Cherry and Almond checkboxes
};
// ... then later ...
viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox
</script>
</body>
</html>
What you are looking at is a fragment, not a fully working example. You need to do a couple of things.
You need to applyBindings:
ko.applyBindings(viewModel);
And you need to do that after the DOM has loaded (or knockout will get very upset).
Here's an example
I've updated my example a little to make it easier to see that the checkboxes are, in fact, bound. There's a list of the spamFlavors under the list of checkboxes that will change as you check and uncheck the checkboxes.
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>