Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?

Dhaust picture Dhaust · Aug 5, 2008 · Viewed 20k times · Source

How do I delimit a Javascript data-bound string parameter in an anchor OnClick event?

  • I have an anchor tag in an ASP.NET Repeater control.
  • The OnClick event of the anchor contains a call to a Javascript function.
  • The Javascript function takes a string for its input parameter.
  • The string parameter is populated with a data-bound value from the Repeater.

I need the "double quotes" for the Container.DataItem.
I need the 'single quotes' for the OnClick.

And I still need one more delimiter (triple quotes?) for the input string parameter of the Javascript function call.

Since I can't use 'single quotes' again, how do I ensure the Javascript function knows the input parameter is a string and not an integer?

Without the extra quotes around the input string parameter, the Javascript function thinks I'm passing in an integer.

The anchor:

<a id="aShowHide" onclick='ToggleDisplay(<%# DataBinder.Eval(Container.DataItem, "JobCode") %>);' >Show/Hide</a>    

And there is my Javascript:

<script language="JavaScript" type="text/javascript">
/* Shows/Hides the Jobs Div */
function ToggleDisplay(jobCode)
{
    /* Each div has its ID set dynamically ('d' plus the JobCode) */
    var elem = document.getElementById('d' + jobCode);

    if (elem) 
    {
        if (elem.style.display != 'block') 
        {
            elem.style.display = 'block';
            elem.style.visibility = 'visible';
        } 
        else
        {
            elem.style.display = 'none';
            elem.style.visibility = 'hidden';
        }
    }
}
</script>

Answer

lubos hasko picture lubos hasko · Aug 5, 2008

I had recently similar problem and the only way to solve it was to use plain old HTML codes for single (&#39;) and double quotes (&#34;).

Source code was total mess of course but it worked.

Try

<a id="aShowHide" onclick='ToggleDisplay(&#34;<%# DataBinder.Eval(Container.DataItem, "JobCode") %>&#34;);'>Show/Hide</a>

or

<a id="aShowHide" onclick='ToggleDisplay(&#39;<%# DataBinder.Eval(Container.DataItem, "JobCode") %>&#39;);'>Show/Hide</a>