Browser unable to interpret HTML tag stored in ModelMap as HTML content

I am working on a spring controller with the code snippet below :

@RequestMapping(value="/getMessage.htm", method=RequestMethod.POST)
protected String uploadFile(ModelMap model){

     //... other codes

    model.addAttribute("theMessage", "Hello world <b>how are you</b> today?");

    return "the-view";
}

When displaying the message on the client side using JavaScript, I encountered an issue as shown in the code snippet below :

document.getElementById('theMessageSpan').innerHTML = '<c:out value="${theMessage}"/>';

Unfortunately, the displayed message appears as a string literal.

Hello world <b>how are you</b> today?

My intention is to display the message like this :

Hello world how are you today?

Attempts to use apache commons' StringEscapeUtils.unescapeHtml before adding the text to the ModelMap provided no solution.

Any insights on how to solve this issue would be greatly appreciated.

Answer №1

My understanding is that the <c:out> tag automatically escapes XML. To prevent this, you must specifically instruct it not to by using the following syntax:

<c:out escapeXml="false" value="${theMessage}"/>

I couldn't locate more recent documentation, but you can refer to the information here. Within the list of attributes, you will find

escapeXml

Controls whether characters <,>,&,'," in the resulting string are converted to their corresponding character entity codes. The default setting is true.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to transfer Base64 encoded data to C# through AJAX

I'm facing an issue where a base64 string I send through ajax to an aspx page with C# code behind always arrives empty. Despite other form fields posting successfully, this particular string is not making it through. The base64 string in question app ...

I am in the process of remaking John Conway's Game of Life, but I'm having some issues with my algorithms not properly recognizing the neighboring cells. What could be causing this problem?

I need some help with my code. I've been trying to figure out the issue in my check for surrounding lives function for a while now, but I can't seem to pinpoint the error. Can anyone take a look at my code and help me identify where I've gon ...

Struggling to comprehend the node.js walker concept

I am struggling to grasp the concept of how the signature/header of the node.js walker functions. I understand that a walker can go through a directory and apply filters, but I'm unsure about how the signature of the .on function works. For example: ...

Transform the JSON data into a uniform structure by eliminating unnecessary information

Here is a snippet of JSON Data from Mongo : { "status": 1, "message": "", "data": [ { "_id": "5f489968a26b303c54d0a174", "name": "Mobile", "SubCategory": [ { "_id": ...

Merge two arrays of objects together and eliminate duplicates based on a specific attribute

I am currently working with two arrays of objects. One array retrieves data from an API to display in the application, while the other array fetches data from localStorage, which includes modifications made to the original data stored in the first array. M ...

Issues within jQuery internal workings, implementing improved exception handling for fn.bind/fn.apply on draggable elements

I've been experimenting with wrapping JavaScript try/catch blocks as demonstrated on this link. It functions properly, essentially encapsulating code in a try/catch block to handle errors like so: $.handleErrors(function(e){ console.log("an erro ...

How can I combine various array values of equal length using a delimiter to create one final array?

I am trying to combine the values from 3 separate arrays, all of which have the same length. var title = ['title 1','title 2','title 3']; var description = ['description 1','description 2','descri ...

Recreating dropdown menus using jQuery Clone

Hey there, I'm facing a situation with a dropdown list. When I choose "cat1" option, it should display sub cat 1 options. However, if I add another category, it should only show cat1 options without the sub cat options. The issue is that both cat 1 a ...

How to set a default option in a dropdown menu using Angular 4

Many questions have been raised about this particular issue, with varying answers that do not fully address the question at hand. So here we go again: In my case, setting the default value of a dropdown select by its value is not working. Why is that so? ...

Pondering in AngularJS - what is the best way to alter the DOM during an AJAX call?

I'm completely new to AngularJS and trying to transition from a jQuery background. After reading through "Thinking in AngularJS if I have a jQuery background?" on Stack Overflow, I understand the concept but am struggling to implement it without depen ...

After choosing an image from the gallery, my app suddenly crashes

I'm facing an issue with the upload function in my app where it force closes after selecting an image from the gallery. Below is the code snippet: AddCategory.java public class AddCategory extends AppCompatActivity implements View.OnClickListener { ...

Tips for Extracting Real-Time Ice Status Information from an ArcGIS Online Mapping Tool

My goal is to extract ice condition data from a municipal website that employs an ArcGIS Online map for visualization. I want to automate this process for my personal use. While I have experience scraping static sites with Cheerio and Axios, tackling a sit ...

Using the "number" input type gives the user the ability to easily remove numbers and leave the input field

I have integrated angularJS with rzSlider to provide users the option of manually entering a number value or using the slider to input the value. However, I'm facing an issue where if a user drags the slider and then deletes the entire input from the ...

Display the overlay solely when the dropdown is visible

My code works, but the 'overlay active' class only functions properly when I click on the button. If I click outside of the button, it doesn't work as intended. I want the 'overlay active' class to be displayed only when the dropd ...

Is there a way to update the content of both spans within a button component that is styled using styled-components in React?

I am interested in creating a unique button component using HTML code like the following: <button class="button_57" role="button"> <span class="text">Button</span> <span>Alternate text</span> ...

Is it possible to return a promise within the .then function in AngularJS?

I have a unique service called "usersService". I want to create a special method that interacts with another custom service I built. This other service has two handy methods: getUser() and getCurrentUser(). The getCurrentUser() method relies on the injecte ...

What could be the reason behind the failure of this :after element?

I am facing an issue with the preloader on my webpage where the animation is not displaying as expected. The animation should appear on top of a dark black background before the page fully loads, but it seems to be missing. The CSS for the animation works ...

javascript: verify the presence of uppercase and lowercase letters

Can the validation of at least 2 lowercase and 2 uppercase letters be implemented when checking the case? Below is the condition I am currently using. function HasMixedCase(passwd){ if(passwd.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) return true ...

What purpose does the symbol '$' serve in React component properties?

While delving into the world of styled-component, I encountered some difficulties with the 'adapting based on props' aspect. import './App.css'; import styled from 'styled-components' const PrimaryButton = styled.button` co ...

Display a detailed list of locations retrieved from the Google Places API through manual input

Currently, I am implementing the Google Places Autocomplete API to provide users with suggestions for nearby locations. However, I have noticed that the API lacks the feature to control the placement of these autocomplete results. It simply adds a '.p ...