Translate-plugin: Custom AJAX onSwitchLocale not redirecting

[o0alexela0o]

Hey, I made custom AJAX request, it fires onSwitchLocale, but not redirects
What part Im missing?

    onSwitchLocale: function(newLang){
        var self = this;
        this.set({loading : true});
        $.ajax({
                url: self.get('url'),
                data: { locale: newLang }, 
                type: 'POST',
                dataType: 'json',
                headers: {
                    "X-OCTOBER-REQUEST-HANDLER": "onSwitchLocale"
                },
                success: function(res){                    
                },
                error: function (err) {
                    console.log(err);
                }
        })

    }

getting back : {"X_OCTOBER_REDIRECT":"http:\/\/localhost\/israplanet.com"}
but page not reloads.

if i'm using
<a href="#" data-request="onSwitchLocale" data-request-data="locale: 'en'">English</a>,

it does.

Please help.
thanks

[LukeTowers]

Because you aren't using the AJAX framework to handle the request. Use

$.request('onSwitchLocale', { data: {locale: 'en'} });

instead of your call to $.ajax().
See http://octobercms.com/docs/ajax/javascript-api for more information on utilizing the AJAX framework through the JS API instead of the DataAttributes API

[CharlyJazz]

I dont want add jquery for my project to make that request, any suggestion?

[LukeTowers]

I dont want add jquery

... You already have? $.ajax is jQuery, and so is the data attributes API.

The short answer to this though if you're not using either API is to handle the response yourself:

success: function(res){
    if (res.X_OCTOBER_REDIRECT) { window.location = res.X_OCTOBER_REDIRECT }
},

[osmanzeki]

(For future Google Search and other visitors lead here by search)

I was curious to see how one could use another library as an alternative to $.ajax so here's a successful example using the Axios library.

I did not try with other HTTP/Ajax libraries out there, but overall it should be quite the same.

If you try the following on the default OctoberCMS Ajax Framework demo page, it seems to work.

Here's an online example of that page where you can try this yourself:
https://s1.demo.opensourcecms.com/octobercms/demo/ajax

If you change the values in the requestParams object and run this script in Chrome's Console tab in the Developper Tools, you should see that it works. I used jQuery in the onCalculationComplete function but could also have hydrated a React/Mobx/Vuex/Redux Store or any other logic with the request data too.

I'm not sure if this works when you don't add the Ajax Framework component at the bottom of the footer (like it is done in the default demo).

Example with Axios

// Download the Axio HTTP library from a CDN
var script = document.createElement("script");
script.src = "https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js";
document.getElementsByTagName("head")[0].appendChild(script);

// When the script is loaded, do a POST request
script.onload = function() {
    // These are the OctoberCMS demo's Calculator Ajax Framework example values
    var requestParams = {
        value1: 5,
        operation: "+",
        value2: 5
    };

    // The data needs to be encoded as an url param ("?key=value&key2=value2" etc)
    // So here's a nice ES6 function that does that. This will only work on recent (thus most) browsers
    // If you need this in a legacy codebase, use babel or write an alternative.
    function encodeGetParams(paramsObject) {
        return Object.entries(paramsObject)
            .map(kv => kv.map(encodeURIComponent).join("="))
            .join("&");
    }

    // Callback on success
    function onCalculationComplete(calcresult) {
        $("#result")
            .find(".text-muted")
            .remove();
        $("#result").html('<span class="lead">' + calcresult + "</span>");
    }

    // The Axios call
    window
        .axios({
            method: "post",

            // Post on the same page
            url: window.location.href,

            // Pass the url encoded params
            data: encodeGetParams(requestParams),

            // We need a few specific headers for this to work it seems
            headers: {
                Accept: "application/json, text/javascript, */*; q=0.01",
                "Content-Type":
                    "application/x-www-form-urlencoded; charset=UTF-8",
                "X-OCTOBER-REQUEST-HANDLER": "onTest",
                "X-OCTOBER-REQUEST-PARTIALS": "calcresult",
                "X-Requested-With": "XMLHttpRequest"
            }
        })

        // On success
        .then(function(response) {
            console.log(data);

            var data = response.data;
            onCalculationComplete(data.calcresult);
        })

        // On error
        .catch(function(error) {
            console.log(error);
        });
};

Example with good old jQuery $.ajax

function onCalculationComplete(calcresult) {
    $("#result")
        .find(".text-muted")
        .remove();
    $("#result").html('<span class="lead">' + calcresult + "</span>");
}

$.ajax({
    url: window.location.href,
    data: {
        value1: 5,
        operation: "+",
        value2: 5
    },
    type: "POST",
    dataType: "json",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        "X-OCTOBER-REQUEST-HANDLER": "onTest",
        "X-OCTOBER-REQUEST-PARTIALS": "calcresult"
    },
    success: function(response) {
        console.log(data);

        var data = response;
        onCalculationComplete(data.calcresult);
    },
    error: function(error) {
        console.log(error);
    }
});