8000 Reordering in Collections FormType while using AJAX for saving · Issue #15526 · symfony/symfony · GitHub
[go: up one dir, main page]

Skip to content
8000

Reordering in Collections FormType while using AJAX for saving #15526

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
markussc opened this issue Aug 12, 2015 · 5 comments
Closed

Reordering in Collections FormType while using AJAX for saving #15526

markussc opened this issue Aug 12, 2015 · 5 comments

Comments

@markussc
Copy link

My problem might be related to #4492, however now appeared in Symfony v2.7.3:
Reordering of form collections using AJAX submits does not work correcly.

I have an entity "Meeting", which consists of a collection of "Topics". When reordering the topics, the integer field "position" is re-assigned using javascript based on the current ordering.

When starting, the collection of topics is as follows:

topic[0] : topic ZERO, position 0
topic[1] : topic ONE, position 1

Now I switch the order (using jQuery), it looks as follows:
topic[1] : topic ONE, position 0
topic[0] : topic ZERO, position 1

Now I save this state to the database using AJAX, meaning that in the browser (DOM) nothing changes.

Now I switch the order again, it looks exactly as in the beginning:
topic[0] : topic ZERO, position 0
topic[1] : topic ONE, position 1

Now I save again using AJAX (no visible change in the browser).

When I reload the page, however, something strange appears:
topic[1] : topic ZERO, position 0
topic[0] : topic ONE, position 1

-> The order of topics is not switched but only their content reassigned to the new position, which leads to the situation that the topic's content is changed which should definitely not happen.
-> If I reload after the first saving (meaning standard POST submit with page reload instead of AJAX), everything is fine in the end.

What's wrong here?
Thanks a lot!

@markussc markussc changed the title Reordering in Collections FormType Reordering in Collections FormType while using AJAX for saving Aug 12, 2015
@dmaicher
Copy link
Contributor

How exactly does the HTML of the items look like before and after changing it via jquery?

@markussc
Copy link
Author

Here is an example of the situation. For simplicity, it is the list of users participating in a meeting:
First entry, saved and page reloaded:
<select id="appbundle_meeting_meetingUser_0_user" name="appbundle_meeting[meetingUser][0][user]" class="select2 form-control">
Database entries:

  • meetingUser: id=1; position=1; user=1

Second entry after adding via JQuery:
<select id="appbundle_meeting_meetingUser_1_user" name="appbundle_meeting[meetingUser][1][user]" class="select2 form-control">
Database entries:

  • meetingUser: id=1;position=1; user=1
  • meetingUser: id=2;position=2; user=2

after switching using JQuery, only order in html has changed, but not the IDs:
<select id="appbundle_meeting_meetingUser_1_user" name="appbundle_meeting[meetingUser][1][user]">
<select id="appbundle_meeting_meetingUser_0_user" name="appbundle_meeting[meetingUser][0][user]">

After AJAX-saving, nothing changes in the GUI, but only in the database:
Database entries:

  • meetingUser: id=1;position=2; user=1
  • meetingUser: id=2;position=1; user=2

When switching again (without reloading the page), only order in HTML changes:
<select id="appbundle_meeting_meetingUser_0_user" name="appbundle_meeting[meetingUser][0][user]">
<select id="appbundle_meeting_meetingUser_1_user" name="appbundle_meeting[meetingUser][1][user]">
Database entries:

  • meetingUser: id=1;position=2; user=2
  • meetingUser: id=2;position=1; user=1

After reloading the page:
<select id="appbundle_meeting_meetingUser_0_user" name="appbundle_meeting[meetingUser][0][user]">
<select id="appbundle_meeting_meetingUser_1_user" name="appbundle_meeting[meetingUser][1][user]">

I made a little experiment: after switching with jquery and saving via AJAX, I manually switched the IDs and names of the items as well (in firefox's "Q-mode"). This resolved the problem.

--> to me it seams that the problem lies in the fact that after first switching and AJAX-saving the IDs of the elements in the GUI do not correspond anymore to the IDs they would get if the form would be built by symfony's form builder.

@etiennerunge
Copy link

Same issue for me.
I have one collection which is ordered with a "position" field.
Ex : before sending form

ID: 123   Name: 123 position: 0 

I add a new item with ajax call. it return a new id (124). And add new item correctly in the "DOM collection".
I edit the name for exemple (124), and submit the form.
but after the doctrine flush action, data looks like this :

ID: 123   Name: 124 position: 1 
ID: 124   Name: 123 position: 0

@etiennerunge
Copy link

I found a little workaround.
When ajax call, I give a higher position in the new entity. So when I load the entities during updateAction() from database, the new entities created with an ajax call are in last position ( I load form database with $em->getRepository('[...]')->findBy(array(), array('position' => 'ASC') );
It will work temporarily.

I work with Symfony 2.7.4 & Doctrine
Edit: I upgraded SF to 2.7.6 but without testing changes.

@xabbuh
Copy link
Member
xabbuh commented Sep 23, 2018

closing as a duplicate of #4492

@xabbuh xabbuh closed this as completed Sep 23, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants
0