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

i working on asp.net web page showing you-tube videos using fancy-box.

so far working fine, need make ajax call asp.net file updatehits.aspx?videoid=xyzxvtmiw can update hits/views video in database (when clicks thumbnail). not quite sure how make call when user click on image thumbnail of video on video.aspx page.

below part of script

<script type="text/javascript">     //code 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, value alt attribute                 var newtitle = $(this).find("img").attr("alt"); // alt image                 $.fancybox({                     'padding': 0,                     'autoscale': false,                     'transitionin': 'none',                     'transitionout': 'none',                     //'title': this.title, // replace line                     'title': newtitle,  //<--- 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 code above reinitializing fancy-box have updatepanel.

but not sure how should make ajax call updatehits.aspx?videoid=xyzxvtmiw can update database.

you add ajax call click event:

function initmyfancybox() {     $(document).ready(function () {         $(".youtube").click(function () {             // first, value alt attribute             var newtitle = $(this).find("img").attr("alt"); // alt image             $.fancybox({                 //...             });             // ajax call here             $.ajax({                 type: "post",                 url: "updatehits.aspx?videoid=xyzxvtmiw"             });             return false;          });     }); } 

if want ajax call separate fancybox init can add click handler somewhere else in page:

$(".youtube").click(function () {     // ajax call here     $.ajax({         type: "post",         url: "updatehits.aspx?videoid=xyzxvtmiw"     }); }