У меня есть всплывающее окно подтверждения/отмены javascript, которое динамически отменяет флажок, а также динамически скрывает или отображает menu_entry, который является частью списка, который появляется в форме, только когда пользователь выбирает ok на всплывающем окне подтверждения js.передать переменные в bootstrap modal
Теперь я пытаюсь изменить js confirm на bootstrap modal, но я не уверен, как передать переменные в модальный код 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();
}
}
Новый код html, который имеет вызов bootstrap modal. Это делает загрузочный модальный вид:
{% 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> <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;
});
});
Бутстраповское модальный должен показать/скрыть элемент списка и только снимите флажок при выборе кнопки подтверждения.
EDIT: ДОБАВЛЕНО CHECKBOX КОД:
<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 }});"/>
Спасибо. Это было очень полезно. – user1261774
Отличный !! Рад, что вы нашли это полезным. Наслаждайтесь! – PeterKA