JQuery not working within Django view?

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>
            {% endfor %}

        <div id="data-display">

I have then constructed my JQuery system as this…

<script src=https://code.jquery.com/jquery-3.6.0.min.js></script>

    <!-- Your JavaScript -->

    $(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
            const url = `/credence/${organisationSlug}/${decisionUuid}/get_data/${optionId}/`;
            console.log('AJAX URL:', url);

        // Send AJAX request to the Django backend
            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');

                // Assuming 'field1' and 'field2' are the keys received from the backend
                data.forEach(item => {
                    const form = `
                        <div class="data-form">
                                <label>Field 1:</label>
                                <input type="text" value="${item.summary}" readonly>
                                <label>Field 2:</label>
                                <input type="text" value="${item.estimated_cost}" readonly>
            error: function(xhr, status, error) {
                console.error('Error fetching data:', status, error);

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:

  1. Clicked a .clickable-div element! - a simple message generated by my code
  2. 3 - 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
  3. 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):

  1. GET 404 (Not Found)
  2. 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")
            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?

You should have an error message on your console where you’re running runserver that may provide some more useful information.