Interactive Form directly linked to SQLite3 database

Looking for assistance with converting a modal from static, fake data to dynamic data from an SQLite3 database. The goal is to display a table of existing data and allow users to add new rows by clicking a +New button.

However, when trying to incorporate fields like { stakeholder.employee } into the modal form, an error occurs:

Error:

Invalid block tag on line 123: 'stakeholder.id'. Did you forget to register or load this tag?

The table displays existing data and has a button to add a new row:

<div class="col-md-12">
          <button type="button" class="btn btn-primary badge-pill float-right" style="font-size: 14px; width:80px;" data-toggle="modal" data-target="#new">+ New</button>
        </div>

   <table class="table table-hover" style="width:90% ">
      <thead>
        <tr style="font-family: Graphik Black; font-size: 14px">
          <th scope="col">#</th>
          <th scope="col">Employee</th>
          <th scope="col">Stakeholder Group</th>
          <th scope="col">Quadrant</th>
          <th scope="col">Description</th>
        </tr>
      </thead>
      <tbody>
        {% for stakeholder in stakeholder_list %}
        <tr style="font-family: Graphik;font-size: 12px">
          <td>{{ stakeholder.id }}</td>
          <td style="font-size: 15px">{{ stakeholder.employee }}</li></td>
          <td>{{ stakeholder.stakeholder_group }}</td>
          <td>{{ stakeholder.stakeholder_quadrant }}</td>
          <td>{{ stakeholder.description }}</td>
          <td><button type="button" class="btn btn-danger btn-sm badge-pill" style="font-size: 11px; width:60px" data-toggle="modal" data-target="#new">Edit</button></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

Here's the Modal that needs to be converted into a form:

<div class="modal fade" id="new" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Customer Form</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">  
            {% csrf_token %}
    {{ form.non_field_errors }}
        <form>
          {% for field in form %}
          {% endfor %}

          <div class="form-group">
            <label for="exampleInputEmail1">Name</label>
            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Doe, John">
            <small id="emailHelp" class="form-text" style="color:red"><i>*Required Field</i></small>
          </div>  
          <br>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

models.py

class Stakeholder(models.Model):
    employee = models.CharField(max_length=200)
    stakeholder_group = models.CharField(max_length=200)
    description = models.CharField(max_length=200)
    stakeholder_quadrant = models.CharField(max_length=200)
    def __str__(self):
        return self.stakeholder

Answer №1

When you encounter this error, the message will say:

Invalid block tag on line 123: 'stakeholder.id'. Did you forget to register or load this tag?

In my personal experience, I have found that this error can often be triggered by the following situations:

  1. An unclosed tag within your document
  2. A malformed mustache variable like {% stakeholder.id %} maybe?
  3. Tags getting tangled up somehow?

My suggestion is to carefully review your template for any of these scenarios. Chances are, that's where the issue lies.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transform a string into a boolean value for a checkbox

When using v-model to show checked or unchecked checkboxes, the following code is being utilized: <template v-for="(item, index) in myFields"> <v-checkbox v-model="myArray[item.code]" :label="item.name" ...

In Bootstrap cards, image overlays are always displayed on top of the image

I'm struggling to understand why I can't get the image in this HTML snippet to appear anywhere other than on top. Despite my attempts to adjust z-index, use !important overrides, and try other methods for hours, I haven't been successful. My ...

How can I detect the scroll action on a Select2 dropdown?

Is there a way to capture the scrolling event for an HTML element that is using Select2? I need to be able to dynamically add options to my dropdown when it scrolls. Just so you know: I am using jQuery, and the dropdown is implemented with Select2. The ...

The inline variables in CSS transitions are failing to be detected

The CSS transitions are not recognizing the inline variables, or if they are, they are not receiving the correct information. Below is an illustration of how the inline variables are defined in the HTML: <p class="hidden" style="--order ...

Calling a function within another function

In my code, I have a function that formats the price and retrieves the value needed for refactoring after upgrading our dependencies. I'm struggling with passing the form value to the amountOnBlur function because the blur function in the dependencie ...

