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.
Related
AdminLte select2 not working means not showing search in select box, i have included css and js file and used like below and also i have included bootstrap related css and js files
<html>
<head>
<link rel="stylesheet" href="bower_components/select2/dist/css/select2.min.css">
</head>
<body>
<select class="form-control select2" style="width: 100%;" ng-options="t.id as t.name for t in tags" ng-model="t_id">
<option selected="selected">Select Tag</option>
</select>
<script src="bower_components/select2/dist/js/select2.full.min.js"></script>
<script>
$(function () {
//Initialize Select2 Elements
$('select2').select2();
});
</script>
</body>
</html>
It will work
$('.select2').select2();
you may need to load Ajax.googleapis cdn from google. My problem was like as yours.I have faced the problem and solved it. Main problem was select2 doesn't get ajax.googleapis cdn. So, before the jQuery code I have loaded the cdn and it works fine now. You mush notify the version of your cdn. Firstly, the code was
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
The problem is looked like the picture below
Now after solving the problem the code looks like below
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
Now it is seen like below
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>
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'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>