Replicator – přidání nové sady ve snippetu

revoke

Zdravím a žádám o radu.

Požadovaná funkcionalita: Mám Niftygrid, v něm odkazy na objednání jednotlivých položek. Po kliknutí na tlačítko se otevře fancybox v němž se vykreslí formulář pro zadání více položek. Po kliknutí na „plus“ chci přidat další řádek (funkcionalitou Replicator), tzn. nechť zůstanou vyplněné údaje, nechť se přidá nový řádek a nechť se překreslí obsah formuláře (ve Fancyboxu).

Problém: Když přidání nového řádku dělám bez Ajaxu, nový řádek se přidá a zůstanou i hodnoty zadané v jiných polích. Při odeslání Ajaxem přidání nového řádku nedocílím a nevrátí se mi do formuláře ani zadaná data.

šablona

{snippet orderForm}
  <div id="order-box">
    {form orderBoxForm}
    <table class="inform">
      {foreach $form['vyrobky']->containers as $id => $vyrobek}
          {first}<tr><td>{label vyrobky-$id-sarze/}</td><td>{label vyrobky-$id-pocet/}</td><td></td></tr>{/first}
          <tr><td>{input vyrobky-$id-sarze}</td><td>{input vyrobky-$id-pocet}</td><td>•{input vyrobky-$id-remove}</td></tr>
      {/foreach}
    </table>
    {input id}
    {input vyrobky-add}{input save}
    {/form}
  </div>
{/snippet}

presenter

public function createComponentOrderBoxForm()
{
  $form = new Form();

  $form->addHidden('id')->setDefaultValue($this->id);

  $group = $form->addGroup('Výrobky');
  $vyrobky = $form->addDynamic('vyrobky', function (\Nette\Forms\Container $vyrobek) use ($form, $group) {

    $form->setCurrentGroup($group);

    $vyrobek->addText('sarze', 'Šarže:', 15);

    $vyrobek->addText('pocet', 'Nabízený počet:', 5);

    $form->setCurrentGroup(NULL);

    $vyrobek->addSubmit('remove', '')
            ->setValidationScope(false)
            ->addRemoveOnClick();
  }, 1);

  $form->setCurrentGroup(NULL);

  $vyrobky->addSubmit('add', '')
          ->setAttribute('class', 'tlacitko-plus')
          ->setValidationScope(false)
          ->addCreateOnClick(true);

  $form->addSubmit('save', 'Uložit')
       ->setAttribute('class', 'button-save');

  $form->onSuccess[] = $this->uloz;

  return $form;
}


public function uloz(Form $form)
{
  if(!$form['save']->isSubmittedBy()) {
	$this->payload->action = 'Replicator';
      $this->invalidateControl('orderBoxForm');
      return;
  }

  $this->payload->action = 'Save';
  $this->invalidateControl('orderBoxForm');
}

javascript

$("a.sAjax").bind("click", function (event) {
    event.preventDefault();
    if ($.active) return;

    $.get($(this).attr('href'), function (payload) {
        $.Nette.success(payload);
        $('#order-box').hide();
        $.fancybox($('#order-box').html()/*, ... */);
    });
});


$(document.body).on("click", ".tlacitko-plus", function (event) {
    event.preventDefault();
    if ($.active) return;

    $.post($(this).closest('form').attr('action'), $(this).closest('form').serialize()+'&vyrobky%5Badd%5D', function (payload) {
        $('#order-box').hide();
        $.fancybox($('#order-box').html()/*, ... */);
    });
});


$(document.body).on("click", ".button-save", function (event) {
    event.preventDefault();
    if ($.active) return;

    $.post($(this).closest('form').attr('action'), $(this).closest('form').serialize()+'&save=Ulo%C5%BEit', function (payload) {
        $('#order-box').hide();
        $.fancybox($('#order-box').html()/*, ... */);
    });
});

Zkoušel jsem mnohé, aktuálně posílám poslední verzi, už si ale nevím rady (možná hraje roli pátek 13.). Děkuji za nakopnutí.

revoke

Tak jsem na to přišel a pokud byste někdo potřeboval, zde je řešení:

opravit šablonu

<div id="order-box">
  {snippet orderForm}

opravit javascript

    $(document.body).on("click", ".tlacitko-plus, .tlacitko-krizek, .button-save", function (event) {
        event.preventDefault();
        if ($.active) return;

        $.post($(this).closest('form').attr('action'), serialize_form(event), function (payload) {
            $.Nette.success(payload);
            // otevrit fancybox
            $.Nette.spinner.hide();
        });
    });

function serialize_form(event)
{
  var button = $(event.target);
  return button.parents('form').serialize()
        + '&'
        + encodeURI(button.attr('name'))
        + '='
        + encodeURI(button.attr('value'));
}