I have a JQuery Button, disabled by default and I need to enable it on certain event.
My problem is that when I just simply remove the attribute 'disabled' the button maintains the disabled jquery css styles.
I removed them by hand:
$('[id$=btnDowloadXLS]').removeAttr("disabled").removeClass("ui-state-disabled").removeClass("ui-button-disabled");
But, then the button is not the same as an active button, onMouseDown it doesn't take the proper style.
I figured out this solution
$('[id$=btnDowloadXLS]').button({ disabled: false });
which I think creates again the JQuery button.
My question is: is there a cleaner, proper way to re-enable a button and that the button gets the proper/by-default enabled styles?
jQuery UI buttons have enable and disable methods that you can call to enable or disable the button:
$("#mybutton").button("enable"); // or .button("disable");
Check the Methods tab of the documentation:
.button("enable");
If you want to toggle it using a Boolean (e.g. enabled), this should also work (documentation):
.button("option", "disabled", !enabled);
Related
I have a kendo ui grid on my page.
And I have a button too. I want when I click button, sortable property on a specify column disable, and when click the button again, sortable property enable.
How to I do this?
Thanks.
Runtime enabling/disabling the sorting feature of the Grid is not supported.
But you can find some approaches to achieve it here: http://www.telerik.com/forums/disable-or-remove-sortable-capability-on-column-with-rebuilding-entire-grid
Hope this link will help you.
There is no method for this - this is option which is set only upon initialziation. So you will need to re-initialize the whole Grid. Covered here.
The column.sortable option should be set to true/false depending on the button that was clicked.
You need to write an click event for a table header on javascript.This event will prevent click on table header.
$(".k-grid-header .k-link").click(function (e) {
e.preventDefault();
if ($(this).text() === Header Name) {
e.stopPropagation();
}
});
e.PreventDefault helps to avoid window jump to top when clicking #-links.
Give your headername into the if condition to which you want to disable sorting
Is there a way to use CSS3 to recreate the behavior of jQuery UI's Selectable interaction, specifically in a grid setup, as seen here?
Yes, this can be achieved by using a radio buttons :checked selector and the sibling selecter (+ or alternatively ~)
You essentially have radio buttons that the user can choose, but hide them, and use <label>'s with for="" attributes.
Demo
This doesn't let you drag or control click to select multiple boxes however, you would need javascript (and checkboxes rather than radio buttons) for that
In jQuery-UI dialog box, the first button appears to be the default, therefore having focus set to itself.
But, this causes a frustrating effect, especially in Safari. Even in IE, you will see a rectangular selection mark around the button. Moreover, the hover effect will not be seen.
How can I set NONE of these buttons as default and therefore NOT having focus set on any of them?
Edit:
Examples can be seen at jqueryui demo pages and a snapshot using Safari is below.
I want to get rid of this blue selection.
I think it could be an css-class, that turns the button to "default".
Check with the Firebug Element Inspector what classes are applied to these buttons, and append the standard css class to all buttons of the form.
When using a selection menu with the option for multiple select, jquery changes the menu's label based on the selected elements.
http://jquerymobile.com/demos/1.1.0/docs/forms/selects/custom.html
See this fiddle. When user selects shipping options, the selected elements show in the menu's label.
http://jsfiddle.net/VEYjV/3/
How can I disable this feature and force the menu to keep the label I've associated with it (i.e. Choose options)? How can I disable the count bubble feature?
I figured out how to disable these features by hacking into the jquery.mobile lib.
I disabled the setButtonText and setButtonCount funcions when called from the refresh
refresh: function() {
//this.setButtonText();
//this.setButtonCount();
},
I just want to use changePage but to have a modal window instead of fullscreen page.
For the moment, I create my own modal box, but jQM doesn't style it probably because it's not a data-role=page.
Is there a solution without adding a plugin ?
Thanks.
Any reason to insist on changePage instead of just using a link? There is a similar SO question out there (sorry no link). You can accomplish this by using the changePage method and setting the role to dialog. If you want the calling page to still be visible in the background then you will need to do three things when the pageLoad event fires. 1) show the previous page (calling page), which automatically gets hidden on the changePage event. 2) set opacity or something on all other divs to give it a modal effect. 3) set dialog overlay to be transparent so you can see the previous pages.
The easiest way to accomplish the third is to use the overlay theme aspect (as jqm 1.0) and set it to be transparent in your style sheet.
Maybe you want to try to change the target page data-role as dialog and invoke method changePage with options {role: 'dialog'}.
Check it out on jsfiddle.