Make ajax call to update Video Hits when showing Video - asp.net

Question

I am working on asp.net web page where i am showing you-tube videos using fancy-box.
So far it is working fine, I also need to make an ajax call to asp.net file updateHits.aspx?VideoID=xyzxvtmiw so that i can update the hits/views for this video in the database (when someone clicks the thumbnail). I am not quite sure how to make this call when user click on the image thumbnail of a video on video.aspx page.
Below is part of my script
<script type="text/javascript">
//Code to Reinitialize Fancybox script when using update panel START
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) { }
function EndRequest(sender, args) { InitMyFancyBox(); }
$(document).ready(function () {
InitMyFancyBox();
});
function InitMyFancyBox() {
$(document).ready(function () {
$(".youtube").click(function () {
// first, get the value from the alt attribute
var newTitle = $(this).find("img").attr("alt"); // Get alt from image
$.fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
//'title': this.title, // we will replace this line
'title': newTitle, //<--- this will do the trick
'width': 680,
'height': 495,
'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf',
'swf': { 'wmode': 'transparent', 'allowfullscreen': 'true' }
});
return false;
});
});
}
</script>
<asp:Repeater ID="rptvideos" runat="server" >
<ItemTemplate>
<div class="single-video-wrapper">
<asp:HyperLink ID="hylnkvideo" CssClass="youtube" NavigateUrl='<%# getVideoURL(Eval("VideoID"), Eval("VideoYoutubeID")) %>' runat="server">
<div class="video-image-wrapper">
<asp:Image ID="imgvideo" ImageUrl='<%# getVideoImagePath(Eval("VideoYoutubeID"), Eval("VideoYoutubeIcon")) %>' AlternateText='<%# getVideoTitleDesc(Eval("VideoDate"),Eval("VideoTitle"),Eval("VideoDesc")) %>' runat="server" CssClass="video-thumbnail" />
</div>
<div class="video-name">
<asp:Label ID="lblvideoName" CssClass="video-name-lbl" runat="server" Text='<%#Eval("VideoTitle") %>'></asp:Label>
</div>
<div class="video-issue">
<asp:Label ID="lblVideoIssue" CssClass="video-issue-lbl" runat="server" Text='<%#getIssuCode(Eval("IssueCode")) %>'></asp:Label>
</div>
</asp:HyperLink>
</div>
</ItemTemplate>
</asp:Repeater>
Based on the code above i am reinitializing fancy-box as i have updatePanel.
But i am not sure how i should make ajax call to updateHits.aspx?VideoID=xyzxvtmiw so that i can update database.

Answer 1

You could just add your AJAX call to the click event:
function InitMyFancyBox() {
$(document).ready(function () {
$(".youtube").click(function () {
// first, get the value from the alt attribute
var newTitle = $(this).find("img").attr("alt"); // Get alt from image
$.fancybox({
//...
});
// your Ajax call here
$.ajax({
type: "POST",
url: "updateHits.aspx?VideoID=xyzxvtmiw"
});
return false;
});
});
}
If you want the ajax call to be separate from the fancybox init you can just add another click handler somewhere else in your page:
$(".youtube").click(function () {
// your Ajax call here
$.ajax({
type: "POST",
url: "updateHits.aspx?VideoID=xyzxvtmiw"
});
}