I am trying to automatically save an HTM form when the user clicks a link. I am detecting that they have clicked on a link and that data in the form has changed. I am also asking them if they want to save or discard the data. All of that seems to be working correctly, but I am unable to actually save the data. Here is the HTML
Main HTML file
{% extends 'patients/base.html' %}
{% load static %}
{% load i18n %}
{% load l10n %}
{% load crispy_forms_tags %}
{% block content %}
<script src=".3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
currentAnchor = null;
function SaveData2(saveData) {
console.log('SaveData2, save data: ' + saveData)
console.log("SaveData2 href " + currentAnchor.attr('href'));
if(saveData === 'True') {
console.log("Save the data");
$('#cons_update').submit();
}
else {
console.log("Don't save the data");
}
window.location.href = currentAnchor.attr('href');
}
const price_list = JSON.parse("{{ price_data|escapejs }}");
$(document).ready(function() {
// Update price based on reason
$("#id_reason").on('focusout', function() {
var reason_val = $("#id_reason").val();
var price = 0;
jQuery.each(price_list, function(index, item) {
if(item[0] == reason_val) {
price = item[1];
return false;
}
});
$("#id_price").val( price );
});
});
const other_consults = JSON.parse("{{ other_consults|escapejs }}");
$(document).ready(function() {
console.log("in ready event, load consults")
var $ul = $('#consults')
jQuery.each(other_consults, function(index, item) {
$ul.append('<li><a href="/patient/' + item[0] + '/patient-consults-update/">' + item[1] + '</a></li>')
});
});
$(document).ready(function() {
$("#cons_update :input").change(function() {
console.log("in form change event")
$("#cons_update").data("changed",true);
});
});
$(document).ready(function() {
$('a').click(function() {
console.log("in link clicked event")
if ($("#cons_update").data("changed")) {
currentAnchor = $(this);
console.log("data changed")
SaveData();
return false;
}
});
});
</script>
<div class="content-section">
<form id="cons_update" method="POST">
{% csrf_token %}
{{ form.non_field_errors }}
<fieldset class="form-group">
<legend class="border-bottom mb-4">{% trans "General Information" %}</legend>
{{ form.patient_name|as_crispy_field }}
<div class="form-row">
<div class="form-group col-md-6 mb-0">
{% localize on %}
{{ form.date|as_crispy_field }}
{% endlocalize %}
</div>
<div class="form-group col-md-6 mb-0">
{{ form.age|as_crispy_field }}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 mb-0">
{{ form.weight|as_crispy_field }}
</div>
<div class="form-group col-md-6 mb-0">
{{ form.height|as_crispy_field }}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 mb-0">
{{ form.bp|as_crispy_field }}
</div>
<div class="form-group col-md-6 mb-0">
{{ form.temp|as_crispy_field }}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 mb-0">
{{ form.reason|as_crispy_field }}
</div>
<div class="form-group col-md-6 mb-0">
{{ form.price|as_crispy_field }}
</div>
</div>
{{ form.visit_details|as_crispy_field }}
{{ form.next_appointment|as_crispy_field }}
</fieldset>
{% if user.clinicuser.role == 'doctor' %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">{% trans "Visit Details" %}</legend>
{{ form.observations|as_crispy_field }}
{{ form.results|as_crispy_field }}
{{ form.consultation_notes|as_crispy_field }}
{{ form.history|as_crispy_field }}
<div class="form-row">
<div class="form-group col-md-6 mb-0">
{{ form.studies|as_crispy_field }}
</div>
<div class="form-group col-md-6 mb-0">
{{ form.diagnosis|as_crispy_field }}
</div>
</div>
{{ form.treatment|as_crispy_field }}
{{ form.referral|as_crispy_field }}
</fieldset>
{% endif %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">{% trans "Staff Details" %}</legend>
<div class="form-row">
<div class="form-group col-md-6 mb-0">
{{ form.doctor|as_crispy_field }}
</div>
<div class="form-group col-md-6 mb-0">
{{ form.user|as_crispy_field }}
</div>
</div>
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" name="update" value="True" type="submit">{% trans "Update" %}</button>
<button class="btn btn-outline-info" id="btnSave" name="save" value="True" type="submit">{% trans "Save and Continue" %}</button>
<a class="btn btn-outline-danger" onclick="window.history.back()">{% trans "Cancel" %}</a>
</div>
</form>
</div>
{% endblock content %}
{% block sidebar %}
<div class="content-section">
<fieldset class="form-group">
<legend class="border-bottom mb-4">{% trans "Other Consultations" %}</legend>
<ul class="list-unstyled" id="consults">
</ul>
</fieldset>
</div>
{% endblock sidebar %}
patients/base.html
{% load static %}
{% load i18n %}
{% load l10n %}
{% load tz %}
<!DOCTYPE html>
<html>
<head>
<!-- Added for Bootstrap -->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- End bootstrap add -->
<link rel="stylesheet" type='text/css' href="{% static 'patients/main.css' %}">
<title>{% trans "House Upon The Rock" %}</title>
</head>
<body>
<dialog id="dataChanged">
<p>{% trans "Data has changed. Save the changes?" %}</p>
<button id="yesButtonBase" value="True">{% trans "Yes" %}</button>
<button id="noButtonBase" value="False">{% trans "No" %}</button>
</dialog>
<script>
const dialogBase = document.getElementById('dataChanged');
const yesButtonBase = document.getElementById('yesButtonBase');
const noButtonBase = document.getElementById('noButtonBase');
const result = 'none'
function SaveData() {
console.log("in SaveData, show dialog")
dialogBase.showModal();
}
yesButtonBase.addEventListener('click', () => {
console.log("yes")
dialogBase.close('True');
});
noButtonBase.addEventListener('click', () => {
console.log("no")
dialogBase.close('False');
});
dialogBase.addEventListener('close', () => {
console.log(`Dialog closed with returnValue: ${dialogBase.returnValue}`);
SaveData2(dialogBase.returnValue)
});
</script>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4">{% trans "House Upon The Rock" %}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{% url 'patient-list' %}">{% trans "Home" %}</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if user.is_authenticated %}
<a class="nav-item nav-link" href="{% url 'logout' %}">{% trans "Logout" %}</a>
{% else %}
<a class="nav-item nav-link" href="{% url 'login' %}">{% trans "Login" %}</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<!-- end from -->
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock content %}
</div>
<div class="col-md-4">
{% block sidebar %}{% endblock sidebar %}
</div>
</div>
</main>
<!-- end from -->
<!-- Added for Bootstrap -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src=".3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- End bootstrap add -->
</body>
</html>
In the SaveData2 function I want to submit the form if the dialog box returns a True. The correct path is followed, but no POST message is sent to the server. Any ideas why?
I also tried $('#btnSave').click() instead of the submit and had the same results. Actually clicking on the "Save and Continue" button does generate the POST message. I also tried creating my own POST message via $.ajax(...) and while I did generate a message, it resulted in an error form the server.
I'm reasonably sure I'm missing something obvious, but I'm just not seeing it.
Thanks in advance