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

Answer 2

I hope this could help you. You could see my code from here http://jsfiddle.net/p0mpv9e0/3/.

Why your code is not working is because you forget to put attribute 'data-confirm' to input element. It should be:

<input type="checkbox" data-confirm ... />

I'm not sure what do you mean by pas variables but if you want to get data that stored in input element you could get it using variable "this" inside the event callback.

$('input[data-confirm]').click(function() {
    var self = this; // it's object that store data from input element
});

Answer 3

UPDATE

http://jsfiddle.net/n0ypwceo/3/

**HTML**

<div class="available_resume_details_height">
    <input type="checkbox" data-confirm='Are you sure you want to remove? [1] ' value="id1" /> <span style="cursor: pointer;">Checkbox</span>

    <br/>
    <input type="checkbox" data-confirm='Are you sure you want to remove? [2]' value="id2" /> <span style="cursor: pointer;">Checkbox</span>

</div>

<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">Confirm?</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">"Cancel"</button>&nbsp;&nbsp;<a class="btn-u btn-u-blue" id="dataConfirmOK">"Confirm"</a></div></div>

<div id="menu_entry_id1" style="display:none">menu entry id 1</div>
<div id="menu_entry_id2" style="display:none">menu entry id 2</div>

JQ:

 // global vars
 //checkbox that is clicked
 var $checkboxClicked;
 //If the confirm button is clicked
 var confirm=false;

$(document).ready(function () {

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

        //box that is clicked placed in a variable
        $checkboxClicked = $(this);
        //get and store confirm text
        var dataConfirmTxt=$checkboxClicked.attr('data-confirm')

        confirm = false;

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

        //append confirm text
        $('#dataConfirmModal').find('.modal-body').html(dataConfirmTxt);
        //show moadl
        $('#dataConfirmModal').modal('show')
        //if confirm button selected
        $('#dataConfirmOK').click(function () {

            // the confirm button is clicked
            confirm=true;

            // hide modal
            $('#dataConfirmModal').modal('hide')

        });

        return false;
    });

    //modal event: before hide    
    $('#dataConfirmModal').on('hidden.bs.modal', function (e) {

        //get menu id
        var id=$checkboxClicked.val();
        //alert(id+'/'+confirm);        
        if(confirm==true)     
        {
             // check checkbox
            $checkboxClicked.prop('checked', true);
            // show menu entry
            $('#menu_entry_' + id).show();
        }
        else
        {
            // uncheck checkbox
            $checkboxClicked.prop('checked', false);
            // hide menu entry
            $('#menu_entry_' + id).hide();
        }
     })

});