Question

When I drag an item to a list the following jQuery is executed except for the submit.

jQuery:

...
$( "#group ul" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function( event, ui ) {
        // ****** THIS WORKS
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        // ****** THIS IS NOT EXECUTING
        $(this).parents('form: first').submit();
        return false;
    }
...

There is a form for each group. The first form id is 0, the second form id is 1, and so forth (source view):

<div id="team">
   <form accept-charset="UTF-8" action="/items/create_from_drop" data-remote="true" html="{:id=&gt;0}" method="post">
      ...
      <input id="group_id" name="group_id" type="hidden" value="3" />
      <ul>
          ... item list
      </ul>
   </form>

   <form accept-charset="UTF-8" action="/items/create_from_drop" data-remote="true" html="{:id=&gt;1}" method="post">
      ...
      <input id="group_id" name="group_id" type="hidden" value="5" />
      <ul>
          ... item list
      </ul>
   </form>
</div>

There are two problems:

1. First, when the drop occurs i was hoping that i could trigger submission of the form with the same event. That isn’t happening.
2. I have submit ‘form:first’. How do i change the selector to submit the form based on id?

Thanks for your help.

Answer 1

Try to use the closest() instead of parents, this should get you only one element. Besides that, check if you have any onSubmit event on the forms, and if the problem is not with this handlers.

just realized something….

at $( “#group ul” ).droppable…

where’s the element with the id group?