Having issues with prependTo()

I have a timeline on my website, and it gets live updates via AJAX calls, and it prepends any new timeline items to the top of the list.

Error in console:

Error: Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Heres the exact JS code for the timeline:

// Timestamp of latest item
var first_timestamp = $timeline_class.find('li').eq(0).data('timestamp');
var $timeline_class = $('#timeline');
var scroll_at_top = '30';
var asset_id = [12,34,56];

// Check for any new items
setInterval(function() {
    if( window.location.hash.substring( 1 ) !== 'no-live' ) {
        // If the first timeline hasnt loaded yet, load it
 if ( typeof first_timestamp === 'undefined' ) {
            first_timestamp = $timeline_class.find( 'li' ).eq( 0 ).data( 'timestamp' );
        }
        // Only load more data if were somewhere near the top of the page
 else if ( $( window ).scrollTop() < scroll_at_top ) {
            loading = true;
            $.get( '/assets/view_new_timeline/asset_id/' + asset_id.join( '/asset_id/' ) + '/timestamp/' + first_timestamp, function ( items ) {

                // If new items were found
 if ( items ) {
                    console.log(items);
                    // @todo This seems to cause a JS error (which is weird, it worked fine before)
 // Error: Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
 $( items ).hide().prependTo( ".timeline" ).slideDown();

                    // This works just fine though
 //$( items ).prependTo( ".timeline" );

 first_timestamp = $timeline_class.find( 'li' ).eq( 0 ).data( 'timestamp' );

                    fade_icons();
                }
                loading = false;

            } ).fail( function ( xhr, ajaxOptions, thrownError ) { //any errors?

 template.alert( 'Timeline Error', 'Error loading timeline items: ' + thrownError, 'error' );

                //hide loading image
 $items_loading.hide();

                loading = false;
            } );
        }
    }
}, recheck_interval*1000);

And incase anyone needs the HTML code of the AJAX response, here it is (Exact)

<!-- being timeline-item -->
<li data-timestamp="1438620849" class="timeline-item timeline-action-updated">
    <!-- begin timeline-time -->
    <div class="timeline-time">
        <span class="date">
            August 3, 2015        </span>
        <span class="time">
            9:54 am        </span>
    </div>
    <!-- end timeline-time -->
    <!-- begin timeline-icon -->
    <div class="timeline-icon" data-type="error">
        <a name="1438620849">
            <i class="fa fa-exclamation m-r-2"></i><i class="fa fa-cogs m-l-2"></i>        </a>
    </div>
    <!-- end timeline-icon -->
    <!-- begin timeline-body -->
    <div class="timeline-body">
        <div class="timeline-header">
            <!--<span class="userimage"><img src="http://www.gravatar.com/avatar/bd61d9d0c53c648ef33e1f6ec0618cae?s=100" /></span>-->
            <span class="username">
                <a href="/assets/details/17">wq00-azzz-m01.sasset.ad</a>
            </span>
            <span class="timeline-fadein">
                updated            </span>
            <span class="pull-right text-muted">
                <a href="/account/details/1">
                    <div class="image user-avatar"></div>
                </a>
            </span>
            <span class="pull-right timeline-username timeline-fadein">
                Demoadmin            </span>
        </div>
        <div class="timeline-content">
            <pre>Array
(
    [error] => Value 'asfdasdf' does not follow the format required for attribute 'Server Name'
)
</pre>
        </div>
        <div class="timeline-footer p-b-30">
            <span class="float-left">
                Mon Aug 3 9:54:09 MST 2015            </span>
            <span class="float-right timeline-fadein">
                <a href="/assets/details/17" class="m-l-8 ttip no-underline" data-tooltip-title="View details for this asset">
                    <i class="fa fa-info-circle fa-lg"></i>
                </a>
                <a href="/assets/timeline/17" class="m-l-8 ttip no-underline" data-tooltip-title="Timeline for this asset">
                    <i class="fa fa-clock-o fa-lg"></i>
                </a>
                <a href="/assets/edit/17" class="m-l-8 ttip no-underline" data-tooltip-title="Edit this asset">
                    <i class="fa fa-edit fa-lg"></i>
                </a>
            </span>
        </div>
    </div>
    <!-- end timeline-body -->
</li>
<!-- end timeline-item -->

Topic Participants
jhyland87
jakecigar

Having issues with prependTo()

Having issues with prependTo()

Topic Participants

jhyland87

jakecigar