help with first jquery plugin: problem with ajax()

I'm experimenting with building a jquery plugin but need some help. I'm getting the following error in firebug:

Node cannot be inserted at the specified point in the hierarchy

this error popped up when I tried to implement an ajax request for populating a div. I do understand what the error is saying but I don't understand why. If you have other hints based on my code you're always welcome to announce. thank you in advance!

btw: I'm receiving a correct response from the ajax call, but I can't insert it without the error above :-(

/**
 * @author kasperfish
 */
(function($){
    $.fn.extend({
        widgetIt: function(options) {
            var defaults = {
                title: 'Widget Title',开发者_如何转开发
                top: '50px',
                left: '400px',
                evenColor: '#ccc',
                oddColor: '#eee',
            };

            var options = $.extend(defaults, options);

            return this.each(function() {
                var o = options;

                $(this).css({'z-index': '10', display: 'inline-block', position: 'absolute', top: o.top, left: o.left});
                var header = $('<div style="min-width: 150px" class="ui-widget-header widgethead"></div>');
                var title =$('<div class="w_tit">' + o.title + '</div>');
                var content =$('<div class="w_content"></div>');

                // Append
                $(title).appendTo(header);
                $(header).appendTo(this);
                $(content).appendTo(this);
                $(this).draggable();

                // Binding
                $(header).dblclick(function() {
                    $(content).fadeToggle();

                    // AJAX load data
                    $.ajax({
                        url: "widgets/seedshare.widget.php",
                        context: content,
                        success: function() {
                            $(this).html(content);
                        }
                    });
                });
            });
        }
    });
})(jQuery);

html

<div id="adiv"></div>

on document load

$('#adiv').widgetIt();

As Majid said, this in your ajax function points to the XHR object. If what you're trying to do is to insert the content into the header object, you can fix the problem by changing your code to this:

            // Binding
            $(header).dblclick(function() {
                $(content).fadeToggle();
                var self = this;
                // AJAX load data
                $.ajax({
                    url: "widgets/seedshare.widget.php",
                    context: content,
                    success: function() {
                        $(self).html(content);
                    }
                });
            });

If you're trying to insert it somewhere else in your page, use a jQuery selector for the insertion location.

You have:

$(this).html(content);

this in this scope refers to the XHR object, so you are trying to insert some content into an XHR object, which of course is pointless.