When multiple forms are served by ESI, duplicate submit IDs break Ajax form processing [#2015031]

Hi
Since esi process rendering separately <input tag id is duplicating. Since id ='edit-submit' ajax.js is failed to add 'ajax-processed'
Ex:
<input type="submit" class="form-submit ajax-processed" value="Vote" name="op" id="edit-submit">

Steps to replicate:
Step1: Add two form(either custom or contribute(Advance polls)) but both should in ajax widget(submission through ajax).
Step 2: Add both form through view_block or panel-pane and mark it as esi.
Step 3: Set varnish and refresh the page
Step 4:Click the submit button of first ajax form and it will run perfectly
Step 5: Click second ajax form submit button. Expected output is form submit through ajax.js. But actual output is page-submit take place, because of not appending class called 'ajax-processed' in
<input type="submit" class="form-submit" value="Vote" name="op" id="edit-submit">

This is because esi rendering. Each time button html rendering like
<input type="submit" class="form-submit" value="Vote" name="op" id="edit-submit">

In my example both esi form input is like this only(<input type="submit" class="form-submit" value="Vote" name="op" id="edit-submit">)

But if we remove esi and run normally then

First form input html
<input type="submit" class="form-submit" value="Vote" name="op" id="edit-submit">

Second form input html
<input type="submit" class="form-submit" value="Vote" name="op" id="edit-submit--1">

Now id="edit-submit" and id="edit-submit--1" are differ and 'ajax-processed' added to each input tag.

Without esi:
First form input html
<input type="submit" class="form-submit ajax-processed" value="Vote" name="op" id="edit-submit">

Second form input html
<input type="submit" class="form-submit ajax-processed" value="Vote" name="op" id="edit-submit--1">

With esi:
First form input html
<input type="submit" class="form-submit ajax-processed" value="Vote" name="op" id="edit-submit">

Second form input html
<input type="submit" class="form-submit" value="Vote" name="op" id="edit-submit">

Comments

Comment #0.0

tssarun CreditAttribution: tssarun commented 8 June 2013 at 01:28

Issue summary:

View changes

Comment #0.1

tssarun CreditAttribution: tssarun commented 8 June 2013 at 01:30

Issue summary:

View changes

Comment #1

tssarun CreditAttribution: tssarun commented 15 June 2013 at 11:11

Hi,

Any update on this?

Comment #2

manarth CreditAttribution: manarth commented 3 August 2013 at 16:33

Title:	ajax-processed is not working esi	» When multiple forms are served by ESI, duplicate submit IDs break Ajax form processing
Category:	bug	» support
Status:	Active	» Fixed

The issue you describe is because the forms depend on global state - i.e. the submit button is named with the knowledge of other forms on the page. Content served by ESI does not have knowledge of global state, because it's served in its own process. If a section does need global state information, this needs to be provided in the ESI handler - for example, we do this through the URL to pass theme information.

I can't think of a simple approach to fixing this at a global level, because ESI would end up having to track such a massive amount of state information that it would lose the performance benefits that makes it useful.

In this instance, I'd suggest implementing a form-alter, and hard-coding the ID of the submit handler on the second form.

Comment #3

tssarun CreditAttribution: tssarun commented 4 August 2013 at 09:37

Hi Manarth,

Thankx for your reply. YES through hook-form-alter we can modify form-submit-id. What i done is, through form-alter i append node-id(nid) with $form['submit'].

My code like this:

$form['custom-submit-{nid}'] = $form['submit']; // {nid} where nid of advance poll
unset($form['submit']);
And its executes fine.

Regards
tssarun.