Question

That sounds complicated, doesn’t it… actually it’s quite easy:

I have a multi-language app and changing languages requires to reload the page.

I want users to
a) be able to change languages without rel=”external”ing the link (restarting the app)
b) do this from any page, so my link will only include the language parameter ?lang=EN

I have been fiddling with this forever, also getting some help from JQM devs and trying to stick close to this example on dynamic pages from the JQM docs.

The following solutions works so-so. See my question below:

$(document).on( "pagebeforechange.lang", function( e, data ){
    // just strings
    if (typeof data.toPage === "string") {  
        if (data.toPage.indexOf("?lang=") > -1) {
            console.log("language change")
            // stop here
            e.preventDefault();
            e.stopPropagation();

            var toUrl = $.mobile.path.parseUrl( data.toPage );
                viewSwitch  = toUrl.search.replace( /.*lang=/, "" ),
                form = "",
                service = "some_coldfusion_cfc_to_load_new_language.cfc",
                method = "locale",
                returnformat = "JSON",
                targetUrl = toUrl.filename,
                // fake submit
                formdata = "form_submitted=lang&viewSwitch="+viewSwitch+"&method="+method+"&returnformat="+returnformat,
                successHandler = function() {       

                    alert("changed language successfully")
                    // now we changepage
                    $.mobile.changePage( targetUrl, { 
                        reloadPage: true,
                        transition: "fade",
                        allowSamePageTransition: true
                        });
                    };
            // send AJAX to update language server side    
            // page will reload on success
            ajaxFormSubmit( form, service, formdata, targetUrl, successHandler );
            }
        } 
    });

Ok. This works, but… the page is added as a new page to the DOM (with data-external-page=”true”, so when I click the next page, the page will be removed.

Question:
How do I make this reloaded page the new “anchor” page = the page that stays in the DOM? I can remove data-external-page, but what other things do I need to do? Set Base?…

Thanks for any hints!

Answer 1

You can reload a page pretty easily using $.mobile.changePage() as long as you are reloading an external page (not a pseudo-page of a multi-page template):

$.mobile.changePage('myPage.cfm?lang=EN', {
    reloadPage : true
});

This will request a new page from your server which can output the content in whatever language is selected, then removes the current version of this page in the DOM and finally adds the new version to the DOM.

Documentation for reloadPage flag: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html