Ah, I’ve run into this exact issue before—those rogue single quotes in dynamic content always manage to break inline JavaScript syntax! Here’s what’s happening and how to fix it:

Root Cause #

When you pass your XML string (with 'COMM TEST') into the DisplayFlightMessage function via an inline onclick attribute, the single quote inside the XML terminates the JavaScript string literal early. This leaves you with invalid syntax, which is why your modal won’t pop up.

Solutions to Try #

1. Escape the Single Quotes Properly

If you need to stick with inline onclick, you have two safe ways to escape the single quotes in your XML:

• Use HTML entities: Replace every single quote (') in your XML with ' (the HTML entity for apostrophe). This tells the browser to treat it as a literal character instead of closing the string. Example:

  <button onclick='DisplayFlightMessage("<xml><tag>&#39;COMM TEST&#39;</tag></xml>")'>Show Modal</button>
  

• Escape for JavaScript: If you’re generating the HTML server-side, escape internal single quotes with a backslash (\') when wrapping the XML in single quotes. Example:

  <button onclick='DisplayFlightMessage('\'<xml><tag>\'COMM TEST\'</tag></xml>\'')'>Show Modal</button>
  

  Pro tip: If your XML might have double quotes too, wrap the JavaScript string in single quotes and escape doubles with \", or vice versa.

2. Leverage Your EncodeJsString Function

You mentioned having an EncodeJsString function—this is your best bet for a robust fix! This function should handle all JavaScript special characters (not just single quotes) to make your XML string safe for use as a literal. Apply it to your XML before inserting it into the onclick attribute. For example, in a server-side language like C#:

string rawXml = "<xml><tag>'COMM TEST'</tag></xml>";
string safeXml = EncodeJsString(rawXml);
string buttonHtml = $"<button onclick='DisplayFlightMessage({safeXml})'>Show Modal</button>";

This ensures every problematic character (quotes, newlines, etc.) is escaped correctly.

3. Ditch Inline onclick (Modern Best Practice)

For a cleaner, more maintainable solution, separate your HTML and JavaScript. Use a data attribute to store the XML, then add an event listener to the button:

<button id="flightModalBtn" data-xml="<xml><tag>'COMM TEST'</tag></xml>">Show Modal</button>

<script>
  document.getElementById('flightModalBtn').addEventListener('click', function() {
    const xmlContent = this.getAttribute('data-xml');
    DisplayFlightMessage(xmlContent);
  });
</script>

This avoids quote escaping entirely and makes your code easier to debug and update later.

Why These Work #

All these methods ensure the JavaScript string literal is properly formed, so the browser doesn’t misinterpret the single quote as the end of the parameter. The event listener approach is especially great because it follows separation of concerns principles, which is standard in modern web development.

内容的提问来源于stack exchange，提问作者user7776356