Change language from dynamically content using Javascript - javascript

My project should support different languages for the GUI (spanish, english, german, etc). I'm using CodeIgniter, so I haven't got any problem with PHP views using Language Class. I can load some previously defined vars on PHP to create views in different languages.
The problem comes here:
Some features (a lot of them actually) use Javascript: personalized context menu for some items, differents DIVs created dynamically, etc. The most of this features are created dynamically, so I can't know the language selected (I can create a lot of duplicated code, one for each language, but this is too redundant).
I need to find a way to translate this content into the new language previously selected by user.
For example:
The user right-click and the context menu have the following options (created dynamically using Javascript):
Hi
Goodbye
When the user change the page language to 'Spanish', the context menu should show:
Hola
Adios
Is there any way to save some variables with all the names in different languages, and then load to create the menus?
Sorry for the big post. I hope everyone can help me or bring me a little tip.

there are several systems to use when you want i18n (short for "internationalization") to work in a server side language as well as in client side Javascript.
this is an example I found for PHP and JavaScript: http://doc.silverstripe.org/sapphire/en/topics/i18n
I've done this in PHP, Ruby and Python. In general there is one way this is done. You create a library of text. this library has pointers to specific pieces of that text. In your code you use that pointer to refer to that piece of text. What the example above does provide you a way to create a library in PHP that can be compiled to a JavaScript equivalent that you can call in JavaScript. Basically it completely separates copywriting and other text from the code.
I hope this helps you on your way.

Is there any way to save some
variables with all the names in
different languages, and then load to
create the menus?
I assume you're asking if you can save these user preferences?
If so store it as a cookie on the user's computer
If you don't mean this, and you want to store all of the variations of languages, then you could store it in an array which can be loaded by javascript

Related

Write a auto-fill and submit web form program

