I'm having a little trouble dynamically changing a button's theme dynamically. From a different post I learned to use:
<input type="button" data-inline="true" data-mini="true" data-theme="c" id="my-button" value="Save">
<script>
$("#my-button").buttonMarkup({ theme: 'a' }).button('refresh');
</script>
Technically this works, until I mouse over - then the button falls back to data-theme "c". Is there a better way to dynamically change theme?
if you use a button as below
Save2
You can change the theme as below
$('#my-button2').attr("data-theme", "c").removeClass("ui-btn-up-e").addClass("ui-btn-up-c");
check out a live fiddle here http://jsfiddle.net/mayooresan/jfDLU/
I tried to find the answer for this one, but came up with this solution after looking into the DOM structure. I created the below function for toggling the theme on click the button. the hover class needs to be addressed only when changing the theme of the same button you are clicking.
These seems to work for input type button element. (jqm version 1.3.2)
function changeButtonTheme(buttonSelector,toTheme){
var currentTheme = $(buttonSelector).attr('data-theme');
var parent = $(buttonSelector).parent();
$(buttonSelector).attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme);
parent.attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme);
//parent.removeClass("ui-btn-hover-"+currentTheme).addClass("ui-btn-hover-"+toTheme);
}
Related
I have added Radio Button group by using Vaadin designer to my view :
<vaadin-radio-group value="Line" id="vaadinRadioGroup" style="margin-left: var(--lumo-space-s);">
<vaadin-radio-button name="Line" style="flex-grow: 0; align-self: stretch;" checked>
Line
</vaadin-radio-button>
<vaadin-radio-button name="Heatmap" checked>
Heatmap
</vaadin-radio-button>
<vaadin-radio-button name="Both" checked>
Both
</vaadin-radio-button>
</vaadin-radio-group>
And in my java code :
vaadinRadioGroup.addValueChangeListener(radioButtonEvent -> {
System.out.println("The event is triggered.......")
});
The change in the radio button value does not trigger the changeValueEvent. Anything I am missing here??
A bit closer look revealed the problem: with a radio button group you can't declare the data in the design itself if you want to be able to use it from the Java side as well. You should do that from the Java side using e.g. setItems() or adding a DataProvider. If you do that, the individual radio buttons won't be visible when you look at the design, but they'll be there when you run the application.
In my list some elements have sub-items and some not. These, that don't have have sub-items should work as buttons/links.
Unfortunately including an item like in my collapsibleset
<div data-role="collapsible" data-iconpos="none">
<h3 >Title</h3>
</div>
and setting in JS a's href to needed link looks great, but JQM triggers open/closing event by clicking on it. That changes it's look and my link inside the element doesn't work.
Does someone have ideas?
Is that what you want ?
JsFiddle
$("h3").on("click", function(e){
$(this).parent().collapsible({collapsed: true});
});
It prevents the collapsible to open
If you need the collapsible to stay in the state it is when the page
is loaded, you can check the state of the collapsible with
$(".ui-collapsible").hasClass('ui-collapsible-collapsed')
and let it open if it is already open, or close if it is already
close.
JsFiddle
You could use that if you have a button inside your collapsible
header, and do not want the collapsible to react when you click on
the button but still on the header (outside the button) Final
working exemple : JsFiddle
Edit : As you requested in the comments, here is a JsFiddle with a collapsible header opening a website on click instead of collapsing/expanding the collapsible.
Explanation :
1) You could store the url in an attribute of the "h2" like this :
<h2 data-url="google.com"; >google.com</h2>
2) Then you add a class when you don't want the heading to collapse/expand the collapsible : class="doNotTriggerCollapsible"
So you have :
<h2 class="doNotTriggerCollapsible" data-url="google.com"; >google.com</h2>
3) Then you retrieve the url with $(this).data("url") and you open the link with
window.open($(this).data("url"))
I have a simple (newbie here) task in jquery mobile. Change the text of a button which has a custom style applied. I can change the text without problem in the 'pageinit' event however I lose the custom style in the process. Have read lots of article in stackoverflow but still lack a working solution.
Excerpt of html page below loaded by ajax
CSS
#goal .ui-btn-inner {
text-align: center;
background: chartreuse;
ui-disabled: true;
}
Button to be styled
<div data-corners="false" data-role="controlgroup" >
<a href="#" data-role="button" id="goal" >
text to be changed
</a>
</div>
...
Here is the jquery mobile code that changes the button text.
$(document).delegate('#problem_screen', 'pageinit', function() {
$('#goal').on('click', function() {
console.log('goal clicked');
});
$('#goal .ui-btn-text').text('New button text');
});
Thanks
Finally got this to work. My first JQM mistake was to define custom styles on each page of the multiple page application. This is wrong -- you must define all your custom styles in one location, typically a style sheet file which is included by every page. Another mistake is to have same id value on different pages. Wrong -- id values must be unique throughout application.
The api that applies (in this case enhances a style) is .addClass("). In my case I defined a style as follows:
.goal-style {
text-align: center;
background: charteuse;
ui-disabled: true;
}
Now after I update the button's text I say:
$('#goal').addClass('goal-style'); // Note: do not use '.goal-style'
Is there a reason why the click handler is removed from my button after calling the button() method on it. I am changing the content of my buttons, and as a result I need to refresh them. I noticed refresh does not work, so I tried the button method.
This will restyle my "button", but I lose my click event.
How can I accomplish both?
http://jsfiddle.net/RQZG8/2/
And here is the code:
$("[data-role=button]").html("hello world").button();
$("[data-role=button]").click(function(){
alert("i have been clicked");
});
My big issue is that I have a div which is acting as a button. I want to change the content of the div, but I want to be able to have it continue to look like a button while keeping it's behavior.
Try this: $("[data-role=button] .ui-btn-text").html("hello world"); otherwise the padding is lost.
First of all IMHO, given your example that goes with the question (when you change only caption of a button), there is no much point to use a div as a button when jQM gives you a lot of standard choices.
All of these:
<button>Button element</button>
<input type="button" value="Button" />
<input type="submit" value="Submit Button" />
will be automatically enhanced by jQM to buttons without even specifying data-role="button".
And you can of course use a link as a button
Link button
Now if you still want to use your div as a button you don't need to specify data-role="button" just call button() plugin. That will create all necessary markup for you and your original div will be preserved as hidden.
<div id="button1">By button<div>
$("div#button1").button();
To refresh a button after you changed its caption you need to call refresh method:
$("div#button1").html("Hello World").button("refresh");
Now to normally handle the click event of a particular button (if it's not the only one on the page) you probably need more specific selector than just the data-role=button attribute. id would be perfect for that. So instead of
$("[data-role=button]").click(function(){...});
do
$("div#button1").click(function(){...});
And lastly you most certainly know that, but I didn't see it in your jsfiddle, so I just mention that you better put your code in one of the jQM page handlers. pageinit is recommended way to go.
$(document).on("pageinit", "#page1", function(){
...
});
Here is jsFiddle.
I have a page on which I'm using jQuery UI Tabs, what I'm doing is loading the content of each tabs via Ajax, but the problem I'm having is that, in the content of my tabs, the buttons (I'm using jQuery ui button) lose all their jquery ui classes, meaning:
When the page loads for the first time, my buttons look like this:
<button class="my_button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only">
<span class="ui-button-icon-primary ui-icon ui-icon-plusthick"></span>
</button>
As you can see, my buttons have all the jquery-ui classes ui-button, ui-widget, etc.... Also, my buttons have a span which displays a plus(+) sign as a label for my buttons. Therefore, my buttons display correctly.
But when I load the same content (which contains the same buttons) via Ajax, my buttons become like this:
<button class="my_button"></button>
As you can see, I lose all the jQuery ui classes of my button. Therefore, the button is not styled
How can I fix this?
NOTE : Please note that I did not manually add those jquery-ui classes to my buttons in my HTML. When you initialize the buttons using $(".my_button").button(); in jQuery, jQuery automatically applies all the necessary jquery-ui classes to my button appropriately. So please don't tell me it's because I didn't not assign the jquery-ui classes to my buttons upfront (I should not have to). Also, I tried .live(), .delegate(), none of those work.
Please help me with this anyone
Thank you
I've faced this problem once and solved this problem using the document.ready call like
function myreadyFunc(){
$(".my_button").button();
// Other codes
}
I had my document.ready like following
$(document).ready(function(){
myreadyFunc();
});
After each ajax (success) call I used to call
myreadyFunc();
Hope this will help you too. I used this approach to execute document.ready's code that was not possible by calling document.ready after each ajax call.