0

I am trying to do the following.

  1. When the user clicks on a button a modal should show up
  2. The modal should show a different content depending on which button has been pressed
  3. There are many buttons of that kind on my site. So I want to pass a variable to the modal and make an if comparison

Here is my modal

<div class="modal fade" id="group_selection" role="dialog">
 <div class="modal-dialog">
  <div class="modal-content">

          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Select the journal club for which this vote should count</h4>
          </div>

          <div class="modal-body">
                <form>

                  {% for group in groups %}

                      <input class="group_sel" type="checkbox" value="{{ group[0] }}">{{ group[0] }}
                      </input><br>

                  {% endfor %} 
              </form>
          </div>

          <div class="modal-footer">
              <input class="btn btn-primary multivote" type="submit" data-dismiss="modal" value="Select" />
              <input class="btn btn-default" type="button" data-dismiss="modal" value="Close" />
          </div>  
      <!-- </form>  -->                                
  </div>

The modal above shows a selection of groups. This selection is the same for each modal, so that works fine, but now I want to disable the input statement in the for loop depending on which button has been pressed to get to this modal.

I don't know how to create new variables within html. I was hoping that jQuery can help with this, so I trigger the modal with the following jQuery command

<script type="text/javascript">
$(document).ready(function(){
   $(".vote").click(function(){ 
      $('#group_selection').modal('show');
   });
});
</script>

I know that I can use jQuery to write values into the html code (as shown here Passing data to a bootstrap modal) but I don't see how I can use that to make an if selection?

Thanks for your help

best

carl

Community
  • 1
  • 1
carl
  • 17
  • 3

1 Answers1

0

Simply determine which of the .vote buttons were clicked and perform the appropriate task before showing the modal, i.e.:

$(".vote").click(function(){ 
      switch($(this).attr('value'))
      {
          case '5 Stars': // Assumes your button's value was '5 Stars'
            $('#group1').attr('disabled','disabled'); //disables group1 when 5 stars was selected  
               break; 
          case '4 Stars': ... break;
      }
      $('#group_selection').modal('show');
   });

Or, assign each different button a different .click() handler to execute the appropriate task.

Side Notes: You should also reset all the disables when the modal is opened and reset the form to make it fresh for each load as well

Carl K
  • 974
  • 7
  • 18
  • Hi carl K, thanks for your answer. What if the number of options needs to be dynamic? In my case its not just 5 stars, 4 stars etc. I have 10 items to vote on which are passed to the html code as a list. That list changes every day – carl Jul 02 '15 at 01:17
  • @carl If the `.vote` buttons change, they must have some sort of logic associated with them that would have to be interpreted. Will there be a standard set of possible actions? – Carl K Jul 02 '15 at 01:27
  • sorry I might have oversimplified the problem above. The point of the exercise is that one should never be able to vote twice for the same object and the same group. So I will pass a list of previous votes to the html which I calculated beforehand in python-flask. So I have a list of votes and a list of items to vote on. The length of both lists is dynamic. Each button is associated with a item and I know how to pass the item name to jquery. If I could access the list of votes in jquery I could do the comparison in jquery. Do you know how to access variables in jquery... – carl Jul 02 '15 at 01:32
  • @carl I am a tad confused. Re: your last question, jQuery is part of javascript, therefore, you can use global variables in conjunction. For example, if you want to use a global variable as part of a jQuery selector, you can do it as such: `var myVar = 'stars'; $('#'+myVar);` will return the object with `id=stars` – Carl K Jul 02 '15 at 01:48