Question

I get the following error from my code execution: Microsoft JScript runtime error: Could not complete the operation due to error 80020101.

The following link is what is something i found on Stackoverflow: Ajax request problem: error 80020101

var div = $("<div class='modal'>").html($(result.getWebFormDesignFieldContentsResult));

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. 🙁

The string passed in is rather large, but is something to the likes of:

<div>input tags for filtering</div>
<select><option></option>...[150 option tags]... </select>
<anchor tag to return contents>
<script type = "text/javascript">
  ...stuff fires related to the above items...
</script>

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.

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.

The Result String (result.getWebFormDesignFieldContentsResult)

You can also visit here: http://jsfiddle.net/3kFv2/

            <table style='width:inherit;'>
                <tr>
                    <td>
                        <input type='text' id ='queryInput' onkeypress = 'clearTimeout(timerVar); timerVar = setTimeout(function(){ fetchFieldInfo($("#queryInput").val()); },1000);' />
                    </td>
                    <td style = 'text-align:right;'>
                        <a class = 'modalButton' id = 'queryButton' runat='server' value = 'Re-Filter' onCLick = '$("div.modal").fadeOut(); fetchFieldInfo($("#queryInput").val());'>Re-Filter</a>
                    </td>
                </tr>
                <tr>
                    <td colspan='2' style='margin-left:auto; margin-right:auto; text-align:center;'><select size = '20' id = 'selectList' name = 'selectList' ><option value = '1000'>Abutment Notes</option><option value = '2300'>Abutments Notes</option><option value = '2302'>Abutments Notes Maint Need</option><option value = '2301'>Abutments Notes Remarks</option><option value = '10942'>Concrete Deterioration Maint Need</option></select></td>
                <td>
                    <div style='width:300px;height:300px;' id = 'modalInfoPanel'>
                    </div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td style='text-align:right;'>
                    <a class = 'modalButton' id = 'buttonReturnValue' value = 'Return Selected Element' onClick='$("div.modal, div.overlay").fadeOut();'>Return Selected Element</a>
                </td>
            </tr>
        </table>
        <script type = 'text/javascript'>
            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($('<ul>').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(); });
                }
            }
        </script>

Answer 1

Looking at: http://mattwhite.me/blog/2010/4/21/tracking-down-error-80020101-in-internet-exploder.html
tells you that while there are errors such as embedded script tags, etc…. at the root, the error is simply stating “There is an Error”.

After taking that information to heart, I delved down into my code to find more and more issues by commenting out pieces here and there. The error i found in question was the clicker() ajax call. I looked at it for a second and realized that the original ajax call was commented out. This is a new call to a webservice not implemented and has errors. Since i commented it out, it works like normal again, i just have to define everything correctly for that ajax call and all will be good.

I thank all of you for helping with the debug. 🙂