Concatinated JavaScript string causes syntax error in sap.m.Dialog

[former_member558396]

Hi,

I have a strange JS error, maybe somebody ran over it already and can give me a clue on this problem.

Im writing a FLP plugin for SAP EP and would like to do something very simple in fact: Im getting a JSON from a custom Java component developed by my own and would like to render some parts of it within a sap.m.Dialog resp sap.ui.core.HTML as a message after login into FLP. My JSON response is valid and looks like:

{"messages":[{"beginDate":"Thu Feb 01 08:00:00 CET 2018","approved":true,"messageType":"A","endDate":"Thu Feb 28 15:00:00 CET 2019","active":"true","id":"2601","text":"<strong>asd<br/><\/strong><h1>asdsad<br/><\/h1>","lang":"de","title":"Test","autor":"user"},{"beginDate":"Thu Feb 22 08:00:00 CET 2018","approved":true,"messageType":"S","endDate":"Fri Mar 30 22:00:00 CEST 2018","active":"true","id":"2605","text":"<p>lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.<\/p><p>lorem ipsum.lorem ipsum. lorem ipsum. <\/p><p>lorem ipsum.<\/p><p>lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.<\/p>","lang":"de","title":"Test message 1","autor":"user"}]}

As you noticed already, it contains HTML tags and should be rendered like that. My FLP plugin contains a JS method supposed to get the JSON and render it within a message box:

var getSysMessagePopup = function() {
var sUrl = "/irj/servlet/prt/prtrw/prtroot/xxx.MessagesComponent";
$.ajax({
  url: sUrl,
  async: false,
  timeout: 10000,
  error: function() {
   $.sap.log.error("Could not load system messages...");
  }.bind(this),
success: function(data, status, jqXHR) {
  var jsonMessages = [];
  if (typeof data !== 'undefined' && data.messages.length > 0) {
  var counter = 0;
  var content = '';
  for (var i = 0; i < data.messages.length; i++) {
   counter++;
   var title = data.messages[i].title;
   var decodedText = data.messages[i].text;
   content += title;
   content += decodedText;
   content += '__________________________________________________________________________________________________<br/>';
}

var oHtml = new sap.ui.core.HTML({
content: content
});

var dialog = new sap.m.Dialog({
title: 'Messages',
type: 'Message',
state: 'Error',
content: oHtml,

beginButton: new sap.m.Button({
text: 'OK',
press: function() {
dialog.close();
}
}),


afterClose: function() {
dialog.destroy();
}
});


dialog.open();
}
}.bind(this)
});

The AJAX call is working well, but Im getting a JS error in the console:

SCRIPT5022: Syntax error, unrecognized expression:
Test<strong>asd<br/></strong><h1>asdsad<br/></h1>__________________________________________________________________________________________________<br/>Test
message 1<p>lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem
ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem
ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem
ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem
ipsum.</p><p>lorem ipsum.lorem ipsum. lorem ipsum.
</p><p>lorem ipsum.</p><p>lorem ipsum. lorem ipsum.
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
lorem
ipsum.</p>__________________________________________________________________________________________________<br/>

File: core-min-0.js, Line: 75, Column: 9079

I have unfortunately no clue, what "syntax error, unrecognized expression" is trying to tell me, so I have no ideas how this could be fixed. I found if Im relinquishing on the title by commenting

content += title;

out, it works well.

Im not able to find any comparable problems on SCN, also as you can see on the JSON response the fild "title" doesnt contains anything special, just plain text. So at the end I have nor idea what exactly is going wrong, neither how I can troubleshoot this problem. Does anybody has an idea? Thank you,

kind regards

[jamie_cawley · Accepted solution]

The first iteration of your loop is setting the title to

Test

which is then concatenated to the rest as

"Test<strong>asd<br/></strong><h1>asdsa.....

Which is causing the issue.

Regards,

Jamie

[former_member558396 · Accepted solution]

Hi Jamie,

thank you for your support. Sadly Im not able to follow you on the explanation: string concatenation is my full intense here, I would expect it to work analogous to Java e.g.:

String myHTMLString = "Message Title " + "<b>Message Text</b>";

I ran through FF debugger in the frontend and found it working like I would have expect it:

After looping content contains all titles and message bodies like intended. Afterwards Im pushing this string into a constructor of sap.ui.core.HTML.

If Im looking on your post, I see:

"Test<strong>asd<br/></strong><h1>asdsa....

the concatenated string starts with quotes, is this possibly the problem? This would surprise me, since I have assumed

data.messages[i].title

would deliver the string without quotes, otherwise I would have the same problem with message content, wouldnt I?

It must be something very simple, but Im not able to help myself, sorry. Thank you again,

kind regards

[jamie_cawley · Accepted solution]

This is not valid html

"Test<strong>asd<br/></strong><h1>asdsa.....

This is

"<p>Test</p><strong>asd<br/></strong><h1>asdsa.....

To fix it, you could change the title assignment to

title = "<p>" + data.messages[i].title + "</p>";

Regards,

Jamie

[former_member558396 · Accepted solution]

Thank you, now I got you. So the actual reason is content of sap.ui.core.HTML must be compelling surrounded by tags. I would have know this, if I would have read the documentation attentive, because it stands there pretty distinct (https://sapui5.hana.ondemand.com/#/api/sap.ui.core.HTML/constructor):

HTML content to be displayed, defined as a string.
The content is converted to DOM nodes with a call to new jQuery(content), so any restrictions for the jQuery constructor apply to the content of the HTML control as well.
Some of these restrictions (there might be others!) are:
the content must be enclosed in tags, pure text is not supported.if the content contains script tags, they will be executed but they will not appear in the resulting DOM tree. When the contained code tries to find the corresponding script tag, it will fail.

I corrected it by enclosing title in "alibi" tags and it works now, thanks again,

kind regards