Page 1 of 1

Jquery>>Trying To Pass My PHP Vars To Jquery Function

Posted: Sun Sep 27, 2009 7:58 am
by jbh
Hey,

In an attempt to learn Jquery and create my own dynamic poll (Where the css bars animate) I want to take the js code from this free flatfile poll script and replace the following vars:
[OPT_TITLE] and [id] (listed in bold in the last function)
and replace them with PHP variables that I will get from poll.php; $title and $option_id (the title of option chosen and the option_id)

As of now, the 3 listed vars at the top are just flat file columns whereas I will be using MYSQL. I can generate results via Jquery/Ajax but I am confused as to how to place PHP vars so I can leave the rest of this JS file alone and benefit from the animated css results that it displays.

The code is below, for reference. Thank you for your time.

[edit] For Reference, what this js file does is it takes the results of the poll and, in loadResults, it creates the html output of the CSS results. It does this through the variable $results_html. I figure that if I replace the vars with PHP vars, that I can insert anytime in confidence, the function animateResults will be able to animate my results. I hope this helps explain the code and my goal. Ty, again.

Code: Select all

// Global variable definitions
// DB column numbers
var OPT_ID = 0;
var OPT_TITLE = 1;
var OPT_VOTES = 2;
 
var votedID;
 
$(document).ready(function(){
  $("#poll").submit(formProcess); // setup the submit handler
  
  if ($("#poll-results").length > 0 ) {
    animateResults();
  }
  
  if ($.cookie('vote_id')) {
    $("#poll-container").empty();
    votedID = $.cookie('vote_id');
    [b]$.getJSON[/b]("poll.php?vote=none",loadResults);
  }
});
 
function formProcess(event){
  event.preventDefault();
  
  var id = $("input[@name='poll']:checked").attr("value");
  id = id.replace("opt",'');
  
  $("#poll-container").fadeOut("slow",function(){
    $(this).empty();
    
    votedID = id;
    $.getJSON("poll.php?vote="+id,loadResults);
    
    $.cookie('vote_id', id, {expires: 365});
    });
}
 
function animateResults(){
  $("#poll-results div").each(function(){
      var percentage = $(this).next().text();
      $(this).css({width: "0%"}).animate({
                width: percentage}, 'slow');
  });
}
 
function loadResults(data) {
  var total_votes = 0;
  var percent;
  
  for (id in data) {
    total_votes = total_votes+parseInt(data[id][OPT_VOTES]);
  }
  
  var results_html = "<div id='poll-results'><h3>Poll Results</h3>\n<dl class='graph'>\n";
  for (id in data) {
    percent = Math.round((parseInt(data[id][OPT_VOTES])/parseInt(total_votes))*100);
    if (data[id][OPT_ID] !== votedID) {
      results_html = results_html+"<dt class='bar-title'>"+[b]data[id][OPT_TITLE][/b]+"</dt><dd class='bar-container'><div id='bar"+data[id][OPT_ID]+"'style='width:0%;'>&nbsp;</div><strong>"+percent+"%</strong></dd>\n";
    } else {
      results_html = results_html+"<dt class='bar-title'>"+[b]data[id][OPT_TITLE][/b]+"</dt><dd class='bar-container'><div id='bar"+data[id][OPT_ID]+"'style='width:0%;background-color:#000000;'>&nbsp;</div><strong>"+percent+"%</strong></dd>\n";
    }
  }
  
  results_html = results_html+"</dl><p>Total Votes: "+total_votes+"</p></div>\n";
  
  $("#poll-container").append(results_html).fadeIn("slow",function(){
    animateResults();});
}