Escaping quotes inside quotes in html

Not sure why this error is happening in Chrome and Edge, but not in IE (yeah business team is still stuck with it)

Seeing "Uncaught SyntaxError: Unexpected end of input" on this html line

<TR onmouseover="rowColor(this, true);" onmouseout="rowColor(this, false);" onclick='workTicket('displayTicket.action?TICKETID=1367698&amp;TTID=14','1367698');'>   

and the following is the corresponding jsp/struts line

<TR onmouseover="rowColor(this, true);" onmouseout="rowColor(this, false);" onclick='workTicket(<c:out value="'displayTicket.action?TICKETID=${dispTO.ticketNbr}&TTID=${dispTO.ticketTypeId}','${dispTO.ticketNbr}'" />);'>

I don't see anything wrong in the above line except the onclick attribute starts with single quote. Any idea why this is happening?

Solution 1:

You MUST have a complete set of OTHER quotes inside an attribute

<TR onmouseover="rowColor(this, true);" 
 onmouseout="rowColor(this, false);" 
  onclick="workTicket('displayTicket.action?TICKETID=1367698&amp;TTID=14','1367698');">   

There is no problem with the c:out

<TR onmouseover="rowColor(this, true);" 
onmouseout="rowColor(this, false);" 
onclick="workTicket(<c:out value="'displayTicket.action?TICKETID=${dispTO.ticketNbr}&TTID=${dispTO.ticketTypeId}','${dispTO.ticketNbr}'" />);">

will work

BUT this is in my opinion better

data-tickettypeid="<c:out value="${dispTO.ticketTypeId}" />"
data-ticketnbr="<c:out value="${dispTO.ticketNbr}" />"
onclick="workTicket(`displayTicket.action?TICKETID=${this.dataset.tickettypeid}&TTID=${this.dataset.ticketnbr}`,this.dataset.tickettypeid)"

and even better:

document.getElementById("myTable").addEventListener("click",function(e) {
  const tgt = e.target.closest("tr");
  if (tgt && tgt.getAttribute("data-tickettypeid")) {
    workTicket(`displayTicket.action?TICKETID=${tgt.dataset.tickettypeid}&TTID=${tgt.dataset.ticketnbr}`,tgt.dataset.tickettypeid)
  }
})

then you can use

<tr data-tickettypeid="<c:out value="${dispTO.ticketTypeId}" />"
data-ticketnbr="<c:out value="${dispTO.ticketNbr}" />">

As for the mouseover and out, use CSS