JS / Ajax sortable

Using csDoctrineActAsSortablePlugin
https://github.com/bshaffer/csDoctrineActAsSortablePlugin

schema.yml

UllShopProduct:
  ...
  actAs: 
    ...    
    Sortable:
      uniqueBy: [ull_shop_category_id]
  columns:
    ...
    ull_shop_category_id:
      type: integer
  relations:
    ...
    UllShopCategory:

Build model and add a migration which's adds a "position" column (integer, length=8)

HTML Markup

  <div class="ull_shop_product_list_by_category">

    <table>
      <tbody>
        <tr class="ull_shop_product" id="ull_shop_product_3">
          <td class="ull_shop_product_list_by_category_quantity">
            <select>
              <option value="0" selected="selected">0</option>
              <option value="5">5</option>
            </select>
          </td>
        </tr>
      </tbody>

      <tbody>
        ...
      </tbody>

      ...

     </table>
   </div>

 

JS

      /*
       * Products sortable
       */
      $(".ull_shop_product_list_by_category tr").css("cursor", "pointer");

      // Those children are "tbody" elements
      $(".ull_shop_product_list_by_category table").each(function() {
        // .sortable is JQuery UI function
        $(this).sortable({
          axis: "y",
          stop: function(event, ui) {
            var id = ui.item.find("tr.ull_shop_product").attr("id");
            id = id.replace("ull_shop_product_", "");
            var position = ui.item.index() +1;
           
            $.ajax({
              type: "get",
              url: "<?php echo url_for('ullShopProduct/sortAjax') ?>?id=" + id + "&position=" + position,
            });
          },
        });
      });

 

Update Action

Drag'n'Drop to reorder the items. The following ajax call occurs:

/ullShopProduct/sortAjax?id=10&position=1

  • id = the ullShopProduct id = primary key
  • position = the new position counting from 1

Action code:

  function executeSortAjax(sfRequest $request)
  {
    $product = Doctrine::getTable('UllShopProduct')
      ->find($request->getParameter('id'));

    //Note: this is provided by a doctrine behavior of csDoctrineActAsSortablePlugin
    $product->moveToPosition((int) $request->getParameter('position'));
   
    return $this->renderText('ok');
  } 


 

Nested Sortable

http://johnny.github.io/jquery-sortable/#home

http://mjsarfatti.com/sandbox/nestedSortable/


...