0

I know this question seems repeated but I have searched through many sites and am still unable to get my code working.

I'll explain my problem as I paste the code.

Here is my form:

<form action="">
  <% position = @deals_daily_count.size - 2 %>
  <% num_of_expired_deals = @deals_daily_count[position].size %>
  <% loops = 0 %>
  <% while loops < num_of_expired_deals %>
      <input type="checkbox" class="choice" name="choice[]" value="<%= @deals_daily_count[position][loops] %>"><%= @deals_daily_count[position][loops] %>
      <br/>
      <% loops = loops + 1 %>
  <% end %>
</form>

My javascript is as shown below:

document.getElementById("add_deal_button").addEventListener("click", function () {
      var buttons = $('.choice');
      var chart = $('#analytics_line').highcharts();

      buttons.each(function () {

          var currentBox = $(this);
          var isChecked = currentBox.is(':checked');
          var wasChecked = currentBox.data("wasChecked");
          var choice = $(this).val();

          <% loops = 0 %>

          <% while loops < num_of_expired_deals %>
              var title = "<%= raw @deals_daily_count[position][loops]%>"
              if (choice == title) {
                  <% title_of_deal = @deals_daily_count[position][loops].to_s%>
              }
              <% loops = loops + 1 %>
          <% end %>

          <% merchant_id_position = @deals_daily_count.size - 1 %>
          <% merchant_id  = @deals_daily_count[merchant_id_position] %>
          <%= raw data =  DealAnalyticService.set_analytics_for_line_graph(merchant_id, title_of_deal, Date.today.beginning_of_month, Date.today) %>
          if (!wasChecked && isChecked) {
              var series = chart.addSeries({
                  name: "<%= data[0][0]%>" + " view count",
                  pointStart: <%= data[0][1] %>,
                  pointInterval: 24 * 3600 * 1000,
                  data: <%= data[0][2] %>,
                  visible: true
              });
              currentBox.data("series", series);
              var series2 = chart.addSeries({
                  name: "<%= data[0][0]%>" + " redemption count",
                  pointStart: <%= data[0][1] %>,
                  pointInterval: 24 * 3600 * 1000,
                  data: <%= data[0][3] %>,
                  visible: true
              });
              currentBox.data("series2", series2);
          }

          if (wasChecked && !isChecked) {
              var series = currentBox.data("series");

              series.remove();

              var series2 = currentBox.data("series2");

              series2.remove();
          }

          if (isChecked) {
              currentBox.data("wasChecked", true);
          }
          else {
              currentBox.data("wasChecked", false);
          }

      });
  });

To explain what I'm doing, I am actually using HighCharts and am trying to populate the data into a series and add it to my chart when checkbox is ticked. When it isn't tick, I will remove it from my graph.

The removing and adding part is working perfectly. Only issue is that when adding a graph, apparently

buttons.each(function (){}

is not working properly. It does not go iterate through every single checkbox and give me the value of that particular checkbox. Instead, I believe it returned me all values of the checkbox. This results in regardless which checkbox is checked, only the last value is used since it goes through my while loop.

I have tried using ("input:checkbox").each(function() {} but it gives me the same result.

I've also tried using isChecked to determine whether to pass the value into choice or pass null but it does not work as well

I hope that someone can explain to me why is this the issue as I've been trying several methods with no success for hours.

Thank you!

user5296896
  • 179
  • 1
  • 13
  • var buttons = $('.choice'); will return you list. Try using $.each('.choice', function(){ // put your logic here }); – Nishith Kant Chaturvedi Oct 08 '15 at 18:19
  • I think you need to use an immediate function to localize the value of the current iteration. See this stackoverflow: http://stackoverflow.com/questions/11555611/jquery-settimeout-while-loop – mags Oct 08 '15 at 18:22
  • hi @NishithChaturvedi thanks for your advice but it doesn't work. The chart gets displayed but when i click the button to add deals, nothing happens at all – user5296896 Oct 08 '15 at 19:40
  • Hi @mags i read up the link and tried the method but similarly, when i click the button to add deals, nth happens – user5296896 Oct 08 '15 at 19:41
  • 1
    I realised my mistake. In fact it is looping through every value correctly. However, as I am using if else statement using javascript, while what is executed in the if else statement is in erb. This result in it not being read. More details can be found here http://stackoverflow.com/questions/6825390/rails-erb-is-ignoring-js-jquery – user5296896 Oct 09 '15 at 05:34

0 Answers0