Cache Question Involving A Jquery App

JavaScript
1

Hey,

I developed a site that lets people respond to surveys using jquery. They choose an answer via a radio button, submit and a pop up loads a graph with the total # of responses to that question, including theirs, and a bar graph showing the % of results for each option.

Problem:

There are 30 survey questions per page and, sometimes, when I answer one I notice that it is not loading my response. For instance, if a survey has 3 responses and I am the 4th, once I submit my answer the pop up loads the 3 responses prior to mine but doesn’t calculate the 4th

If I clear my cache it loads fine most of the time but, my question is, do you think it’s a cache issue?

Code Running The Show:

In this example, survey # 25 (which loads the results once
I make a choice and hit the button which has an id of upny_sresbtn_25)



<script language="Javascript">

$('#upny_sresbtn_25').click(function () { 
      
var formData3 = $("#firstform_25").serialize();  

$.post("vote.php", $("#firstform_25").serialize());

  var url='http://www.site.com/answer_question/jquery/json_var_home.php?' + formData3;
      
// --> This is where we call the loadRJSON function (further down)

// Now we call the animate results function which animates the bar graph results
// based on the percentage of total votes that go for each survey option.

upny_aniRes(data);

         
        })
        
        
function upny_aniRes(data) {
//alert(data.length);

        var total_v='';
        
    for(i = 0;i < data.length;i++) {
        
        var w_html = (data[i].a_perc * 2) + 'px';
        $('#a_' + data[i].a_id).animate({ width: w_html }, 1500);
        
        $('#ap_' + data[i].a_id).html(data[i].a_perc + '%');
        
        $('#tr_' + data[i].a_id).html(data[i].t_r + ' replied');
        
        
           total_v+=data[i].t_r;
           
                   //    alert(data[i].total_votes);

    }
    

}

$(document).ready(function() {

  $("#mies1").overlay({   top: 150,   expose: 
  {           
  color: '#000',         loadSpeed: 200,       opacity: 0.5     
  },      
  closeOnClick: true,    api: true   }).load();

  
});

function upny_loadRJSON(j_url) {

j_url += '&randnum=' + Math.floor(Math.random()*11111111);

//alert(j_url);


$.getJSON(j_url,

    function(data){
    
    //alert(data);

    upny_aniRes(data.res_json);

    });
}


});

</script>

(I only post it as sometimes it is requested that we do so)

In short, do you think making sure caching is eliminated would help ensure that all new votes would be displayed in the pop up? It appears MOST of the time, but not all…and it’s critical that the new votes appears in the ‘result pop up window’ all times. It works, in the sense that the graph works, the submission of the response works…it just doesn’t always load the latest snapshot after the vote and I wonder if jquery cache is the issue.

Thank you so much for your time, again…

PS. I must re-emphasize that 30 questions load per page and, once people start to submit responses, they usually do not refresh as it’s not required. So during tests I answer one after another without any refresh. What happens is the page calls the Jquery file and the code you see above does the work.

This is why I wonder if it is a cache issue…thanks again.

2

I also wanted to note (Since I cannot edit my thread, apparently) that I use this code to process the ‘submit button’ once they vote:

# This is for when they answer survey # 25 out of 30 on one page.

$('#upny_sresbtn_25').click(function () { 
      
var formData3 = $("#firstform_25").serialize();  

$.post("vote.php", $("#firstform_1").serialize());

// include file which includes the functions I posted in the first post

}

So the vote takes place first (Send it to the db) and then I load up the pop up window
which performs the jquery functions such as displaying the total votes and animating that bar graph. Maybe I should have a delay between the vote being processed and the pop up window?

3

The a in ajax stands for asynchronous. The browser performs the operation in the background so to speak. It immediately continues executing your javascript, not waiting for the ajax request to complete. The ajax request will complete at an unknown time in the future.

In order for the vote to be included in the result, the ajax request must first complete. But, you currently have nothing in your code which guarantees that you don’t load the result until after the ajax request is done. Sometimes the ajax request finishes before you load the popup, sometimes not. That’s why it works sometimes.

$.post() accepts a 3’rd argument. If you pass it a function as the 3rd argument, jquery will call the function when the ajax request is complete. This should be a safe time to load the popup. It could still fail depending on what you have going on in your serverside code, but it will probably be ok.

4

That certainly makes sense. The way I have it set up on the actual index page that hosts the questions is:

<script language=“Javascript”>

$(‘#upny_sresbtn_25’).click(function () {

var formData3 = $(“#firstform_25”).serialize();

$.post(“vote.php”, $(“#firstform_25”).serialize());

<?
$root=$_SERVER[“DOCUMENT_ROOT”];

include(“$root/js/forms/process.js”);
include(“$root/js/forms/filter.js”);

?>
});

</script>

Can I basically turn the include files of process.js and filter.js into a function and call that function in my .$post function which performs the vote by hitting vote.php?

I had to teach myself jquery on the fly when our developer was fired and I am still learning…I’ve lost a ton of money through this process and am just eager to resolve this. I think I am understanding what you are saying but I am not sure if I create the best solution through my suggestions.

Thanks