Ajax změna a nemožné odeslání formuláře

argosovo

Ahoj,
po dlouhých pokusech jsem vytvořil formulář který načítá data z databáze podle toho co byko vybráno v předchozím selectu – problém je, že formulář lze odeslat pouze když nechám stránku načtenou jak je – pokud vyberu v prvním selectu (dojde k překreslení druhého selectu) dojde asi ke změně formuláře, který po kliknutí pouze přenačte stránku, ale už se neaktivuje metoda na zpracování formuláře. Nemá někdo rychlý tip, v čem je problém? Pokud by pomohl kód – tak je následující:

<?php
class HledaniMain extends \Nette\Application\UI\Control
{

    private $select,$form;
    private $inzeratyModel, $ciselnikyModel;
    private $template;

    public function __construct(\Model\AdminModule\Ciselniky $ciselniky, \Model\FrontModule\Inzeraty $inzeraty)
    {
        $this->ciselnikyModel=$ciselniky;
        $this->inzeratyModel=$inzeraty;


        parent::__construct();
    }
    public function render()
    {
        $this->template = $this->createTemplate();
        $this->template->setFile(__DIR__ . '/templates/hledaniMain.latte');
        $this->template->registerFilter(new \Nette\Latte\Engine());
        $this->template->selectPocet=count($this->inzeratyModel->getCount()->fetchAll());

         $this->template->render();

    }

    protected function createComponentHledaniMain($name){
        $this->form = new \Nette\Application\UI\Form;
        $this->form->addSelect('kind', 'Druh', $this->ciselnikyModel->getSelect(20))->setDefaultValue(1300);
        $this->form->addSelect('mark', 'Značka', $this->ciselnikyModel->getSelectByKind([$this->form['kind']->value],24,"Značka"));
	$this->form->addSelect('model', 'Model', array(0=>"--Model--"));
	$this->form->addSubmit('send', 'Odeslat')->onClick[] = callback($this, "formSucceeded");
	return $this->form;
    }
    public function formSucceeded(\Nette\Forms\Controls\SubmitButton $button) {
            $values=$button->getForm()->getValues();
            $this->presenter->flashMessage('Vybráno '.$values->kind);
            $this->presenter->flashMessage('Vybráno '.$values->mark);
            $this->presenter->flashMessage('Vybráno '.$values->model);

            $this->presenter->redirect('this');
    }
    public function handleInvalidateMark($value) {
                $this['hledaniMain']['mark']->setItems($this->ciselnikyModel->getSelectByKind($value,24,'Značka'));
                $this['hledaniMain']['model']->setItems(array());
                $this->redrawControl('mark');
    }
    public function handleInvalidateModel($mark) {
                $this['hledaniMain']['model']->setItems($this->ciselnikyModel->getSelectByKind($mark,29,"Model"));
		$this->redrawControl('model');
    }

}
?>

Etch

A šablona vypadá jak?

argosovo

zvláštní je – že pokud formulář odešlu a mám vybrané všechny tři selecty, po načtení stránky se první dva selecty doplní dle předchozího načtení (poslední „model“ se vynuluje), pokud nic neměním a ihned odešlu (tedy neaktivuji snippety a ajax) – tak hodnoty prvních dvou selectů se poté přenesou až do úspěšného vykonání formuláře.
Kód šablony – zatím nijak složitý:

{form hledaniMain}
                    {input kind}
                    {snippet mark}
                        {var $_form = $form = $presenter['hledaniMain']}
                        {input hledaniMain-mark}
                    {/snippet}
                    {snippet model}
			{var $_form = $form = $presenter['hledaniMain']}
                        {input hledaniMain-model}
                    {/snippet}
                    {snippet pocet}
                        {$selectPocet}
                    {/snippet}
                    {input send}

{/form}

Etch

Pročti si tohle a pak následně tohle.

První je návod, jak udělat dependent form select a druhé je téma na fóru, kterou danou věc ještě rozšiřuje.

koty0f

Zdravím. Mám stejný problém. Mám formulář s dependent selectboxem. Vše funguje ok dokud nepřepnu select, který invaliduje další (závislý) select. Jsem poměrně začátečník, takže se v tom všem neorientuju. Výsledek je takový, že když formulář odešlu se změněným dependent selectem, tak se mi neprovede onSubmit metoda. Validátor na straně serveru hlásí špatně zadaný select.

Dočetl jsem se, že to řeší nette.load() či to zabalit celé jako extension. Prosím o radu.

Nebijte mě prosím za formulář:) Vím, že by to bylo třeba předělat, ale používám jednu skvělou šablonu shopify atd atd… Zkrátka tohle je nejméně práce:)

<?php
 /**
   *Loads values for second select Versions (AJAX)
   */
  public function handlePlatformChange($value)
  {
    if($this->isAjax())
    {
        //get avaliable versions for selected platform
        $versions = $this->files->getVersions($this->getParam("appid_prefix"), $value);
        $this["downloadForm"]["version"]->setItems($versions, TRUE);

        $this->template->files_info = $this->files->getFilesInfo($this->getParam("appid_prefix"), $value);

      //redraw select
      $this->redrawControl("versionSnippet");
      $this->redrawControl("files_infoSnippet");
    }
  }
?>

<tr>
      <td class="label"><label n:name=version>Version:</label></td>
      <td>
        {snippet versionSnippet}
          <select n:name=version></select>
        {/snippet}
      </td>
    </tr>
    <tr>
      <td colspan="2">
      <table n:snippet="files_infoSnippet">
      {foreach $files_info as $label => $array}
        <tr>
          <td class="label"><label>{$label}</label></td>
          <td class="files_info_data">
          {foreach $array as $file_id => $content}
            <div class="{$file_id}"
              {if $_form->components["version"]->value == $file_id}
                style="display: block;"
              {else}
                style="display: none;"
              {/if}>
              <?php echo $content; ?>
            </div>
          {/foreach}
        </td>
        <tr>
      {/foreach}
      </table>
      </td>
      </tr>

<script>
$input = "platform";
$link = platformChange;

 $('#{$control["downloadForm"][$input]->htmlId}').on('change', function() {
      $.nette.ajax({
        type: 'POST',
        url: '{link {$link}!}',
        data: {
            'value': $(this).val(),
        }, function (payload) {
              $.nette.success(payload);
              Nette.load();
          }
      });
    });
    $.nette.ext('versionSnippet', {
      load: function () {
        $( "#frm-downloadForm-version" ).on("change", function() {
          console.log(toggleFilesInfo(this));
        });
      }
    });
</script>