將變量傳遞給bootstrap模式

Question

我有一個javascript確認/取消彈出框，動態取消選中一個復選框，並動態隱藏或顯示一個menu_entry，它是表單上顯示的列表的一部分，只有當用戶在js確認彈出框中選擇確定按鈕時。

我現在正在嘗試將js確認更改為bootstrap模式，但我不確定如何將變量傳遞給bootstrap模式代碼並獲得js confirm彈出框的相同功能。

這是我的工作html代碼，調用javascript確認彈出框：

{% 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 %}

這是我的javascript代碼，用於顯示確認彈出窗口並取消選中該復選框並顯示/隱藏列表條目：

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();
    }
}

這是調用bootstrap模式的新html代碼。 這確實使bootstrap模式出現：

{% 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 %}

這是我的bootstrap模態代碼無法正常工作。 我不確定如何傳遞變量並獲得js確認彈出的相同功能：

    $(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;
        });

    });

引導模式應顯示/隱藏列表條目，並且僅在選中確認按鈕時取消選中該復選框。

編輯：添加的復選框代碼：

<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

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();
        }
     })

});

Answer 2

數據屬性可以幫助您以無縫方式傳遞函數中所需的數據，還可以幫助您避免維護不友好的內聯JavaScript。 設置三個事件偵聽器，如下所示：

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 3

我希望這可以幫到你。 你可以從http://jsfiddle.net/p0mpv9e0/3/看到我的代碼。

為什么你的代碼不起作用是因為你忘了將屬性'data-confirm'放到input元素中。 它應該是：

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

我不確定pas變量是什么意思，但如果你想獲取存儲在input元素中的數據，你可以在事件回調中使用變量“this”來獲取它。

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