After page load, get youtube views for each item
So I am using the tablesorter plugin to sort / split my portfolio in the dashboard. In every item in my portfolio, I have a youtube / vimeo counter that gets the video views listed in the portfolio item. Unfortunately the youtube or vimeo api is not that fast, so views take about 4 seconds to load all the items that are there before the stop tracker starts working and will only get worse as more items are added.
So I figured I could create a range with a data id and use jquery to add views via ajax after the page has finished loading. So:
$(window).bind("load", function() {
$('span.yt_views').each(function() {
var id = $(this).data('id');
console.log(id);
$.ajax({
type: "POST",
url: "views.php",
data: 'yt_views=' + id,
success: function(response) {
console.log(response);
$(this).html(response);
}
});
});
});
HTML for each element:
<span class="yt_views" data-id="<?php echo $row_projects['media_resource_id'] ?>"></span>
where the link to the media resource is the page with the YouTube id, so we can send it to views.php
to get the corresponding number of views.
UPDATE: A lot will come of this - it seems to work, but the html content of the range is not being replaced.
Update 2
Doing this seems to work:
$(window).bind("load", function() {
$('span.yt_views').each(function() {
var rel = $(this).data('rel');
var id = $(this).data('id');
console.log(id);
$.ajax({
type: "POST",
url: "",
data: 'yt_views=' + rel,
success: function(response) {
console.log(response);
$("span[data-id=" + id + "]").html(response);
}
});
});
});
<span class="yt_views" data-id="<?php echo $row_projects['id']; ?>" data-rel="<?php echo $row_projects['media_resource_link'] ?>"></span>
Not sure why $(this).html(response);
didn't work replacing html.
source to share
You are definitely on the right track. Here are some tips ...
First of all, the standard way to run jQuery
on page load is as follows:
// your code goes inside a closure to prevent conflicts
// with other js libraries that may be in use
(function($){
// your code inside here will run
// when the document loads
})(jQuery);
Second, you can loop through the elements with class="replace"
and set the value like this:
(function($){
// loop through the elements that have class="replace"
$('.replace').each(function(i, el){
$.post('views.php?' + el.data('id'))
.done(function(response){
$(el).html(response);
});
});
})(jQuery);
This should work for what you described, however you will be making a separate call AJAX
for each cell in your table that needs to update the data, i.e. another round trip server for each row in the table. You could improve performance and reduce the load on your server by sending all the values at once data-id
and processing them in one function:
(function($){
// first, grab all of the id elements
var ids = $.map( $(".replace"), function(span) { return $(span).data("id"); });
// then make one AJAX call to get all of the view counts
$.post( "views.php?ids=" + ids )
.done( function(response){
// assuming the AJAX call returned an associative
// array that looks something like response[data-id] = count
$(response).each(function(id,count){
$('.replace[data-id="' + id + '"]').html(count);
});
});
})(jQuery);
For this second method to work, your PHP should look something like this:
<?php
header('content-type: application/json');
$ids = $_POST['ids'];
$counts = array();
foreach( $ids as $id ) {
// make the API call that gets the view count...
$counts[id] = /* value returned by API call */;
}
echo json_encode($counts);
Hope this helps. I have not tested this code, but it should work.
source to share