jQuery mobile: json processing before mobile enhancements - json

Question

I'm starting to develop a mobile app with jQuery Mobile. The idea is to build HTML static pages, and before showing them, call to the server to obtain the i18n text for the input labels and buttons. I mark the HTML elements that are susceptible to change the inner text with an special attribute: "data-i18n":
For a label:
<label data-i18n="login.username" for="loginPaciente.username">login.username</label>
For a button:
<button data-i18n="login.submit" type="submit" data-theme="a">login.submit</button>
I call to the server using JSON:
$('#pageLogin').live('pagebeforeshow',function(event, ui){
var action = "/MyServerApp/namespace1/mobile_Action_Login_configPage.action";
$.getJSON(action, function(data) {
var resources = data.i18n_resources;
var id, text;
var $scope = $('#pageLogin');
for (i=0; i<resources.length; i++){
id = resources[i].id;
text = resources[i].text;
$scope.find('[data-i18n="' + id + '"]').html(text);
}
});
});
This works perfectly with the labels, because JQM doesn't modify these HTML elements. The problem comes with the button, because JQM hides the button I've defined, and creates a new span to render the button. When I read the JSON result, I can find and change the button I've defined, but not the new span that JQM has created, so the text that appears on screen is the old one: "login.submit".
Is there any way to execute the JSON call before JQM changes the HTML code?
P.D.: The reason for not building the whole HTML page dynamically (including i18n texts) is that in the future, I want to encapsulate the web app with PhoneGap or a similar shell, and I want to distribute the HTML pages, CSS and scripts inside the application, and minimize the data traffic with the server.
Thanks in advance:
Carlos.
EDIT: invoking $scope.trigger('create') after changing the text doesn't solve the problem.

Answer 1

Finally I've found the solution to my problems by myself, catching the event "pagebeforecreate".
I invoke this function on each page I need to internationalize, passing the server action I need to call and the page id:
function utils_loadConfigPage(action, pageid){
$(document).bind("pagebeforecreate", function(){
var $page = $('#' + pageid);
var _action = action;
var paramCallback = "jsoncallback=?";
var concat = "?";
if (_action.indexOf("?")!=-1){
concat = "&";
}
_action += concat + paramCallback;
$.ajaxSetup({"async": false});
$.getJSON(_action, function(data){
utilis_doConfigPage(data, $page);
});
$.ajaxSetup({"async": true});
});
}
Note that I force to use synchronous calls to the server, in order to avoid the page mobile enhancing before the i18n texts were ready.
This is the function that is invoked in the json callback:
function utils_doConfigPage(data, $scope){
utils_seti18nTexts(data, $scope);
utils_setPlaceholders($scope);
}
This function finds all i18n elements and override their inner html with the translated texts:
function utils_seti18nTexts(data, $scope){
var resources = data.i18n_resources;
var id, text;
for (i=0; i<resources.length; i++){
id = resources[i].id;
text = resources[i].text;
$scope.find('[data-i18n="' + id + '"]').html(text);
}
}
This function overrides the placeholder texts for the inputs:
function utils_setPlaceholders($scope){
$scope.find('div[data-role="fieldcontain"].ui-hide-label').each(function(){
var textLabel = $(this).find('label').html();
$(this).find('.placeholder').attr('placeholder', textLabel);
});
}
And finally, this is the jsp that produces the i18n resources. I use Struts2, so the jsp is not invoked directly. I invoke an action and the jsp is only the view. The i18n resources are obtained using Struts2 capabilities:
<%# page contentType="application/json; charset=UTF-8" pageEncoding="UTF-8" %>
<%# taglib prefix="s" uri="/struts-tags"%>
<s:property value="jsoncallback" />({
"i18n_resources":
[
{
"id" : "MOBILE_APP_NAME",
"text" : "<s:text name="APP_NAME" />"
}
,{
"id" : "TITLE_LOGIN",
"text" : "<s:text name="TITLE_LOGIN" />"
}
,{
"id" : "LOGIN_USERNAME",
"text" : "<s:text name="LOGIN_USERNAME" />"
}
,{
"id" : "LOGIN_PASSWORD",
"text" : "<s:text name="LOGIN_PASSWORD" />"
}
,{
"id" : "BUTTON_OK",
"text" : "<s:text name="BUTTON_OK" />"
}
,{
"id" : "MOBILE_APP_FOOTER",
"text" : "<s:text name="MOBILE_APP_FOOTER" />"
}
]
})
I don't know if this is the best way to internationalize a JQM application. Any suggestion will be apreciated.

Answer 2

You can just change the text of the <span> element with the ui-btn-text class:
$scope.find('[data-i18n="' + id + '"]').find('.ui-btn-text').html(text);
Or if you aren't sure if the element will have been initialized by jQuery Mobile you can check for the existence of the ui-btn-class first:
var $btn_text = $scope.find('[data-i18n="' + id + '"]').find('.ui-btn-text');
if ($btn_text.length > 0) {
$btn_text.html(text);
} else {
$scope.find('[data-i18n="' + id + '"]').html(text);
}