title: JSON serialize unexpected token when passed to javascript function
body: <p>I'm attempting to take a basic serializable object that's held within a seriazable dictionary and pass it to a javascript function that will generate a modal with that information. The object has a few string variables, nothing complicated.</p>
  
  <p>Here's the object I'm passing in:</p>
  
  <pre><code>[Serializable]
  public class Details
  {
      public Details() {}
  
      public string ID { get; set; }
      public string Name { get; set; }
  }
  </code></pre>
  
  <p>I set the strings to their appropriate values, and then attempt to create a link that calls a javascript modal (the ID is calling the appropriate:</p>
  
  <pre><code>protected string WriteDetailsLink(object ID)
  {
      string results = "";
  
      JavaScriptSerializer jss = new JavaScriptSerializer();
      results += "showDetailsModal(" + jss.Serialize(dictionaryList[ID.ToString()]) + "); return false;";
  
      return results;
  }
  </code></pre>
  
  <p>And the html link itself on the aspx page:</p>
  
  <pre><code>&lt;a id='detailsDialog' onclick="&lt;%# WriteDetailsLink( Eval( "ID" )) %&gt;"&gt;Details&lt;/a&gt;
  </code></pre>
  
  <p>And the javascript function for the modal, currently displaying nothing:</p>
  
  <pre><code>function showDetailsModal(Details) {
  
  
  
      $('#DetailsModal_dialog').dialog(
      {
          modal: true,
          //height: 500,
          width: 600,
          resizable: false,
          draggable: false,
          open: function () {
  
          },
          close: function(event, ui) {}
  
      });
  }
  </code></pre>
  
  <p>Everything works fine, the ID gets passed along and when I inspect the link after running it looks like this:</p>
  
  <pre><code>&lt;a id='detailsDialog' onclick="showDetailsModal({"ID":"40662463","Name":"72485-3"}); return false;"&gt;Details&lt;/a&gt;
  </code></pre>
  
  <p>And it looks to be the same format as code elsewhere in our project, but I keep getting a</p>
  
  <blockquote>
    <p>"Uncaught SyntaxError: Unexpected token ;"</p>
  </blockquote>
  
  <p>error. I can't for the life of me figure out what's going wrong. If I pass just a string to the modal function, it works. I really don't want to have to send a bunch of clumsy strings and have to parse through them manually.</p>
  
  <hr>
  
  <p>UPDATE:</p>
  
  <p>Yup, it was the quotes around the link that was causing the issue. But now I'm encountering a new problem:</p>
  
  <p>I've got a div setup for the modal and I'm attempting to parse out the name to insert into it, here's the new function (notice Name is now BatchName):</p>
  
  <pre><code>function showBatchDetailsModal(groupDetails) {
  
      var tmpData = jQuery.parseJSON(groupDetails);
  
      $('#DetailsModal_dialog').dialog(
      {
          modal: true,
          //height: 500,
          width: 600,
          resizable: false,
          draggable: false,
          open: function () {
              $('#detailsName').text(tmpData.BatchName);
          },
          close: function(event, ui) {}
  
      });
  }
  </code></pre>
  
  <p>I'm getting </p>
  
  <blockquote>
    <p>"Uncaught SyntaxError: Unexpected token o " in jquery.min.js</p>
  </blockquote>