Response title
This is preview!
Having issues with prependTo()
in Using jQuery
•
5 years ago
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 -->
1