Using JavaScript to manipulate JSTL tags: A step-by-step guide

Question

Using JavaScript to manipulate JSTL tags: A step-by-step guide

Is there a way to handle JSTL tags (fmt:) within a JavaScript response-handler function? For instance:

I am trying to switch languages via AJAX, therefore I need to update my tool panel using JavaScript and process fmt:setLocale in the response-handler function
When updating select dropdown menus via AJAX for localization purposes, how can I utilize fmt:message in JavaScript?

However, the JSP engine does not handle .js files. This is causing issues with the following code:

document.findElementById("div1").innerHTML = "<fmt:message key="word_from_DB"/>";
document.findElementById("div2").innerHTML = "<fmt:setLocale value="en"/>";

Question: What are some alternative methods to process these tags from JavaScript or where should I look for solutions?

javascript ajax jsp

Answer 1

Answer №1

To achieve your desired outcome, the approach you take will depend on the specific content of your JSP and JS files. Here is a potential solution:

JS:

function updateDivContent(html1, html2) {
    document.findElementById("div1").innerHTML = html1;
    document.findElementById("div2").innerHTML = html2;
}

JSP:

...
<script>
updateDivContent("<fmt:message key="word_from_DB"/>", "<fmt:setLocale value="en"/>");
</script>
...

UPDATE based on feedback:

JSP (URL = "/cities"):

String country = request.getParameter("country");
String locale = request.getParameter("locale");
List<City> cities = getCitiesFromDB(country, locale);
out.println(objectToJSON(cities));

JS (using jQuery):

function addOption(value, text) {
    return $("<option></option>").html(text).val(value);
}

function displayCities(cities) {
    var $select = $("#city_select");
    $select.empty();
    for (var i = 0; i < cities.length; i++) {
        var $option = addOption(cities[i].name, cities[i].name);
        $select.append($option);
    }
}

function loadCities(country, locale) {
    var url = "/cities";
    return $.ajax(url, {
        data: {
            country: country,
            locale: locale
        }
    });
}

// invoke this method to fetch initial cities
// repeat the process when selecting a new country or locale
loadCities(country, locale).then(displayCities);

Answer 2

To achieve your desired outcome, the approach you take will depend on the specific content of your JSP and JS files. Here is a potential solution:

JS:

function updateDivContent(html1, html2) {
    document.findElementById("div1").innerHTML = html1;
    document.findElementById("div2").innerHTML = html2;
}

JSP:

...
<script>
updateDivContent("<fmt:message key="word_from_DB"/>", "<fmt:setLocale value="en"/>");
</script>
...

UPDATE based on feedback:

JSP (URL = "/cities"):

String country = request.getParameter("country");
String locale = request.getParameter("locale");
List<City> cities = getCitiesFromDB(country, locale);
out.println(objectToJSON(cities));

JS (using jQuery):

function addOption(value, text) {
    return $("<option></option>").html(text).val(value);
}

function displayCities(cities) {
    var $select = $("#city_select");
    $select.empty();
    for (var i = 0; i < cities.length; i++) {
        var $option = addOption(cities[i].name, cities[i].name);
        $select.append($option);
    }
}

function loadCities(country, locale) {
    var url = "/cities";
    return $.ajax(url, {
        data: {
            country: country,
            locale: locale
        }
    });
}

// invoke this method to fetch initial cities
// repeat the process when selecting a new country or locale
loadCities(country, locale).then(displayCities);

Using JavaScript to manipulate JSTL tags: A step-by-step guide

Answer №1

Similar questions

Efficiently communicating updates to clients after executing multiple HTTP requests simultaneously in RxJS

What could be the reason for the page scrolling upwards when clicking on href="#"?

Transferring form data to JavaScript for executing jQuery/AJAX request to fetch information from the database – what a journey!

JavaScript Inferno" - Similar to the concept of "DLL Hell

Receiving a data response from AJAX in Node.js is easy with these steps

Issue with Vue Router not rendering components after dynamically importing them

Creating a D3js line chart by inputting JSON data with d3.json

Avoid using the JQuery IIFE outside of the document ready function as it is considered a

The ng-change event is triggered for radio buttons that are generated using ng-repeat the first time they appear, but not for subsequent appearances

Is the V8 engine programmed to populate the call stack before executing the code, or does it execute the code upon entering a function?

What is the most efficient method for sending query parameters through a URL in Vue.js with Axios?

Deciphering the intricacies of VUEX-STORE modules

When using Mongoose in Node, attempting to create an instance with a model may result in the error message "not a function."

The error message I'm encountering is IntegrationError: The stripe.confirmCardPayment intent secret is invalid. The value must be a client_secret string

Escaping Special Characters in JavaScript

Transform the Angular function into a factory and take advantage of caching

Navigating back to an Angular page from a non-Angular page using Protractor

SEO Friendly URL for JQuery Tabbed Content

What is the process for configuring an HttpPost and specifying a header in JavaScript?

Combining arrays in Javascript without using the concat method