RE: Liferay 7.2 - Change liferay-ui:input-localized XML with javascript

2020-08-19T08:53:56Z

I found a workaround that I will be quoting from my response in StackOverflow:

After a week of studying the case and some tests, I think that I found a workaround for this. Not sure if this is the correct approach, but it is working for me so I will post my current solution for future reference.

After inspecting the HTML, I noticed that the liferay-ui:input-localized tag creates a input tag by default, and then one more input tag for each language, each time you select a new language. Knowing that, I created some functions with Javascript to help me update the inputs created from my liferay-ui:input-localized. Here is the relevant code:

function updateAnnouncementInformation(index) {
&nbsp; &nbsp; var announcement = announcements[index];

&nbsp;   // the announcement['message'] is a XML String
&nbsp; &nbsp; updateInputLocalized('message', announcement['message']);
}

function updateInputLocalized(input, message) {
&nbsp; &nbsp; var inputId = '<portlet:namespace />' + input;
&nbsp; &nbsp; var xml = $.parseXML(message);
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp; &nbsp; var inputCurrent = document.getElementById(inputId);
&nbsp; &nbsp; var selectedLanguage = getSelectedLanguage(inputId);
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp; &nbsp; var inputPT = document.getElementById(inputId + '_pt_PT');
&nbsp; &nbsp; inputPT.value = $(xml).find("Title[language-id='pt_PT']").text();
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp; &nbsp; var inputEN = document.getElementById(inputId + '_en_US');
&nbsp; &nbsp; if (inputEN !== null) inputEN.value = $(xml).find("Title[language-id='en_US']").text();
&nbsp; &nbsp; else waitForElement(inputId + '_en_US', inputCurrent, inputId, xml);
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp; &nbsp; var inputLabel = getInputLabel(inputId);
&nbsp; &nbsp; if (selectedLanguage == 'pt-PT') inputLabel.innerHTML = '';
&nbsp; &nbsp; else inputLabel.innerHTML = inputPT.value;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp; &nbsp; if (selectedLanguage == 'pt-PT') inputCurrent.value = inputPT.value;
&nbsp; &nbsp; else if (inputEN !== null) inputCurrent.value = inputEN.value;
&nbsp; &nbsp; else waitForElement(inputId + '_en_US', inputCurrent, inputId, xml);
}
&nbsp;&nbsp; &nbsp;
function getSelectedLanguage(inputId) {
&nbsp; &nbsp; var languageContainer = document.getElementById('<portlet:namespace />' + inputId + 'Menu');
&nbsp; &nbsp; return languageContainer.getElementsByClassName('btn-section')[0].innerHTML;
}
&nbsp;&nbsp; &nbsp;
function getInputLabel(inputId) {
&nbsp; &nbsp; var boundingBoxContainer = document.getElementById(inputId + 'BoundingBox').parentElement;
&nbsp; &nbsp; return boundingBoxContainer.getElementsByClassName('form-text')[0];
}
&nbsp;&nbsp; &nbsp;
function waitForElement(elementId, inputCurrent, inputId, xml) {
&nbsp; &nbsp; window.setTimeout(function() {
&nbsp; &nbsp; &nbsp; &nbsp; var element = document.getElementById(elementId);
&nbsp; &nbsp; &nbsp; &nbsp; if (element) elementCreated(element, inputCurrent, inputId, xml);
&nbsp; &nbsp; &nbsp; &nbsp; else waitForElement(elementId, inputCurrent, inputId, xml);
&nbsp;&nbsp; &nbsp;}, 500);
}
&nbsp;&nbsp; &nbsp;
function elementCreated(inputEN, inputCurrent, inputId, xml) {
&nbsp; &nbsp;inputEN.value = $(xml).find("Title[language-id='en_US']").text();
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp; &nbsp;var selectedLanguage = getSelectedLanguage(inputId);
&nbsp; &nbsp;if (selectedLanguage == 'en-US') inputCurrent.value = inputEN.value;
}

With this I am able to update the liferay-ui:input-localized inputs according to a pre-built XML String. I hope that someone finds this useful and if you have anything to add, please let me know!

Liferay 7.2 - Change liferay-ui:input-localized XML with javascript

2020-08-12T21:32:04Z

Hello,

I have already posted this on StackOverflow, and I am really trying to get this working, but I could not manage it yet. So I am posting this here with the hope that someone knows how to do this.

I have the following tag in my view.jsp:

<liferay-ui:input-localized id="message" name="message" xml="" />

And I know that I can set a XML and have a default value on my input localized. My problem is that I want to change this attribute with javascript. I am listening for some changes and call the function "update()" to update my information:

function update(index) {
    var localizedInput= document.getElementById('message');
    localizedInput.value = 'myXMLString';
}

Changing the value is only updating the currently selected language input (with the whole XML String). The XML String is correct, but I am not sure on how to update the XML for the input with javascript.Is this possible?