History table: relocate HTML for modal window (#1090)

- Store HTML for modal window inside an invisible <div> element instead
  of inside the <button> element's value attribute
- Mark history.detailed_msg as safe as it is already manually run
  through the template engine beforehand and would be broken if escaped
  a second time
This commit is contained in:
zoeller-freinet 2022-01-01 21:20:01 +01:00
parent 302e793665
commit 0b2ad520b7
2 changed files with 30 additions and 43 deletions

View file

@ -24,19 +24,20 @@
<td>{{ history.history.created_on }}</td>
<td width="6%">
<div id="history-info-div-{{ loop.index0 }}" style="display: none;">
{{ history.detailed_msg | safe }}
{% if history.change_set %}
<div class="content">
<div id="change_index_definition"></div>
{% call applied_change_macro.applied_change_template(history.change_set) %}
{% endcall %}
</div>
{% endif %}
</div>
<button type="button" class="btn btn-flat btn-primary history-info-button"
{% if history.detailed_msg == "" and history.change_set == None %}
{% if history.detailed_msg == "" and history.change_set is none %}
style="visibility: hidden;"
{% endif%}
value='{{ history.detailed_msg }}
{% if history.change_set != None %}
<div class="content">
<div id="change_index_definition"></div>
{% call applied_change_macro.applied_change_template(history.change_set) %}
{% endcall %}
</div>
{% endif %}
'>Info&nbsp;<i class="fa fa-info"></i>
{% endif %} value="{{ loop.index0 }}">Info&nbsp;<i class="fa fa-info"></i>
</button>
</td>
</tr>
@ -45,17 +46,10 @@
</table>
</div>
<script>
var table;
$(document).ready(function () {
table = $('#tbl_history').DataTable({
"order": [
[2, "desc"]
@ -74,22 +68,14 @@ $(document).ready(function () {
fixedHeader: true
});
$(document.body).on('click', '.history-info-button', function () {
var modal = $("#modal_history_info");
var info = $(this).val();
var history_id = $(this).val();
var info = $("#history-info-div-" + history_id).html();
$('#modal-info-content').html(info);
modal.modal('show');
});
$(document.body).on("click", ".button-filter", function (e) {
e.stopPropagation();
var nextRow = $("#filter-table")
@ -101,4 +87,4 @@ $(document).ready(function () {
});
</script>
</script>

View file

@ -114,20 +114,20 @@
<td>{{ history.history.msg }}</td>
<td>{{ history.history.created_on }}</td>
<td width="6%">
<div id="history-info-div-{{ loop.index0 }}" style="display: none;">
{{ history.detailed_msg | safe }}
{% if history.change_set %}
<div class="content">
<div id="change_index_definition"></div>
{% call applied_change_macro.applied_change_template(history.change_set) %}
{% endcall %}
</div>
{% endif %}
</div>
<button type="button" class="btn btn-flat btn-primary history-info-button"
{% if history.detailed_msg == "" and history.change_set == None %}
style="visibility: hidden;"
{% endif%}
value='{{ history.detailed_msg }}
{% if history.change_set != None %}
<div class="content">
<div id="change_index_definition"></div>
{% call applied_change_macro.applied_change_template(history.change_set) %}
{% endcall %}
</div>
{% endif %}
'>
Info&nbsp;<i class="fa fa-info"></i>
{% if history.detailed_msg == "" and history.change_set is none %}
style="visibility: hidden;"
{% endif %} value="{{ loop.index0 }}">Info&nbsp;<i class="fa fa-info"></i>
</button>
</td>
</tr>
@ -243,7 +243,8 @@
$(document.body).on('click', '.history-info-button', function () {
var modal = $("#modal_history_info");
var info = $(this).val();
var history_id = $(this).val();
var info = $("#history-info-div-" + history_id).html();
$('#modal-info-content').html(info);
modal.modal('show');
});