Im looking to recreate the following button after updating to the latest version (button widget was rewritten in 1.12 onwards, However im struggling to get the syntax/classes correct based of the api documentation here: https://api.jqueryui.com/button/
button should look like
but so far the closest I've got is
the code used to display the above is as follows
<button id="btnAddNew" type="button" title="New User Access" role="button" aria-disabled="false"></button>
$("#btnAddNew").button({
classes: {
"ui-button": "ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
},
icons: {
primary: "ui-icon-plus"
},
label: "New"
});
Can anyone point to where im going wrong?
This seems to work without issue using Cupertino theme. I suspect that CSS is not loading for your script. I would check to ensure it's not getting 404 error or that no other Styling is conflicting.
$(function() {
$("#btnAddNew").button({
icons: {
primary: "ui-icon-plus"
},
label: "New"
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="btnAddNew" type="button" title="New User Access" role="button" aria-disabled="false"></button>
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 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.
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'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 have this scipt,
<script>
$(document).ready( function() {
$('.add').button({
icons: 'ui-icon-plus',
text: false
}).next().button({
icons: 'ui-icon-minus',
text: false
}).next().button({
icons: 'ui-icon-arrowthick-1-w',
text: false
}).next().button({
icons: 'ui-icon-arrowthick-1-e',
text: false
});
$('.radio-container').buttonset();
});
</script>
<button class="add">Add</button>
<button class="delete">Delete</button>
<button class="left">Left</button>
<button class="right">Right</button>
<span class="radio-container">
<input type="Radio" name="radio" id="radio_1"><label for="radio_1">Radio 1</label>
<input type="Radio" name="radio" id="radio_2"><label for="radio_2">Radio 2</label>
</span>
It works fine with Firefox but failed with Internet Explorer (tested with Internet Explorer 8), radio button shifted down like this:
How do I fix it?
I use jQuery 1.4.2 and jQuery UI 1.8.5.
I hope this code can help you to solve your problem. It works fine in my IE 8.
$('.radio-container').buttonset().find('label').css({"vertical-align":"middle"});
jQuery sets CSS on a label to a margin of 8 pixels. Override and set CSS label { margin: 0px; } to fix it.
I think this has to do more with CSS than it does with the jQuery. For some reason you're styling your radio inputs as buttons--which I question why. But at any rate, I can only suggest hitting F12 on Internet Explorer 8 and take a look at your elements and how they're being represented by the CSS.
You may want to put the CSS as part of your question.