I am trying to get JQuery to grab data from my models without necessarily reloading the page.
I have defined a DIV that can be duplicated by the system; so that I have multiple instances of the DIV.
This DIV has been given the class name of clickable-div.
I have another div, called data-display that I want data to appear in, as I click on each of the dynamic clickable divs.
My template has:
<div class="row row-cols-1 row-cols-md-3 g-4">
{% for option in options %}
<div class="col">
<div class="card shadow" id="parent-container">
<div class="card-body text-black clickable-div" style="cursor: pointer;" data-option-id="{{ option.id }}">
<h5 class="card-title text-center">({{ option.id }})</h5>
<p class="card-text text-center">{{ option.heading }}</p>
</div>
</div>
</div>
{% endfor %}
<div id="data-display">
</div>
I have then constructed my JQuery system as this…
<script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
<!-- Your JavaScript -->
<script>
$(document).ready(function() {
console.log("Document is ready!");
const organisationSlug = "{{ organisation_slug }}";
const decisionUuid = "{{ decision_uuid }}";
// Event delegation to handle click on dynamically generated .clickable-div elements
$(document).on('click', '.clickable-div', function() {
console.log("Clicked a .clickable-div element!");
const clickedDiv = $(this);
const optionId = clickedDiv.data('option-id'); // Get the option ID from the data attribute
console.log(optionId);
const url = `/credence/${organisationSlug}/${decisionUuid}/get_data/${optionId}/`;
console.log('AJAX URL:', url);
// Send AJAX request to the Django backend
$.ajax({
url: url, // Modify the URL to include the option ID
type: 'GET',
beforeSend: function(xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
},
success: function(data) {
// Process the received data and display it in the data-display div
const dataDisplay = $('#data-display');
dataDisplay.empty();
// Assuming 'field1' and 'field2' are the keys received from the backend
data.forEach(item => {
const form = `
<div class="data-form">
<form>
<label>Field 1:</label>
<input type="text" value="${item.summary}" readonly>
<br>
<label>Field 2:</label>
<input type="text" value="${item.estimated_cost}" readonly>
</form>
</div>
`;
dataDisplay.append(form);
});
},
error: function(xhr, status, error) {
console.error('Error fetching data:', status, error);
}
});
});
});
</script>
In there are a few console.log statements to help me see what is going on.
I can see that the clicks are working and that a URL is being generated.
When I load the document, the console window confirms my code is running by logging Document is ready!
I click on the first clickable DIV and this is confirmed by 3 messages:
Clicked a .clickable-div element!- a simple message generated by my code3- the optionID of the div I have selected. This relates to the data it holds and matches the data being displayed and the ID of the record within my model- A path:
AJAX URL: /credence/testorg/2894fe6c-7fe0-45ae-9e22-0456d25c6023/get_data/3/
But then I get two errors (the second being caused by the first, I believe):
GET http://127.0.0.1:8000/credence/testorg/2894fe6c-7fe0-45ae-9e22-0456d25c6023/get_data/3/ 404 (Not Found)Error fetching data: error Not Found
My views.py contains the class that my JQuery is trying to use:
class GetDataView(View):
def get(self, request, option_id):
print("Getting to the view")
try:
data = Option_Model.objects.filter(id = option_id)
serialized_data = serialize('json', data)
return JsonResponse(serialized_data, safe = False)
except Option_Model.DoesNotExist:
return JsonResponse({'error': 'Option not found'}, status = 404)
Whilst my urls.py has the pattern:
path('credence/<slug:organisation_slug>/<uuid:decision_uuid>/get_data/<int:option_id>/', GetDataView.as_view(), name='get_data'),
I have been trying for some time now to see where I am going wrong and cannot see the wood for the trees. Anyone able to help, please?