Jquery mobile loses custom style after button text changed - jquery-mobile

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'

Related

Jquery Mobile: Embed external HTML file without iframe

How can I load a external html page in a div?
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel">
<!--Load nav.html here-->
</div>
...
I have tried with following code but it doesn't function.
$( "#myPanel" ).load( "nav.html" );
See: http://plnkr.co/edit/N6xTrvLHWdOMG9Lq?open=lib%2Findex.html
The panel is expecting some markup as content, not a whole HTML page.
This will load Your navigation listview inside the panel:
$(document).on('panelcreate', '#myPanel', function () {
$(this).children(".ui-panel-inner").load("nav.html ul", function() {
$(this).enhanceWithin().trigger("updatelayout");
});
});
The full-width listview is requiring some additional CSS:
/* The left reveal panel shadow is 5px inset and blurred by 5px */
.ui-panel-display-reveal.ui-panel-position-left .ui-listview {
margin-right: -10px;
}
EDIT:
To test Your navigation menu and see if it looks as intended, You may design it directly inside the panel. To allow the framework to create the panelInner, simply put somewhat inside the panel div, i.e. a placeholder div or, as said, even better the static version of Your navigation menu. Thus, it will be then correctly replaced by Your external version.
In one word, instead of <!--Load nav.html here--> write <div>...</div>.

Changing button data-theme dynamically in JQueryMobile

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);
}

jQuery UI theming within datatables plugin

I'm using the jquery datatables plugin and added some custom jquery-ui buttons to the table footer.
To use the datatables plugin with jquery-ui theming the "bJQueryUI" option has to be turned on.
So far no problem, but now I added the jquery-ui themeroller to my page.
When I change the theme, all the jquery-ui components change their style accordingly, just like the datatable, except for the buttons within the datatable.
I found out that it actually is a css-priority issue: the new styles applied by the themeroller got lower priority than the original styles, so these buttons never change their look.
As the jquery-ui components and the datatables plugin both are quite popular I thought I would find someone with similar problems, but had no luck so far..
That's how the initialization of the datatable and the creation of the custom buttons are done:
<table id="DataTable">
// ...
</table>
<script type="text/javascript">
$(function ()
{
var oDataTable = $('#DataTable').dataTable({
"aaData": result.aaData,
"bPaginate": false,
"bJQueryUI": true,
"bInfo": true,
"sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ipT<"toolbar">>',
"oTableTools":
{
"sRowSelect": "single"
}
});
// add buttons
$("div.toolbar").html('<button id="AddButton">New element</button>');
$("#AddButton").button().click(function () { /* ... */ });
// add more buttons...
}
</script>
Here's a screenshot of the actual html structure and applied css-styles:
http://i.stack.imgur.com/vbAuy.jpg
Any hint is greatly appreciated.
I found the solution myself:
If I add the "ui-widget-content" CSS-class to the toolbar-container div, the styles get applied correctly.
To remove the styles which that class applies (border and background), I added a more specific CSS style to remove these:
div.toolbar
{
float: right;
border: 0;
background: 0;
}
It's important here to use "div.toolbar" not ".toolbar", otherwise the ui-widget-content styles get applied.
Now the toolbar container doesnt get unwanted styles applied and the buttons inside correctly get the selected theme.
Maybe that's helpful for someone using the themeroller with custom jquery-ui buttons in datatables.
IF you want the theme to control the style of the button, then comment out the CSS that is overriding the theme roller style.
If they are themed buttons, then you will have to remove your CSS to allow the theme to take affect. Themes are made to be easily over-writable so you can add customization, only it sounds like you no longer want the customization.
Not sure if you had this problem but there are two separate css classes with datatables. Which one to use depends on if you have bJQueryUI:true or bJQueryUI:false

using Accordion from jQuery UI, I'm getting an unwanted blue highlight around the last clicked link

I'm using the Accordion widget from jQuery UI.
Whenever I click a header to expand a section, that header (actually, the link inside the h3 element) is highlighted. In Chrome it has a blue highlight as if it were the currently selected field in a form.
I need to get rid of the blue highlight, so I hacked together the code below, and it seems to work so far.
However, I'm wondering if there's a better/cleaner way to do this in jQuery. Is this right??
$(function() {
$( "#mainnav" ).accordion().blur($('#mainnav'));
});
I didn't need jQuery to fix the problem after all (.blur() didn't seem to work).
jQuery was adding a class = "ui-state-focus" to the html, so I used CSS to indicate that this class shouldn't be outlined/highlighted, like so...
#mainnav .ui-state-focus {
outline: none;
}
For me works this for JQuery UI 1.9.2, Tabs widget:
#mainnav .ui-tabs-anchor {
outline: none;
}

Can I set a Custom Icon for a jQueryUI Button

Is it possible to create a jQueryUI Button with a custom icon, ie: an icon that is not part of the sprite icons that are provided with jQueryUI???
I am using the ButtonSet functionality for a group of 3 checkboxes but need a more stylised icon than what is provided out of the box...
Worked it out with a CSS hack.
Setup the button as per normal and give the primary icon the "Error" class defined below
.Error
{
background-image: url('Images/Icons/16/Error.png') !important;
}
The !important overrides the ui-icon definition for background-image.
I took this approach for one of my buttons and I discovered some interesting things:
I didn't need to use the "!important" override
I needed to set background-position for my button (otherwise I think the background was being displayed well outside the button)
It looks like you can also put anything you like in the jQueryUI primary icon name - it just needs something as a placeholder.
For my uses I ended up with:
Javascript:
jQuery(function() {
jQuery('#share-button').button({
icons: { primary: "icons/share" }
});
});
CSS:
#share-button > span.ui-icon {
background-image: url(icons/share.png);
background-position:0px 3px;}
HTML:
<button id='share-button'>Share</button>

Resources