What could be the reason for the malfunctioning of the header() function in PHP

Currently, I'm utilizing AJAX to facilitate user registration for a service. Here's the code snippet for the submit button: <input type="button" id="register" name="register" class="btn btn-success" onclick="registration();" value="Register"/ ...

Notify user before exiting the page if there is an unsaved form using TypeScript

I am working on a script that handles unsaved text inputs. Here is the code for the script: export class Unsave { public static unsave_check(): void { let unsaved = false; $(":input").change(function(){ unsaved = true; ...

Newbie's guide: Saving information in Ruby on Rails

In my Rails 4 application, I am looking to save questions and answers either in a document or database. Once stored, I want to showcase them on a specific webpage for users to respond. For instance, I envision having a page titled /questions where a quest ...

What is the best way to align an inline list in the center so that it is responsive across all

Here is the CSS code provided: .wrapper{ display: inline; line-height: 2em; width: 100%; height: 100%; min-width: 1000px; min-height: 1000px; text-align: center; } ul{ list-style: none; } li{ list-style: none; } .craftb ...

What is the process for displaying a document file in an iframe that is returned from a link's action?

I have a main page called index.cshtml. This page displays a list of document files along with an iframe next to it. My goal is to load the selected document file into the iframe when I click on any item in the list. However, currently, when I click on a d ...

Sending out a command does not equate to establishing Redux with an outcome

I've been grappling with this issue for the past 18 hours and I'm at a loss to figure out what's causing the problem. My redux setup is working smoothly as it dispatches actions and receives state correctly for other components. However, in ...

Enhancing your JQuery Select2 plugin by incorporating a Checkbox feature

I am currently utilizing the jQuery select2 plugin to enable multiple selections. My goal is to incorporate a checkbox for each selectable option. Depending on whether the checkbox is checked or unchecked, the dropdown option should be selected accordingl ...

How can we prevent Material-UI and Redux-form from re-rendering when an option is clicked in the select input?

I am facing an issue with rendering options dynamically. Whenever I click on the select or the options, the component re-renders and changes the options. As a result, I need to click twice to select an option in the dropdown. This re-rendering is happening ...

Calculating the percentage difference between two dates to accurately represent timeline chart bar data

I am in the process of creating a unique horizontal timeline chart that visually represents the time span of milestones based on their start and finish dates. Each bar on the timeline corresponds to a milestone, and each rectangle behind the bars signifies ...

Unable to show message upon form submission with ajax

I'm attempting to use AJAX to submit a form in CodeIgniter. The form values are being saved in the database, but the response set in the controller isn't displaying in the console.log or alert within the AJAX code. Form Code <form class=" ...

The method getManyAndCount() in TypeORM does not include related data in its return result

I'm completely new to TypeORM and NestJs. Currently, I am working on a project where I have an entity called VehicleModel which has a ManyToOne relationship with VehicleBrand. However, when I execute getManyAndCount() on my query, I am puzzled as to ...

Database function call is not producing any results

Initially, the code below was intended to create a new user when starting the quiz, but now it is meant to update an existing user's details. However, I am facing an issue where the addUser() function is not completing as expected even though all inpu ...

Disable the smooth scroll animation when transitioning between pages using the Link component in NextJS

Not sure if this is a new feature of Next.js, as I didn't encounter this issue in my previous Next.js project. When I reach the bottom of a page and try to navigate to another page, a scroll-to-top animation appears on the destination page. I want to ...

When it comes to AFrame+Three.js, which is more efficient: having numerous meshes with minimal triangles per mesh or having a few meshes with a high number of

Currently working with Aframe 1.0.4 and Three.js 111, I am exploring the performance differences between: Whether it is better to have a few entities with a high number of triangles or many entities with fewer triangles each. Specifically, I am debating ...

Jquery Image Slider showcasing a variety of image sizes

I am in need of creating an image slider that includes images of varying heights. My goal is to ensure there are no gaps between the images. Should any image be smaller, it should be displayed with suitable padding or margin. The image s ...