Question

I need help troubleshooting some JQuery code that breaks when a user changes muscle groups by clicking on an image map in my Rails 4 application. Some background: The image map is of the human muscular system. The target muscle groups and strength exercises are in separate drop-down menus, which work okay. The hotspots on the image map also work okay.

My goal is to improve user experience by letting users click hotspots on the image map to choose target muscle groups. I'm using JQuery to filter option elements by optgroup. For example, if a user clicks the "abs" region on the image map, the first drop-down menu should indicate the user's muscle group selection, and the second drop-down menu should populate with abs-related exercises. My JQuery works okay until a user changes muscle groups by clicking the image map. That's when the exercise drop-down menu stops populating.

Form fields for drop-down menus:

<div class="field">
  <%= f.label :muscle_group %><br />
  <%= f.collection_select :muscle_group_id, MuscleGroup.order(:name), :id, :name, prompt: "Choose your target muscles", include_blank: false %>
</div>
<div class="field">
  <%= f.label :strength_exercise %><br />
  <%= f.grouped_collection_select :strength_training_list_id, MuscleGroup.order(:name), :strength_training_lists, :name, :id, :name, include_blank: true %>
</div>

The rendered HTML for drop-down menus:

<div class="field">
  <label class="string required" for="strength_exercise_muscle_group"><abbr title="required">*</abbr> Muscle group</label><br>
  <select id="strength_exercise_muscle_group_id" name="strength_exercise[muscle_group_id]"><option value="">Choose your target muscles</option>
  <option selected="selected" value="11">Abs - rectus abdominis</option>
</div>

<div class="field">
  <label class="string optional" for="strength_exercise_strength_exercise">Strength exercise</label><br />
  <select id="strength_exercise_strength_training_list_id" name="strength_exercise[strength_training_list_id]"><option value=""></option>
  <optgroup label="Abs - rectus abdominis">
  <option value="5">Lying Leg Raise</option>
  <option value="6">Kneeling Front Pull Down</option>
  <option value="15">Bicycle</option>
  <option value="24">Ab Roll-out</option>
  // more option values ...
  </optgroup>
  </select>   
</div>

JQuery code:

$(document).ready(function() {
      $("#map_abs").click(function(){
        var absID = 11;
        var muscle_group = $("#strength_exercise_muscle_group_id option[value='" + absID + "']").attr("selected","selected");
        var strength_training_lists = $('#strength_exercise_strength_training_list_id').html();
        var options;
        var muscle_group_selected = $('#strength_exercise_muscle_group_id :selected').text();
        options = $(strength_training_lists).filter("optgroup [label='" + muscle_group_selected + "']").html();
        console.log(options);
          if (options) {
          $('#strength_exercise_strength_training_list_id').html(options);
            return $('#strength_exercise_strength_training_list_id').parent().show();
         } else {
            $('#strength_exercise_strength_training_list_id').empty(); 
           return $('#strength_exercise_strength_training_list_id').parent().hide();
        }
       }); //end click function
  });  //end ready

This is what happens after the page loads:

If a user clicks on the abs hotspot, the first drop-down menu correctly indicates that "abs" is the selected option for the muscle group. The second drop-down menu correctly populates with abs related strength exercises. This is the desired behavior anytime a user clicks a hotspot.

This is what happens if a user uses the image map to change from one muscle group to another one:

My JQuery code breaks on the change. If a user uses the image map to change from one muscle group to another, say from abs to biceps, the first drop-down menu correctly changes to indicate biceps is the newly selected option, but the second drop-down menu disappears. No biceps exercises are shown. In the console, the variable named "options" is "undefined" after the attempted change. The options variable is empty, because of the break in my code's logic.

The following behavior is what I want to see whenever a user clicks the image map to change muscle groups:

(a) the first dropdown menu should indicate the new muscle group selected, and (b) the second drop-down menu should populate with exercises that target the new muscle group.

My thought is to bind a JQuery change event to the selector '#strength_exercise_muscle_group_id' to deal with when a user changes muscle groups. Something like:

$('#strength_exercise_muscle_group_id').change(function() {
 //code to address what happens when user changes muscle groups
}

However, I'm new to Jquery and confused about how to do this, in particular the syntax and where to place such a function if that is indeed what I really need to fix my code. How do I modify my JQuery code to get the behavior I want?

Answer 1

您可以在.change函数中调用click函数：

$('#strength_exercise_muscle_group_id').change(function() {
   var bodyPart = // distinguish your body part from the id
   $(bodyPart).click();
}

像这样，两个更改都将使用相同的方法。

编辑：请参阅此jsfiddle进行演示！

How to bind a JQuery change event to image map click

1 个答案: