AJAX Integration

If you submit a poll using AJAX you will receive a JSON response. This format of the response depends on if there were any errors.

Submission Errors

If there were errors in submitting the poll the resulting JSON will look similar to this:

{ "errors" : [ "No poll options submitted." ],
  "xid" : "f2d93eeefc375d5351dc7077017f202dd35d6c0a"
}

The errors contains an array of all the errors that were encountered when submitting the poll. The xid is a fresh XID to replace the old XID in the hidden inputs of the form. If you have ExpressionEngine secure forms enabled you will need to replace the old XID with the new one returned in the JSON response.

Submission Success

If the poll was submitted successfully then your JSON will look similar to this:

{ "chart" : "http://chart.apis.google.com/chart?chs=330x330&cht=p&chd=t:2,1,1,0,4,0,3&chdl=Red|Orange|Yellow|Green|Blue|Purple|Other (please specify)&chf=bg,s,00000000&chco=8CCFCC|DBB2E3|5E15F9|1FBDDE|869559|970F11|812C34",
  "options" : [ { "color" : "8CCFCC",
        "id" : "6",
        "order" : "0",
        "percent" : 18.18,
        "percent_decimal" : 0.181818181818,
        "text" : "Red",
        "type" : "defined",
        "votes" : "2"
      },
      { "color" : "DBB2E3",
        "id" : "9",
        "order" : "1",
        "percent" : 9.0899999999999999,
        "percent_decimal" : 0.090909090909100002,
        "text" : "Orange",
        "type" : "defined",
        "votes" : "1"
      },
      { "color" : "5E15F9",
        "id" : "10",
        "order" : "2",
        "percent" : 9.0899999999999999,
        "percent_decimal" : 0.090909090909100002,
        "text" : "Yellow",
        "type" : "defined",
        "votes" : "1"
      },
      { "color" : "1FBDDE",
        "id" : "11",
        "order" : "3",
        "percent" : 0,
        "percent_decimal" : 0,
        "text" : "Green",
        "type" : "defined",
        "votes" : "0"
      },
      { "color" : "869559",
        "id" : "12",
        "order" : "4",
        "percent" : 36.359999999999999,
        "percent_decimal" : 0.36363636363599999,
        "text" : "Blue",
        "type" : "defined",
        "votes" : "4"
      },
      { "color" : "970F11",
        "id" : "13",
        "order" : "5",
        "percent" : 0,
        "percent_decimal" : 0,
        "text" : "Purple",
        "type" : "defined",
        "votes" : "0"
      },
      { "color" : "812C34",
        "id" : "7",
        "order" : "6",
        "percent" : 27.27,
        "percent_decimal" : 0.27272727272699998,
        "text" : "Other (please specify)",
        "type" : "other",
        "votes" : "3"
      }
    ],
  "total_votes" : 11
}

This JSON includes many things. First, it includes a link to a Google chart image of your poll - chart. Next it includes an array of all poll options. Each poll option has its color, id, order, percent, percent_decimal, text, type, and total number of votes.

Using the JSON

In jQuery we can get to this JSON data very easily. After we submit our poll we must first parse our JSON. In most cases jQuery automagically does this. However, it is always a good idea to set the dataType when you make your AJAX request. If the JSON is not getting parsed you can parse it yourself by using jQuery.parseJSON.

After the JSON is parsed then it becomes a simple JavaScript object. If you wanted to loop through all of your errors you could do so like this (assume data is your parsed JSON):

$.each(data.errors, function(index, value) {
    alert(value);
});

Some Useful Code

Assume you want to display the poll results after a user successfully votes and display each option with a bar representing the percentage of total votes for each option. The code below assumes you have defined the current form form and the JSON data data.

$(form).find('fieldset').fadeOut('slow', function() {
	var ul = $('<ul />');
	$.each(data.options, function(index, value) {
		var li = $('<li />');
		var strong = $('<strong />').text(value.text);
		var div = $('<div />').css('width', value.percent + '%');
		var em = $('<em />').text( Math.round(value.percent) + '%');
		$(ul).append( $(li).append( $(strong) ).append( $(div).append( $(em) ) ) );
	});
	$(form).append(ul);
});