Load translator on web page

Question

Load translator on web page

Navigation

#1 by (1 votes)

2

I have a website to which I created the translation function, but I created some alternative pages which are loaded by js, it does not translate and I do not know why.

These pages are cakephp templates, I really do not think that affects.

These are the codes:

(function ($) {
 $.traducir = function () {
        $('.lang').each(function (index, element) {

            if ($(this).attr('key').indexOf("txt") === 0) {
                $(this).attr("placeholder", arrLang[lang][$(this).attr('key')]);
            } else if ($(this).attr('key').indexOf("btn") === 0) {
                $(this).val(arrLang[lang][$(this).attr('key')]);
            } else if ($(this).attr('key').indexOf("img") === 0) {
                $(this).attr("alt", arrLang[lang][$(this).attr('key')]);
            } else {
                $(this).text(arrLang[lang][$(this).attr('key')]);
            }
            alert(arrLang[lang][$(this).attr('key')]);
        });
    }

})(jQuery);

That's the function to translate:

(function ($) {
$.mostrar = function (id) {
        $.wizard(0, id);
        $(".xMenu").removeClass("cerrarMenu");
        $(".menuContenido").removeClass("verMenu");
        $(".xMenu").removeClass("mostrarElemento");
        $(".xMenu").addClass("ocultarElemento");
        $(".circle").css({"z-index": "100"});
        if ($("#div" + id).attr("id") !== $('div.principal').children('div').attr("id")) {
            $(".principal").css({'position': 'absolute'});
            $(".secundario").css({'position': 'absolute', "left": "1500px"});

            $(".principal").height($(window).height() - 100);
            $(".principal").width($(window).width() - 100);
            $(".secundario").height($(window).height() - 100);
            $(".secundario").width($(window).width() - 100);
            $(".principal").animate({
                left: "-=1500",
                width: "100%",
                opacity: "toggle"
            }, {
                duration: 2000,
                queue: false
            });
            $(".secundario").animate({
                left: "-=1480",
                width: "100%",
                opacity: "toggle"
            }, {
                duration: 2000,
                queue: false
            }).promise().done(function () {
                $(".principal").css({'position': '', 'left': '20px', 'display': ''});
                $(".principal").height("");
                $(".principal").width("");
                $(".principal").html($(".secundario").html());
                $(".secundario").height("");
                $(".secundario").width("");
                $(".secundario").css({'left': '1500px', 'position': '', 'display': ''});
                $(".secundario").hide();
                $(".secundario").html("");
            });
        }
        $.wizard(1, id);
        url = (id === "Home") ? "" : "Form/"+id;
        window.history.pushState("", "", '/Desarrollo/' + url);
    }
 })(jQuery);

This is the function with which I show a div that is a template and hidden another:

$(document).ready(function () {
    $(".linkMenuHome").on('click', function (event) {
        event.preventDefault();
        $('.secundario').load(this.href);
        $.mostrar("Home");
    });
    $(".linkMenuNeeds").on('click', function (event) {
        event.preventDefault();
        $('.secundario').load(this.href);
$.traducir();
        $.mostrar("Needs");

    });
});

There he is supposed to translate but he does not.

javascript jquery

asked by Andrés Vélez 16.05.2018 в 17:32

source

1 answer

Create JSON from an HTML block with its attributes How to concatenate single quotes in echo? (In php)

score 1 · Accepted Answer

The problem is that the .promise() function is asynchronous, so when you load your item the function $.traducir() already executed at some point, to solve it you can execute the function once the promise of jQuery is finished

}).promise().done(function () {
    $(".principal").css({'position': '', 'left': '20px', 'display': ''});
    $(".principal").height("");
    $(".principal").width("");
    $(".principal").html($(".secundario").html());
    $(".secundario").height("");
    $(".secundario").width("");
    $(".secundario").css({'left': '1500px', 'position': '', 'display': ''});
    $(".secundario").hide();
    $(".secundario").html("");

    $.traducir() // Llamamos a la función de traducir una vez resuelta la promesa
});