Inline forms TOTAL_FORMS count issues on page refresh

Using Django
1

Hey,

So using inline forms, I’ve noticed an issue.

Let’s I add/remove inlines. In my code I have 2 ways to do this using javascript - say something like:


function insert_inlinedets_form () {
    let form_idx = $('#id_details-TOTAL_FORMS').val();
    console.log("inserting new form " + form_idx);
    let newrow = $('<tr></tr>').appendTo($('#details_form'));
    newrow.append($('#empty_form_inlinedets').html().replace(/__prefix__/g, form_idx));
    $('#id_details-TOTAL_FORMS').val(parseInt(form_idx)+1);
    console.log("added row to inlinedets formset");
};

(so essentially using empty_forms that I have appended as hidden forms to my template and inserting them in a table row as my inlines are table rows).

That works well & the count is keep accurate. However, if I refresh the page (say F5), then the appended inlines are lost (since there’s a call to the server to get the inlines & populate the table, but the ones appended by the users using the buttons haven’t been saved to the server). However the total_form count remains at whatever it was.

Thus later if I try to save I get errors, because the total_form count doesn’t match the actual # of inlines.

Any smart way to manage this? Does django provides some sort of feature for these cases? Or any smart approach you guys out there have implemented?

My current line of thinking is to hook into the refresh/reload process using jquery, however by the looks of it it seems there are a few pitfalls with this & edges cases…

2

If I understand what you’re saying, let’s say that the page initially sends 3 forms. The person adds two more forms - TOTAL_FORMS is now 5. If nothing is ever sent to the server, and the page is refreshed, you should get the same original 3 forms and TOTAL_FORMS should be 3. You’re saying that after the refresh, TOTAL_FORMS is still 5?

That comment about "… total_form count remains … " doesn’t make sense to me. If you hit F5, that’s a page-refresh. The page is (should be) reloaded from the server. No post is performed, so no data from the browser should be sent to the server and whatever was previously in that page would be lost.
Unless your JavaScript is somehow handling F5 (something I’m not aware of being possible), I can’t see how this would be happening. (And I’ve never seen anything like this happen.)

3

This is exactly what I am saying.

After the page refresh, the TOTAL_FORMS count remains at 5. However the template being re-rendered shows only the forms that were on the server (e.g.3). Thus a discrepancy.

Okay, so I was thinking some sort of caching might be the initial issue, but you seem to be saying this isn’t the case, or at least that by default this isn’t what should happen.

So I guess I’ll have a deeper look at how I generate the template/manage those inlines, since perhaps it’s my treatment of those that introduced this un-orthodox behavior.

It does help to know that this isn’t the expected behavior, that being said.

4

Upon closer investigation:

The rendered response from the server upon a page reload shows the following relevent information - that is that in response.rendered_content, the details-TOTAL_FORMS value is INDEED 3 (or whatever the # of inlines the server had), as expected.

That means that for some reason, I have a caching issue on the browser (FF v92.0 on Manjaro Linux). That seems confirmed by the fact that a hard refresh (ctrl + shift + R) prevents the issue.

Also to note that Google Chrome does NOT reproduce the issue upon a simple refresh. So FF introduces a caching issue on this.

1 Like
5

(We’re quickly leaving the area where I have any direct knowledge - everything I’m tossing out here is all conjecture and guesswork.)

So you’re getting a response with a TOTAL_FORMS of 3 (using that number for discussion purposes only).

Is it the DOM that’s not being updated, or is this occurring only in the JavaScript layer?

What happens if you run those two lines from within the debug console? (Or is that how you’re seeing that it’s reporting “5”?)

Are you using a JavaScript framework that works with a virtual DOM? The bug could be in that framework on Firefox.

6

Hmmm -

  • I’m reading the TOTAL_FORMS value directly from the inspector in the console, reading the value="…" from the html input tag for the management form, NOT using javascript… However using the console to type those JS lines shows the same (erroneous) value.
  • I’m using simply jquery/plain javascript for client-side code, not any black magic framework.

The issue isn’t obseved on Chrome at all. I guess I’ll post on SO as well, maybe some browser geek will be able to shade some light on what may cause the issue.

1 Like