Skip to Content
avatar image
Former Member

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

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

1.png (16.7 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Mar 07 at 08:00 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      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