0

I have a list of thumbnails of recipe names and i want to track which recipes people are clicking on. I problem is that i can strictly do this using jQuery and nothing else. I dont have access to any other pages of the website.

What i did so far is i checked on the names of recipe and images and added a common class using .addClass() in jquery and just after that i declared an onclick function on that name.

Then i a taking the tile of the tag(Which is the recipe name) and sending this information of my other website where it stores this info in database.

The problem is my clicks are not getting all of the time. The behavior looks random to me till now and i don't know how some of the clicks are getting stored and how some are not!! I researched on net and only related thing i found was to keep cache to false. I also tried that but the behavior remained the same. Clicks got stored sometime only.

I am doing this on local host right now and i need to store this info on other website of mine.

jQuery(window).load(function(){
    jQuery('.del-space .thumbnail a').addClass("recipeLinks");
    $(".recipeLinks" ).on("click",function(event) {
    var user=jQuery('loggedinuser').attr('title');
    //alert(user);
    if(typeof(user)==="undefined"){
        user='Guest';
    }
    var recipeName=$(this).attr('title');
    var data='recipeName='+recipeName+'&user='+user; 
    $.ajax({
        url: "http://myotherwebsite.com/tracking/storeClick.php",
        cache: false,
        type: 'POST',
        data: data,
        beforeSend: function() {

        },
        success: function(data, textStatus, xhr) {
            //alert('done');
            //window.location = location.href;
        },
        error: function(xhr, textStatus, errorThrown) {
            //alert("error");
        }
    });  
});

Apart from this i am also wondering, that when i will put this code on live, where there would be a hell lot of clicks at a time, will i be able to log all the clicks?

4

1 回答 1

1

用于event.preventDefault()立即停止单击更改页面，以便您的 ajax 请求有时间完成，并用于window.location在 ajax 完成后更改页面

jQuery(window).load(function(){
    jQuery('.del-space .thumbnail a').addClass("recipeLinks");
    $(".recipeLinks" ).on("click",function(event) {
    event.preventDefault(); //stop the default action
                            //the action will take place after
                            //ajax is complete
    var href = jQuery(this).attr("href"); //get the location to goto

    var user=jQuery('loggedinuser').attr('title');
    //alert(user);
    if(typeof(user)==="undefined"){
        user='Guest';
    }
    var recipeName=$(this).attr('title');
    var data='recipeName='+recipeName+'&user='+user; 
    $.ajax({
        url: "http://myotherwebsite.com/tracking/storeClick.php",
        cache: false,
        type: 'POST',
        data: data,
        beforeSend: function() {

        },
        success: function(data, textStatus, xhr) {
            //alert('done');
            window.location = href; //now goto the links href
        },
        error: function(xhr, textStatus, errorThrown) {
            //alert("error");
        }
    });  
});
于 2013-09-21T15:12:44.663 回答