For my current project, I am utilizing the jquerymobile framework along with the i18Next localization library.
Here is the HTML code snippet:
<div id="messageboxPage" data-role="page" data-theme="a">
<div data-role="header" data-theme="a"></div>
<div id="messagePage" data-role="content" data-theme="a">
<div class="barContainer" id="barContainer">
<div class="ui-bar ui-bar-b ui-btn-corner-all" style=" margin-top: 40px; padding-left: 0px;padding-right:10px; ">
<div style="float: left; width: 30%;"> <a href="#" id="aNo" onclick="SetActive('aNo')" class="LnkButton" data-theme="a" data-role="button" data-inline="true" data-mini="true">Cancel</a>
</div>
<div style="float: left; width: 30%;padding-left: 6%; padding-right: 2%;"> <a href="#" id="aAccept" onclick="Supprimer();" data-theme="a" class="LnkButton" data-role="button" data-inline="true" data-mini="true">Delete</a>
</div>
<div style="float: right; width: 30%;"> <a href="#" id="aReply" onclick="Reply();" data-theme="a" class="LnkButton" data-role="button" data-inline="true" data-mini="true">Reply</a>
</div>
</div>
</div>
</div>
</div>And here is the corresponding JavaScript code:
window.opts = {
lng: 'fr',
getAsync: true,
ns: {
namespaces: ['ns.controls'],
defaultNs: 'ns.controls'
},
useLocalStorage: false,
debug: true
};
$.i18n.init(opts).done(function () {
alert('i18n init function');
$('#aNo').text("No Merci!");
$('#aAccept').text("Supprimer");
$('#aReply').text("Respondre");
$('#messageboxPage').trigger('pagecreate');
});
$(document).ready(function () {
alert('messagebox document ready');
});The main issues at hand are that the button styles are being lost when text changes and setting text labels has not been successful even after triggering page creation. Any suggestions on how to address these problems?
To view a working demonstration, check out this JS Fiddle.