pass variables to a bootstrap modal

Question

I have a javascript confirm / cancel pop up box that dynamically unchecks a checkbox and also dynamically hides or shows a menu_entry that is part of a list that appears on the form, only when the user selects the ok button on the js confirm pop up box.

I am now trying to change the js confirm to a bootstrap modal, but I am uncertain how to pass the variables to the bootstrap modal code and get the same functionality of the js confirm pop up box.

Here is my working html code that has the call to the javascript confirm pop up box:

{% for id, menu_entry, selected, item_count in menu_entries %}

    <div class="available_resume_details_height">
        <input type="checkbox" 
               style="width:1.5em; height:1.5em;"
               name="selected_items"
               value="{{ id }}"
               {% if selected %}checked="checked"{% endif %}

               onclick="checkboxUpdated(this, {{ item_count }}, '{{ menu_entry.label }}', {{ id }});"
         />

        <span style="cursor: pointer;" 
              rel="popover" 
              data-content="{{ menu_entry.tooltip }}" 
              data-original-title="{{ menu_entry.label }}" 
              {{ menu_entry.label }}
         </span>

    </div>

{% endfor %}

Here is my javascript code to display the confirm pop up and uncheck the checkbox and show/hide the list entry:

function checkboxUpdated(checkbox, count, label, id) {
    if (checkbox.checked) {
        $('#menu_entry_' + id).show();
     } else {
         if (count > 0) {
             if (! confirm('{% trans "You have '+ count +' saved '+ label +'.\n\nAre you sure you want to delete your ' + count + ' saved ' + label +'?" %}')) {
                 checkbox.checked = true;
                 return;
                }
            }
        $('#menu_entry_' + id).hide();
    }
}

Here is the new html code that has the call to the bootstrap modal. This does make the bootstrap modal appear:

{% for id, menu_entry, selected, item_count in menu_entries %}

    <div class="available_resume_details_height">
        <input type="checkbox" 
               style="width:1.5em; height:1.5em;"
               name="selected_items"
               value="{{ id }}"
               {% if selected %}checked="checked"{% endif %}

               {% if selected %}
                   data-confirm="{% blocktrans with entry_label=menu_entry.label %}Are you sure you want to remove your {{ item_count }} selected {{entry_label}} Resume Details?{% endblocktrans %}"
               {% endif %}

         />

        <span style="cursor: pointer;" 
              rel="popover" 
              data-content="{{ menu_entry.tooltip }}" 
              data-original-title="{{ menu_entry.label }}" 
              {{ menu_entry.label }}
         </span>

    </div>

{% endfor %}

Here is my bootstrap modal code that is not working. I am unsure how to pass the variables and get the same functionality of the js confirm pop up:

    $(document).ready(function() {

        $('input[data-confirm]').click(function(ev) {

            var href = $(this).attr('href');

            if (!$('#dataConfirmModal').length) {

                $('body').append('<div id="dataConfirmModal" class="modal modal-confirm-max-width" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true"><icon class="icon-remove"></icon></button><h4 class="modal-title" id="dataConfirmLabel">{% trans "Confirm" %} - {{ resume_detail_temp_value }}</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Cancel" %}</button>&nbsp;&nbsp;<a class="btn-u btn-u-blue" id="dataConfirmOK">{% trans "Confirm" %}</a></div></div>');

            }

            $('#dataConfirmModal').find('.modal-body').html($(this).attr('data-confirm'));

            $('#dataConfirmModal').modal({show:true});

            $('#dataConfirmOK').click(function() {

                // handle checkbox function here.

            });

            return false;
        });

    });

The bootstrap modal should show/hide the list entry and only uncheck the checkbox when the confirm button is selected.

EDIT: ADDED CHECKBOX CODE:

<input type="checkbox" 
       style="width:1.5em; height:1.5em;"
       name="selected_items"
       value="{{ id }}"
       {% if selected %}checked="checked"{% endif %}
       onclick="checkboxUpdated(this, {{ item_count }}, '{{ menu_entry.label }}', {{ id }});"/>

Answer 1

Data attributes may help you pass the data you need in the function in a seamless manner and also help you avoid maintenance unfriendly inline JavaScript. Set up three event listeners as follows:

function checkboxUpdated(checkbox, count, label, id) {
    var checkbox = this,
        count = $(checkbox).data('count'),
        label = $(checkbox).data('label'),
        id = checkbox.value;
    if(checkbox.checked) {
        $('#menu_entry_' + id).show();
    } else {
        if (count > 0) {
            $('#confirm_modal').data('element', checkbox).find('div.modal-body p:first')
            .html( 'You have ' + count + ' saved ' + label + '. Are you sure you want to delete your ' + count + ' saved ' + label + '?' ).end()
            .modal('show');
            return;
        }
        $('#menu_entry_' + id).hide();
    }
}
$(function() {
    $(':checkbox').on('change', checkboxUpdated).change();
    $('.confirm-no').on('click', function() {
        var element = $('#confirm_modal').data('element');
        element.checked = true;
    });
    $('.confirm-yes').on('click', function() {
        var element = $('#confirm_modal').data('element'),
            id = element.value;
        $('#menu_entry_' + id).hide();
    });
});

DEMO