search

Irrelon / jquery-lang-js

i18n Allow instant language switching on HTML pages without reloading the page.
https://www.irrelon.com
362 stars 132 forks source link

Does it work with HTML tags ? #114

Closed ZeFifi closed 4 years ago

ZeFifi commented 6 years ago

Hi,

First of all, thanks for this awesome library ! But I'm facing an issue : I have an HTML line with :

<p>Hello <a href="http://google.fr">Google</a></p>

And I would like to translate it (let's imagine the following sentence is in french) by :

<p>Hello awesome website!</p>

As you can see there's no link in the translated sentence. Unfortunately, the translation doesn't work because this lib doesn't seem to take html tags into account. Is there a way to make it work ? One of my clients has 2 different kind of sentence : one containing a link and the other one without, like my example.

Thanks a lot,

Philippe

RaulBuzila commented 6 years ago

Hello! Did you find any solution? I'm having the same issue right now

ZeFifi commented 6 years ago

@RaulBuzila Unfortunately yes. Could @Irrelon bring a solution :) ?

Irrelon commented 6 years ago

Hey guys. The library is a simple token-replacement system. It does this by finding text-nodes inside HTML blocks. Therefore inserting HTML is not possible.

The library could be updated to support this with some effort but to be honest, what you probably want is a data binding templating engine rather than using jQuery. You should check out various templating systems for HTML and JS.

If you data-bind your templates, you can then switch languages and update the data that the template is using to match your new language strings, and the templating engine will then update the page automatically to the new HTML.

A good example of this is AngularJS with the angular-translate module.

ZeFifi commented 6 years ago

Hi @Irrelon thanks a lot for getting back to us. It's so sad this library doesn't handle this, but thanks for your work, it helped me !

Irrelon commented 6 years ago

@ZeFifi I agree it would be cool, but the library is not supposed to take the place of a templating engine, it was designed for token replacement only.

Effectively the library is not designed to change the layout or markup of a page, only the textual content.

In the example where you don't need the HTML markup to change you can do this:

<div><span lang="en">Hello </span><a href="myLink.html" lang="en">My Link Name</a></div>

This allows text within the div to be translated as well as text within the link element. The library will not remove or change elements on the page however. I realise that this would be cool but there are already many data-binding template libraries out there :)

RaulBuzila commented 6 years ago

@Irrelon I was looking for translate my text inside of anchor element, like "Home" text from this example. You can see above the HTML code from a unordered list: <li><a href="index.php" lang="en">Home</a></li> There is an existing token for 'Home' text in my json file. I'm using second version of the library. Thanks!

Irrelon commented 6 years ago

@RaulBuzila Hey, so that should work. Is it working for you?

RaulBuzila commented 6 years ago

It's not working. But I've found a temporary fix using pure jQuery. Thanks for your message. And congrats for this work!

yimelia commented 5 years ago

hey guys, I use the code like this seems not working:

<a lang="en" href="http://www.google.com/"><img src="static/img/banner.png">/a>

I'll get this error:

Uncaught TypeError: Cannot set property 'langToken' of undefined
    at Lang._getTextNodes (jquery-lang.js:328)
    at Lang._storeContent (jquery-lang.js:292)
    at Lang._processElement (jquery-lang.js:242)
    at Lang._start (jquery-lang.js:231)
    at Lang._mutation (jquery-lang.js:700)
    at init.$.fn.append (jquery-lang.js:90)
    at HTMLDocument.<anonymous> (mdb.min.js:7)
    at c (jquery.min.js:4)
    at Object.fireWith [as resolveWith] (jquery.min.js:4)
    at Function.ready (jquery.min.js:4)

how to fix it? I want to translate a link with image... thank you!

yimelia commented 5 years ago

sorry, I found that if add one space before , it'll work:

<a lang="en" href="http://www.google.com/"><img src="static/img/social_media/banner-en.png"> </a>

so I have no problem, thank you for this great library!

Irrelon commented 4 years ago

There have been quite a few updates to the library just now to version 4.0.0 and it may solve some of the issues mentioned here, including inserting HTML from translations.

Irrelon commented 4 years ago

Closing for now as I believe version 4.0.0 has solved this problem but if it is still an issue please re-open!