将变量传递给引导模式 [英] pass variables to a bootstrap modal

问题描述

我有一个Java脚本确认/取消弹出框，它动态取消选中复选框并动态隐藏或显示作为表单列表一部分的MENU_ENTRY，仅当用户选择js确认弹出框上的确定按钮时。

我现在正在尝试将js确认更改为引导模式，但我不确定如何将变量传递给引导模式代码并获得与js确认弹出框相同的功能。

下面是我正在运行的html代码，它调用了Java脚本确认弹出框：

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

以下是我用于显示确认弹出窗口、取消选中复选框并显示/隐藏列表项的Java代码：

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 +'.

Are you sure you want to delete your ' + count + ' saved ' + label +'?" %}')) {
                 checkbox.checked = true;
                 return;
                }
            }
        $('#menu_entry_' + id).hide();
    }
}

下面是调用引导模式的新html代码。这确实会使引导模式出现：

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

下面是我的引导模式代码，但它不起作用。我不确定如何传递变量并获得与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 }});"/>

推荐答案

数据属性可以帮助您无缝地传递函数中所需的数据，还可以帮助您避免维护不友好的内联Java。按如下方式设置三个事件监听器：

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

这篇关于将变量传递给引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！