CSS for jQueryMobile breaks AngularJS

Question

These two URLs point to files which are identical except for one thing:

The mobileCSS.html file contains this line:

<link rel="stylesheet" href="/code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css">

The noCSS.html file has the same line commented out:

Both pages use AngularJS to populate two <select> elements, one of which acts as a slave to the other. Both also contain a set of checkboxes to show the internal state of the model.

When jquery.mobile-1.4.3.css is used:

The initial values of the <select> elements are not displayed
The checkbox inputs do not update

Is this a known issue? Can you suggest a workaround for this?

Partial solution: correctedCSS.html

This reveals that jQueryMobile is not correctly updating, and that the decorations it adds hide the fact that the <select> and <checkbox> elements are being correctly updated by AngularJS:

.ui-checkbox .ui-btn {
z-index:0; /* in jquery.mobile-1.4.3.css, this is set to 2 */
}

.ui-select .ui-btn select {
opacity:1; /* in jquery.mobile-1.4.3.css, this is set to 0 */
}

Screenshots http://dev.lexogram.com/tests/angularJS/angularVSjqueryMobile.png

I just had a look and took out the comments of the CSS file. Looks ok. Is there a specific reason why the CSS file is commented.?? — Tasos, Jul 24 '14 at 09:45
When you take out the comments for the CSS file, do you see the initial values for the select elements? Do you see two checkboxes selected? What OS and what browser are you using? — James Newton, Jul 24 '14 at 09:56
you need to _refresh_ checkboxes `$(element).checkboxradio("refresh")` and selectmenus `$(element).selectmenu("refresh")` after updating their values dynamically. — Omar, Jul 24 '14 at 09:58
@Omar I have added... $("input[type='select']").selectmenu("refresh"); $("input[type='checkbox']").checkboxradio("refresh"); ... to the function that deals with selecting an item from the master menu, but I see no effect. I do not understand why this should be necessary, since the only change is to add CSS to the page. — James Newton, Jul 24 '14 at 10:37
when you change property of a checkbox from checked to unchecked, you need _refresh_ in order to apply styles. I dont know how angular works, however, refreshing should take place after changing element's property. Edit: to understand _refresh_ method, check this [answer](http://stackoverflow.com/a/17027734/1771795). — Omar, Jul 24 '14 at 11:51

Nimmi · Answer 1 · 2014-07-24T10:44:06.150

0

I am not too good at angular because I am also at learning stage but as per my knowledge something like below code can help.

JS
$scope.endonyms = [{code: "en", name: "English" }, { code: "fr", name: "FranÃ§ais" }];
$scope.selectedOption = $scope.endonyms[2];
HTML:
<select ng-options="endonym as endonym.name for endonym in endonyms"
            ng-change="setSource()" ng-model="selectedOption">

edited Jul 24 '14 at 10:44

answered Jul 24 '14 at 10:38

Nimmi

1,997
2
12
20

1

I am already setting $scope.source to a pointer to an object in $scope.endonyms: `$scope.setSource($scope.endonyms[1]);` It is clear that this is correctly set, in the noCSS.html file. – James Newton Jul 24 '14 at 10:53

James Newton · Accepted Answer · 2014-07-24T13:04:20.547

The solution is as @Omar suggested:

you need to refresh checkboxes $(element).checkboxradio("refresh") and selectmenus $(element).selectmenu("refresh") after updating their values dynamically

However, timing is an important issue. When the AngularJS controller is first created, the jQueryMobile decorative elements have not yet been created, so they cannot be refreshed. Also, when AngularJS changes the value of a $scope property, the corresponding DOM element is not immediately updated, so calling "refresh" in the next line is pointless.

// Delay initial "refresh" until the page is ready
$(function () {
  $("#source").selectmenu("refresh");
  $("#target").selectmenu("refresh");
  $("input[type='checkbox']").checkboxradio("refresh");
})

// Wait 1 millisecond before refreshing an item whose $scope property has been changed
function refreshChangedItems() {
  window.setTimeout(function () {
    $("input[type='checkbox']").checkboxradio("refresh");
    $("#target").selectmenu("refresh");
 }, 1)
}

You can find these fixes in solutionCSS.html

CSS for jQueryMobile breaks AngularJS

2 Answers2