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'));
}