Rendering mySQL string as HTML in Bootstrap Modal window

Question

Sorry if this has been asked before. I couldn't find anything that resolved this issue for me.

I have Google Maps API pulling data from a mySQL database via PHP. The results are plotted on the map as markers.

From there, I am using Bootstrap to display a modal window when a marker is clicked. The content of the modal is coming dynamically from the database.

Everything is working fine EXCEPT one of the database fields is populated with a HTML string coming from a rich text input. Something simple like this:

<b>this is bold text</b>

When I put this string directly into my javascript listener like this:

$('.modal-body').html('<b>this is bold text</b>');

the HTML is parsed fine and I get the expected output with bold text and no visible tags.

But when I use the string queried from the database like this:

$('.modal-body').html(content);

it is displayed as raw text with tags showing and no formatting.

This is the test page I am working with http://www.toyonder.com/mapTest/mapTest.html

Any ideas how I would go about getting the queried string to render as HTML?

Sounds to me like you've HTML encoded your data (via htmlspecialchars()) before inserting or after selecting it from your database. We'll need to see the code (PHP and JavaScript) that populates your content variable before being able to answer this properly. — Phil
– Phil, Commented Jul 18, 2014 at 5:43
Having a look at the XML returned by your phpsqlajax_genxml2.php script, I can see that the content parameters are indeed HTML encoded, ie content="<b>This is Bold Text</b>". Quick question, why XML? — Phil
– Phil, Commented Jul 18, 2014 at 5:46
Hi Phil. I'm learning as I go here. Using a lot of sample code I've found about the place and modifying it to fit my requirements. XML is how the example worked, so XML is what I ended up with. Is there a better alternative for the Maps API? I was under the impression XML with custom attributes was the only way to go. Definitely open to suggestions though. — MattOfChoice
– MattOfChoice, Commented Jul 18, 2014 at 5:54
Also probably worth noting that the HTML strings have currently been manually input as I haven't got around to the rich text form input yet. So within the database they look exactly the same as the way they are being output. — MattOfChoice
– MattOfChoice, Commented Jul 18, 2014 at 5:57

Community · Accepted Answer · 2017-05-23 11:50:19Z

2

Looks like the problem is that you have < and > instead of < and >.

Try this

$('.modal-body').html($("<span />", { html: content }).text());

This will convert the content to html, and then back to text, and finally back to html for the modal-body.

I must also reference this question, because it is where I learned this method: javascript string replace < into <

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Jul 18, 2014 at 5:54

Justin Paulson

4,3881 gold badge26 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MattOfChoice Over a year ago

Thanks. I'll give this a try. In the database the string has < and >, not < and > - so the encoding must be happening somewhere in the PHP or javascript, yeah?

MattOfChoice Over a year ago

Worked a treat! Thanks so much for your help!!

Collectives™ on Stack Overflow

Rendering mySQL string as HTML in Bootstrap Modal window

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related