Options not showing

[london-G]

Hello,

I have this code here. I am trying to show the different options with radio box.

There is something wrong in my code, however I can't figure out what it is. Any help?

<div id="questions">
  <p><img src="images/pic_survey.jpg" width="279" height="104"  alt=""/></p>
  <p>Please take our five second survey!</p>
  <h3 class="hSubtitle">Question 1</h3>
  <div class="question">
  </div>
    <input type="button" value="Submit" class="bt_send" id="old_votes_send">
</div>
<div class="result clearfix">
<h3 class="hSubtitle">Question 1</h3>
  <div id="canvas-holder">
    <canvas id="chart-area" width="200" height="200" style="width: 200px; height: 200px; margin-left:-10px;">
  </canvas></div>
  <ul class="doughnut-legend">
  </ul>
</div>
<script>
  $(function() {

    var doughnutData = []
    var style =
    { "1-2 years": { color: "#FDB45C",
        highlight: "#FFC870" },
      "2-4 years": { color:"#F7464A",
        highlight: "#FF5A5E" },
      "5-7 years": { color: "#46BFBD",
        highlight: "#5AD3D1" },
      "7+ years": { color: "#4d5360",
        highlight: "#5c6473" }}

    $("#old_votes_send").click(function(){
      var option_id = $('input:radio[name=old_votes]:checked').attr("option_id");

      $.post("http://localhost/v1/questions/2/options/" + option_id + "/votes",
        { comment: "", vote_source: "main web site" },
          function(){}
      ).always(function() {
          show_chart();
      });
    })
    var get_options_data = function(){
      $.ajax({
        type: 'GET',
        url: "http://localhost/v1/questions/2/options",
        dataType: 'json',
        success: get_options_data_success,
        error: "Error"
      });
    }
    var get_options_data_success = function(data){
      doughnutData = [];
      $.each(data, function( index, value ) {
        var id = value["id"];
        var description = value["description"];

        var vote_counts = value["votes_count"];
        if (vote_counts == "null") vote_counts = 0;
        doughnutData.push(
          { id: id,
            value: vote_counts,
            color: style[description]["color"],
            highlight: style[description]["highlight"],
            label: description }
        );
      });
      show_options();
    }
    var show_chart = function(){
      $('#questions').hide();
      $('div.result').show();
      show_options_color();
      draw_doughnut();
    }
    var show_options = function(){

      $(".question").empty();

      $.each(doughnutData, function( index, value ) {
        label = value["label"];
        id    = value["id"];
        var radioBtn = $('<p><input type="radio" name="old_votes" option_id="' + id + '" /><label for="checkbox">' + label + '</label></p>');

        radioBtn.appendTo('.question');
      });
    }
    var show_options_color = function(){
      $(".doughnut-legend").empty();

      $.each(doughnutData, function( index, value ) {
        label = value["label"];
        var color_li = $('<li><span style="background-color:' + style[label]["color"] + '"></span>' + label + '</li>');

        color_li.appendTo(".doughnut-legend")
      });
    }
    var draw_doughnut = function(){
      var total_count = 0;
      $.each(doughnutData, function( index, value ) {
          total_count += value["value"];
      });
      $.each(doughnutData, function( index, value ) {
          value["value"] = Math.round((value["value"] / total_count) * 100, 2);
      });

      console.log(doughnutData);
      var ctx = document.getElementById("chart-area").getContext("2d");
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true, tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%"});
    };
    get_options_data();
  });

  </script>

[pritaeas]

There is something wrong

What is it supposed to do, and what isn't it doing exactly?

[london-G]

Showing the options.

I have a question and options displayed as radio buttons. However it is not showing them.

The next part shows a graph(pie chart) sowing the count of the votes.

[pritaeas]

It may be clear to you, but since you only show the client side code, there is no way to test what your server is returning.

If you put alerts in your functions, do they show? Do they show in the right order? Does the response contain data?

You can debug in your browser (set breakpoints etc.), have you tried?

[london-G]

I found out the problem. Semi colon was missing on line 29.

Thanks!