Mobile jQuery style is not applied a second time on the details page

Question

When I go to the details page for the second time, the page becomes naked, all styles disappear from the page, I can find out the reason, for example http://jsfiddle.net/Hpyca/24/

HTML

<div data-role="page" id="dashBoardPage" data-bind="with: dashboardData"> <button type="button" data-bind="click: goToList">DashBoard!</button> </div> <div data-role="page" id="firstPage" data-bind="with: hospitalList"> <div> <div id="listViewDiv"> <ul data-role="listview" data-bind="foreach: hospitals"> <li data-bind="click: $parent.selectHospital"> <h2>Hospital Id:<span data-bind="text:id"></span></h2> <p>Name <span data-bind="text:name"></span></p> </li> </ul> </div> </div> </div> <div data-role="page" id="detailsView" data-bind="with: hospitalList.selectedHospital"> <a href="#firstPage">Back</a> <a href="#dashBoardPage">Home</a> <div> <div data-role="tabs" id="tabs"> <div data-role="navbar"> <ul> <li><a href="#one" data-ajax="false">Info</a></li> <li><a href="#two" data-ajax="false">Details</a></li> </ul> </div> <div id="one" class="ui-body-d ui-content"> <h2>Hospital Id : <span data-bind="text:id"></span></h2> </div> <div id="two"> <h2>Id : <span data-bind="text:id"></span></h2> <input data-mini="true" tabindex="5" data-bind="value: name" id="name"/> </div> </div> </div> </div> 

Js

 function NavigationService(){ var self = this; self.navigateTo = function(pageId){ $.mobile.changePage($('#' + pageId)); }; } //You need to determine if you want to handle dependencies using requirejs or just global variables. var navigationService = new NavigationService(); function HospitalViewModel(data){ var self = this; self.id = data.id; self.name = ko.observable(data.name); } function DashboardViewModel(data){ var self = this; self.goToList = function(){ navigationService.navigateTo('firstPage'); }; } function HospitalListViewModel(data){ var self = this; self.hospitals = data; self.selectedHospital = ko.observable(); self.selectHospital = function(hospital){ self.selectedHospital(hospital); navigationService.navigateTo('detailsView'); }; } function PageViewModel(){ var self = this; //This list should be retrieved from a service of some kind var allHospitals = [ {"id":"001","name":"Hospital1","location":"SL"}, {"id":"002","name":"Hospital2","location":"SL"} ].map(function(hospital){return new HospitalViewModel(hospital);}); self.hospitalList = new HospitalListViewModel(allHospitals); self.dashboardData = new DashboardViewModel(); } ko.applyBindings(new PageViewModel()); 

To reproduce the problem, Click (DashBoard) → Click (ListElement) → Click (Back, Home) → Click (again a list item → go to the details page), now you can see the naked user interface,

Answer 1

I found the answer for you, and I updated your original script - now it works as intended. The only change has been made for your NavigationService as follows:

 function NavigationService() { var self = this; self.navigateTo = function (pageId) { $.mobile.changePage($('#' + pageId)); $('#detailsView').trigger('create'); // add this line }; } 

There are a few more questions on SO that address this:

• Forcing jQuery Mobile to re-evaluate styles / themes of dynamically inserted content
• jQuery Mobile does not apply styles after dynamically adding content

Answer 2

The problem arises from the KnockoutJS statement with: ".

I assume that "with:" turns the strange "visible" or "display" property into false when ko.observable is empty, and then JQuery (mobile) trying to use the property to apply the style cannot find the DOM element with its selector. The crazy thing is that I did not find the source documenting the problem?

I experimented with a similar problem with some Jquery plugins before (datepicker, masked input ...), the solution I found was to reapply the JQuery plugin after binding the observable.

Unfortunately, this “hacking” is not suitable in your case, since jQuery Mobile is not used manually using JavaScript. I was looking for some way to "upgrade" jQuery Mobile, but no result.

So, I came up with a solution by deleting the “with:” operator, naming the full name of the property and linking the empty “hospital” in the observable to rule out an exception using a NULL reference.

Jsfiddle

 <span data-bind="text:hospitalList.selectedHospital().id"></span> self.selectedHospital = ko.observable({id:"",name:"",location:""}); 

This solution is far from ideal and not very scalable. But, on the contrary, it will check the code of both libraries to determine the "conflict".

Hope this helps!