Home / Questions / 164919
Accepted
Andrés Vélez
Asked: 2020-05-17 07:32:11 +0800 CST 2020-05-17 07:32:11 +0800 CST

Load translator on website

  • 772

I have a web page 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.

Those pages are cakephp templates, I really don't think that affects it.

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 is 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 one divthat is a template and hide 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 it is supposed to translate but it doesn't.

javascript

1 Answers

  1. Best Answer

    The problem is that the function .promise()is asynchronous, so when you load your element the function $.traducir()has already been executed at some point, to solve it you can execute the function after the jQuery promise 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
});
    • 1