I am trying to write a program which can automatically fill in and submit a form in a web in particular time slot.
But i have no idea how and where to start. i searched this in google, but only resulting very general answer like using JavaScript, python. Can anyone tell me which languages should i learn first?
Despite the fact that the generic advice on this thread is quite good, it's pretty broad. I have tackled this problem myself, and despite the fact that I posted a fully functional example, it was deleted by a moderator, despite "theoretically answering the questions".
So, for anyone else looking to solve this problem, you will want to do the following:
Use Selenium and openpyxl, these are two modules that are relatively straight forward and will perform this task perfectly.
You will use selenium to open your web page, and retrieve the relevant html elements that you wish to populate. I suggest finding elements by xPath if you aren't well versed in HTML. The Xpath finder google chrome addon will make this very easy to do.
The driver.get() and driver.find_element_by_xpath() will be the functions that you need.
We will use openpyxl to work with our excel sheet. 'load_workbook()' will load a workbook. We will then use the 'sheet = workbook.active' function to access a sheet from within the workbook.
We now have the functionality to open our website and select an excel sheet.
Now we need to assign cell values to variables, so that we can then populate the HTML form. We assign a variable to each COLUMN in the workbook. So if column A contained first_names we could assign that to by a variable by writing 'FNAME = sheet['A']. Now that we have a way of referring to cells within columns we can begin feeding the data into our HTML form.
We populate our form by using the .send_keys() function in Selenium.
first_name.send_keys(FNAME.value)
the .value makes sure that the correct value is displayed, as sometimes selenium will print the cell function rather than value, we do not want this to happen.
Now that we can print values to our HTML forms from our excel sheet we will need to iterate through each row. We do this with a simply while loop:
i = 1
x = 1
while x <= 50:
first_name.send_keys(FNAME[i].value)
i+=1
x+=1
driver.quit
Once the loop occurs 50 times, the driver will quit, closing the browser and stopping the script.
Some other misc stuff you may find useful when trying to automate this:
driver.back()
time.sleep()
If you would like to see an actual working example feel free to PM me, as apparently posting it here doesn't contribute to the discussion.
The answers you found, as general as they are, are correct. I'll try to explain it to you.
As you are trying to automatize some activity, you have to use a script language to basically
Get stuff references (like getting indexes, forms/fields IDs, etc)
Insert/change stuff (like filling a field, following the field references)
Save stuff (prepare a file, with field references and it's content, that can be injected to the specific system or website)
One example of script language is Python.
So you already have your script. Now you need to inject it on the page. The programming language that can do it for you is Javascript, or JS. It allows you to talk with the webpage, GETting data/references or POSTing data.
I suggest you to write a Python script using a library called Selenium Webdriver.
It will be easy to implement what you have in mind.

CKEditor 5 - allow span elements and attributes

I am trying to make a custom plugin with CKEditor 5 Framework. However I am not able to insert (via editor.setData()) any attributes for paragraphs and other elements like span. Is there any way to achieve that?
Thanks!
CKEditor 5 implements a custom data model about which you can read more in the Architecture introduction guide.
The existence of a custom data model means that the editor needs to know how to convert that model to a view structure (the DOM) for editing. Also, since typically the editor outputs HTML (or a structurally "compatible" format as Markdown, BBCode, etc.) similar conversion needs to be done to get the data from the editor. Finally, the editor needs to be able to convert the view to the model so you are able to load data into the editor.
Side note: You might also want to save the model directly into your database which would save you from converting the view to the model (on setData()), but while possible it still means that the editor needs to know how to convert the model to the view for editing and the view to the model for pasting.
What does all this mean? It means that unless a particular piece of content can be picked by an existing editor feature, it will be dropped. It simply won't be converted from the view to the model on data load and hence will be forgotten.
Therefore, it's all about converters. You need to teach your editor how to understand HTML and how to render HTML. Actually, you also need to teach it how these particular pieces of (at this point) the model can be edited (by configuring the schema and implementing a proper UI).
So, how to write converters and configure the schema?
Well, this is a problem at the moment because right now (as of Dec 2017) we're in a middle of a CKEditor 5 engine refactoring. The architecture we have is great but the APIs proved to be too hard to use, so we're now improving them which means that whatever I'd write here would be invalid next month. So, instead, I recommend going through the source of the CKEditor 5 packages (e.g. see the plugins in the basic styles package).

How to make a mulitlingual website?

I am an amateur programmer and I want to make a mulitlingual website. My questions are: (For my purposes let the English website be website nr 1 and the Polish nr 2)
Should it be en.example.com and pl.example.com or maybe example.com/en and example.com/pl?
Should I make the full website in one language and then translate it?
How to translate it? Using XML or what? Should website 1 and website 2 be different html files or is there a way to translate a html file and then show the translation using XML or something?
If You need any code or something tell me. Thank You in advance :)
1) I don't think it makes much difference. The most important thing is to ensure that Google can crawl both languages, so don't rely on JavaScript to switch between languages, have everything done server side so both languages can be crawled and ranked in Google.
2) You can do one translation then the other, you just have to ensure that the layout expands to accommodate more/less text without breaking it. Maybe use lorem ipsum whilst designing.
3) I would put the translations into a database and then call that particular translation depending on whether it is EN or PL in the domain name. Ensure that the webpage and database are UTF-8 encoding otherwise you will find that you get 'funny' characters being displayed.
My Advice is that you start to use any Framework.
For instance if you use CakePHP then you have to write
__('My name is')
and in translate file
msgid "My name is"
msgstr "Nazywam siÄ™"
Then you can easy translate to any other language and its pretty easy to implement.
Also if you do not want to use Framework you can check this link to see example how it works:
http://tympanus.net/codrops/2009/12/30/easy-php-site-translation/
While this question probably is not a good SO question due to its broad nature. It might be relevant to many users.
My approach would be templates.
Your suggestion of having two html files is bad for the obvious reason of duplication- say you need to change something in your site. You would always need to change two html files- bad.
Having one html file and then parsing it and translating it sounds like a massive headache.
Some templating framework could help you massively. I have been using Smarty, but that's a personal choice and there are many options here.
The idea is you make a template file for your html and instead of actual content you use labels. Then in your php code you include the correct language depending on cookies, user settings or session data.
Storing labels is another issue here. Storing them in a database is a good option, however, remember you do not wish to make 100's of queries against a database for fetching each label. What you can do is store them in a database and then have it generate a language file- an array of labels->translations for faster access and regenerate these files whenever you add/update labels.
Or you can skip the database altogether and just store them in files, however, as these grow they might not be as easy to maintain.
I think the easiest mistake for an "amateur programmer" to make in this area is to allow the two (or more) language versions of the site to diverge. (I've seen so-called professionals make that mistake too...) You need to design it so everything that's common between the two versions is shared, so that when the time comes to make changes, you only need to make the changes in one place. The way you do this will depend on your choice of tools, and I'm not going to start advising on that, because it depends on many factors, for example the extent to which your content is database-oriented.
Closely related to this are questions of who is doing the translation, how the technical developers and the translators work together, and how to keep track of which content needs to be re-translated when it changes. These are essentially process questions rather than coding questions, so not a good fit for SO.
Don't expect that a site for one language can be translated without any technical impact; you will find you have made all sorts of assumptions about the length of strings, the order of fields, about character coding and fonts, and about cultural things like postcodes, that turn out to be invalid when you try to convert the site to a different language.
You could make 2 different language files and use php constants to define the text you want to translate for example:
lang_pl.php:
define("_TEST", "polish translation");
lang_en.php:
define("_TEST", "English translation");
now you could make a choice for the user between polish or english translation and based on that you can include the language file.
So if you would have a text field you put its value to _TEST (inbetween php brackets).
and it would show the translation of the chosen option.
The place i worked was doing it like this: they didn't have to much writing on their site, so they were keeping it in a database. As your tags have a php , I assume you know how to use databases. They had a mysql table called languages with language id(in your case 1 for en and 2 for pl) and texts in columns. So the column names were main heading, intro_text, about_us... when the user comes it selects the language and a php request get the page with that language. This is easy because your content is static and can be translated before site gets online, if your content is dynamic(users add content) you may need to use a translation machine because you cannot expect your users to write their entry in all languages.

Update html 'permanenlty' with no database?

I made a website for crowd-funding. I know that we should have used a platform for this. (other issues determined us not to)
The page that I have created has no database behind.
What I am trying to do is create some kind of hidden form that updates the sum that was raised so far.
I am not a very technical person but I do know that modifications made through javascript / jQuery ar usually temporary.
But, since scripts like website visit counters do exist I am wondering and appealing to the collective wisdom of this community:
Is there a way to update an attribute of a html element through some kind of hidden form without a database behind?
Perhaps writing to a .json file and updating the attribute from the data?
(I need to do this today as I will not be at the office during the campaign and it is very hard for a person that has no technical skills to do it... not that hard, but still, not user friendly.)
In order to display variable data, you need to get these data somewhere.
Do you have write access to your server file system?
What service level do you expect during data manipulation? Does it suffice if you just go and upload modified file every time manually?
What about embed in your Web page an IMG and then upload it with always the same name and different content?
There is a database even behind "dummy" hit counters, no magic.

How can I populate an HTML form from an XML config file using only Javascript?

I'm working on a simple proof-of-concept configuration page for an application. The application has an XML configuration file that is, shall we say, non-trivial to edit manually. I've created an HTML5 form and, with the help of jQuery, have built a working interface for creating new settings. Some settings are single-instance, and always present, but others are grouped together. So, for example, a new "connection" setting has a bunch of sub-settings, depending on the type of connection being added. The application may have zero or more of these connections. I currently have this working in the form for creating new connections.
The problem is, I don't simply want to add new settings; I want to view and edit the old! Which has brought me down the road of importing XML values into HTML forms. However, it's not a simple 1:1; if, for example, an XML connection setting exists, I'll have to check the type, create the appropriate form fields, and then populate them; multiply this by however many connections I encounter in the XML file.
Unfortunately, everything I've found on the subject so far assumes an incredibly simplistic XML setup and/or additional language requirements (PHP, Ruby, etc) which are not available to me in this situation.
Is this a dead end? Or is there a method you could suggest?

Categories