How do I make a child template that can execute javascript?

Using Django
1

I need to write a child template that:

  • Is conditionally rendered by parent
  • Has access to parent’s context
  • Can execute javascript

Parent is a form, child is a portion of the form that can be repeated. (Child represents something that the user can add one or more of.) Child only shows up at all if a certain condition is true.

If I use extends, do I need to connect my child template to its own view?

2

Templates are rendered by the server. JavaScript executes in the browser.

Your template can contain JavaScript (or a script tag that references a JavaScript file) to be sent to the browser.

If you’re looking for multiple instances of a form, you should take a look at formsets. They’re designed to be dynamically modified by JavaScript in the browser.
(Just making raw copies of a form on a page does not work.)

When a template includes (or extends) another template, it’s one web page that is created. Any POST actions by that page will go to whatever the target URL is for that page.

1 Like
3

Actually, for accuracy, I should clarify that last point. POST actions will go to the closest enclosing <form>. You could use include to include multiple <form> elements on a page, each directing the submission to a different view.
But I guess my point would be that using extend or include in your template (being rendered on the server), has no behavioral effect on the browser. The two events (“page being rendered by the server”, and “page being seen and acted upon in the browser”) are separated both by time and space.

1 Like
4

So, to go into more detail: The thing I’m working on is a portion of a form that only shows up if you select a particular option in a dropdown. Let’s say for example, the parent is a form signing you up for some service and there is a dropdown that asks whether you would like to add other people to your account. When you select Yes from the dropdown, form fields pop up (this is the child template I’m working on) for you to add a single person’s information but then there is an Add + button to add another person, and so on. This “Add Person” portion of the form, of which there are potentially multiple instances, has a couple of radio options and if you select one it will automatically fill in the fields but if you select the other it will clear the fields and make them editable again. This is why I need JavaScript for the child template, but everything breaks when I throw the simplest script tag in my child template. Should I use a formset for the child then?

Thanks so much for your time. Apologies, I’m super new with Django!

5

First, no apologies are ever necessary here - we were all new at one time!

Without seeing your code, I would only be able to make some guesses - but there are a couple things I’d be concerned about.

  • I’d want to make sure that there’s only one instance of my JavaScript being sent to the browser.
    • That probably means that I’d want to include it in the parent portion of the template and not the child portion.
  • I’d want my JavaScript to handle events “generically”, and not register a handler for every individual field / row. That means the handler needs to identify what field or widget was selected, and performs the proper action accordingly.
    • How that’s done may depend upon what JavaScript framework you are using.
  • A formset object has an “empty_form” attribute that you can use as a template in your page.
    • We use this by rendering an empty form in a hidden div, then copying it to the visible portion of the page when it’s needed.
    • We also have created views that can retrieve either an empty form or a populated instance depending upon the requirements of the client.

But yes, the bottom line is that in my opinion, you’re probably going to be well-served using a formset for this.

1 Like