0

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!

4

1 回答 1

1

$.mobile.changePage()只要您正在重新加载外部页面（不是多页面模板的伪页面），您就可以很容易地重新加载页面：

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

这将从您的服务器请求一个新页面，该页面可以以所选的任何语言输出内容，然后在 DOM 中删除此页面的当前版本，最后将新版本添加到 DOM。

reloadPage标志文档：http: //jquerymobile.com/demos/1.1.0/docs/api/methods.html

于 2012-06-18T18:54:36.077 回答