title: ajax issue with error error 80020101 when returning a string from request
body: <p>I get the following error from my code execution:  <strong>Microsoft JScript runtime error: Could not complete the operation due to error 80020101.</strong></p>
  
  <p><em>The following link is what is something i found on Stackoverflow:</em> <a href="https://stackoverflow.com/questions/4918969/ajax-request-problem-error-80020101">Ajax request problem: error 80020101</a></p>
  
  <pre><code>var div = $("&lt;div class='modal'&gt;").html($(result.getWebFormDesignFieldContentsResult));
  </code></pre>
  
  <p>The passed in information, result.getWebFormDesignFieldContentsResult is a long string of HTML and JAVASCRIPT which is not parsed into DOM yet.  I just find it weird as I had it working the other day, and then was trying to add additional functionality.... breaking it. :(</p>
  
  <p>The string passed in is rather large, but is something to the likes of:</p>
  
  <pre><code>&lt;div&gt;input tags for filtering&lt;/div&gt;
  &lt;select&gt;&lt;option&gt;&lt;/option&gt;...[150 option tags]... &lt;/select&gt;
  &lt;anchor tag to return contents&gt;
  &lt;script type = "text/javascript"&gt;
    ...stuff fires related to the above items...
  &lt;/script&gt;
  </code></pre>
  
  <p>I was thinking it was having an issue taking the information passed as a string being put into the div tag as it MIGHT not like the script tags.</p>
  
  <p>Has anyone else accomplished this, or what to give me some pointers as to how to handle this?  I might want to make a string object, and then break the contents up accordingly and only put html in html, and then handle the js in a different style.</p>
  
  <p><strong>The Result String (result.getWebFormDesignFieldContentsResult)</strong></p>
  
  <p><strong>You can also visit here:</strong> <a href="http://jsfiddle.net/3kFv2/" rel="nofollow noreferrer">http://jsfiddle.net/3kFv2/</a></p>
  
  <pre><code>            &lt;table style='width:inherit;'&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input type='text' id ='queryInput' onkeypress = 'clearTimeout(timerVar); timerVar = setTimeout(function(){ fetchFieldInfo($("#queryInput").val()); },1000);' /&gt;
                      &lt;/td&gt;
                      &lt;td style = 'text-align:right;'&gt;
                          &lt;a class = 'modalButton' id = 'queryButton' runat='server' value = 'Re-Filter' onCLick = '$("div.modal").fadeOut(); fetchFieldInfo($("#queryInput").val());'&gt;Re-Filter&lt;/a&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td colspan='2' style='margin-left:auto; margin-right:auto; text-align:center;'&gt;&lt;select size = '20' id = 'selectList' name = 'selectList' &gt;&lt;option value = '1000'&gt;Abutment Notes&lt;/option&gt;&lt;option value = '2300'&gt;Abutments Notes&lt;/option&gt;&lt;option value = '2302'&gt;Abutments Notes Maint Need&lt;/option&gt;&lt;option value = '2301'&gt;Abutments Notes Remarks&lt;/option&gt;&lt;option value = '10942'&gt;Concrete Deterioration Maint Need&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;div style='width:300px;height:300px;' id = 'modalInfoPanel'&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td style='text-align:right;'&gt;
                      &lt;a class = 'modalButton' id = 'buttonReturnValue' value = 'Return Selected Element' onClick='$("div.modal, div.overlay").fadeOut();'&gt;Return Selected Element&lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;script type = 'text/javascript'&gt;
              function ajaxDisplayContents(value){
                  //alert(value.val());
   /*
                  $('#selectList option').each(function(){
                      return $(this).val() == '';
                  }).attr('selected','selected');
   */
                  $.ajax({
                      type: 'POST',
                      url: WEBSERVICE_URL + '/fetchFieldInfo',
                      dataType: 'json',
                      contentType: 'application/json',
                      data: JSON.stringify({'fe_id': value.val().toString()}),
                      success: function(result, textStatus, jqXHR){
                          $('#modalInfoPanel').html(result.fetchFieldInfoResult);
                      },
                      error: function(xhr, status, message){
                          $('#modalInfoPanel').html(status + ' ' + message);
                      }
                  });
              }
              $('select#selectList').change(function(){
                  ajaxDisplayContents($(this));
              });
  
  
              $(function(){
                  $('ul li').click(function(){ clicker(this); });
              });
              function clicker(x){
                  if($(x).next().is('li') || $(x).next().length == 0){
                      $.ajax({
                          type: 'POST',
                          url:,
                          dataType: 'json',
                          contentType: 'application/json',
                          data: JSON.stringify({}),
                          success: function(result){
                              $(x).after($('&lt;ul&gt;').append($(result['METHODResult']));
                              $(x).next().find('li').click(function() clicker(this); });
                          },
                          error: function(){
                              alert('failed to fetch');
                          }
                      });
                  }else if($(x).next().is('ul')){
                      $(x).next().slideUp(function(){ $(this).remove(); });
                  }
              }
          &lt;/script&gt;
  </code></pre>