Jinja2 template html form - update select

Question

I have written an app that adds a list of events to a Google Calendar. I'm using Jinja2 as my templating framework. I have got a select box in the template that let's the users select which one of their calendars they want to upload the appointments to, it looks something like this:

<form method="post" action="/succes">
<select name="calendarsummary">
{% for calendar_list_entry in calendar_list['items'] %}
    <option value={{ calendar_list_entry['id'] }}>{{ calendar_list_entry['summary'] }    
</option>
{% endfor %}
</select>

So on initial load it's displaying all the users calendars. However, I'm providing the option of creating a new calendar on the fly as well. Since the page the form is on, is dealing with uploaded data, I can't simply reload the entire page to refresh the <select>.

Is it possible upon creation of the extra calendar via a <input type="text"> and a submit-button to refresh the select on the fly? If so, where do I need to look for a solution?

Right now I've got a handler that's listening in on the action="/succes" part. However, upon a post that makes a new page showing the result of the action, namely the uploaded appointments. How do I implement another post that will not trigger the succeshandler?

Answer 1

If I have understood correctly, when you create the new calendar, you will do a POST to save it and the do a GET request to the same page so for the jinja template to reload with the new data.

Answer 2

You can add more buttons to a form. So you can add an input (calander name) and a submit button (add new calandar), which posts / adds the new calendar an shows the updated page.

In your /succes post handler you can find out which button submitted the page.

You can also use jquery to update the page dom and to add the calendar.