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>{{ history.history.created_on }}</td>
<td width="6%"> <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" <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;" style="visibility: hidden;"
{% endif%} {% endif %} value="{{ loop.index0 }}">Info&nbsp;<i class="fa fa-info"></i>
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>
</button> </button>
</td> </td>
</tr> </tr>
@ -45,17 +46,10 @@
</table> </table>
</div> </div>
<script> <script>
var table; var table;
$(document).ready(function () { $(document).ready(function () {
table = $('#tbl_history').DataTable({ table = $('#tbl_history').DataTable({
"order": [ "order": [
[2, "desc"] [2, "desc"]
@ -74,22 +68,14 @@ $(document).ready(function () {
fixedHeader: true fixedHeader: true
}); });
$(document.body).on('click', '.history-info-button', function () { $(document.body).on('click', '.history-info-button', function () {
var modal = $("#modal_history_info"); 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-info-content').html(info);
modal.modal('show'); modal.modal('show');
}); });
$(document.body).on("click", ".button-filter", function (e) { $(document.body).on("click", ".button-filter", function (e) {
e.stopPropagation(); e.stopPropagation();
var nextRow = $("#filter-table") 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.msg }}</td>
<td>{{ history.history.created_on }}</td> <td>{{ history.history.created_on }}</td>
<td width="6%"> <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" <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;" style="visibility: hidden;"
{% endif%} {% endif %} value="{{ loop.index0 }}">Info&nbsp;<i class="fa fa-info"></i>
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>
</button> </button>
</td> </td>
</tr> </tr>
@ -243,7 +243,8 @@
$(document.body).on('click', '.history-info-button', function () { $(document.body).on('click', '.history-info-button', function () {
var modal = $("#modal_history_info"); 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-info-content').html(info);
modal.modal('show'); modal.modal('show');
}); });