Editace položky přes formulář v modálním okně + ajax

Ahoj, klasicky v renderDefault():

public function renderDefault()
	{
		$this->template->items = $this->em->getRepository($this->getEntityClassName())->findBy($this->findBy, $this->orderBy);

		if ($this->isAjax()) {
			$this->redrawControl("list");
		}
	}

{snippet list}
	{foreach $items as $item}
		...
	{/foreach}
{/snippet}

@Lexi Prosim o pomoc, stale se mi nedari tvuj priklad rozchodit.

Mam li v modalnim okne formular, musim tento po odeslani presmerovat na Default stranku presenteru, abych mohl prekreslit snippet, kvuli kteremu jsem modalni okno volal, k tomu je zrejme v js

$.nette.ajax(payload.redirect);

jenze to mi nikdy neprojde ajaxove, at uz nastavim formulari

public function _submit($form) {
	$form->presenter->flashMessage("Vaše data byla úspěšně uložena", "success");
	$form->presenter->redirect("default");
};

nebo

public function _submit($form) {
	$form->presenter->flashMessage("Vaše data byla úspěšně uložena", "success");
	$form->presenter->payload->redirect = $form->presenter->link('Homepage:default');
};

funguje to jen pokud pridam extension history.ajax

A take pokud formular validuje hodnoty a nektera z nich validaci neprojde,

$form->onValidate[] = [$this, 'validateValues'];

prekresli se formular v modalnim okne a zobrazi se chybove hlaseni, coz je spravne, ale zavola se take znovu

$('.modal-ajax').modal('show');

ktery zrejme posle druhy fade efekt, diky cemuz, uz nejde se strankou pracovat.

na formulari mam standartne pridanou tridu ajax

protected function createComponentManageForm() {
	$form = new \Nette\Application\UI\Form;
    $form->getElementPrototype()->class[] = 'ajax';
	$form->addSubmit('submit', 'Submit')
                ->setAttribute('class', 'ajax');
	$form->onValidate[] = [$this, 'validateValues'];
	$form->onSuccess[] = [$this, '_submit'];
	return $form;
}

Dokazes prosim rict, kde by mohla byt chyba? Pouzivam nette.ajax.js z gitu.

@Lexi takze ten problem s prekreslovanim modalu po neuspesne validaci formulare jsem vyresil.
vyhodil jsem ze sablony vsechny casti kodu, ktere includujes {include #modal} a nahradil je jedinym snippetem (komponentou modal), ktery invaliduji. (ty include vkladaly za sebe porad dalsi formulare)

a js script jsem upravil tak, aby nejdrive vycistil vsechny zbytky modal okna a pak ho ciste otevrel

$.nette.ext("modals", {
    success: function (payload) {
        if (payload.redirect) {
            $(".modal-ajax").modal("hide");
        } else if (payload.isModal) {
            $("body.modal-open").removeAttr("style");
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
            $('.modal-ajax').modal('show');
        }
    }
});

@walda jak to myslíš? 2 formuláře najednou v jednom otevřeném modalu? Zatím jsem takovou situaci neměl, ale řešil bych to například tabama přímo v tom modalovém okně (v šabloně v {block modal}). Případně zkus blíže popsat co potřebuješ vyřešit a najdeme optimální řešení.

Jakého charakteru jsou ty formuláře? Napadají mě 3 řešení, podle toho jakou spojitost spolu ty formuláře mají:

1. Rozdělit do 2 šablon
2. Mít to v jednom modalu a rozdělit např. pomocí tabů
3. Jedna šablona, vytvořit si pomocný parametr a v {block modal} vypisovat najednou vždy pouze jeden formulář {if $modal === 1}{elseIf $modal == 2}{/if} a pak odkazovat <a n:href="something, modal=>2">

@JanMikeš Ahoj, používám tvoje řešení a je fakt super. Akorát jsem narazil na problém, se kterým si nevím rady. V modalu mám formulář se selectem a chtěl bych v závislosti na zvolené položce selectu překreslit snippet itemDetail. Nejlépe co se mi podařilo, tak se modal zavřel a otevřel s detailem, ale zůstalo ztmavení pozadí z předchozího. Ideálně bych potřeboval aby se překresil pouze detail a modal zůstal otevřen. Lze to vůbec?

{block content}
	<div id="banner">
		<h1 n:block=title>{_ ui.registrationAddOptItems.title}</h1>
	</div>
	{block modal}
		<div class="row">
			<div class="col-sm-6">
				<form n:name=addOptItemForm class="form-horizontal">
					{input regId}
					<div class="form-group">
						<div class="col-sm-3 control-label">{label item /}</div>
						<div class="col-sm-9">{input item}</div>
					</div>
					<div class="form-group">
						<div class="col-sm-3 control-label">{label count /}</div>
						<div class="col-sm-9">{input count}</div>
					</div>
					<div class="form-group">
					</div>
					{input send}
				</form>
			</div>
			<div class="col-sm-6">
				{snippet itemBox}
					{ifset $itemDetail}
						<div class="row">
							<div class="col-sm-6">
								<h6><b>Název: </b>{$itemDetail->name}</h6>
								<h6><b>price: </b>{$itemDetail->price}</h6>
								<h6><b>pricee: </b>{$itemDetail->eprice}</h6>
							</div>
							<div class="col-sm-3">
								<img src="/upload/optItems/{$itemDetail->picture->name}" class="img-responsive">
							</div>
						</div>
					{/ifset}
				{/snippet}</div>
		</div>
		<script>
			$('select[name=item]').change(function () {
				$.nette.ajax({
					url: {link getDetail!},
					data: {
						'value': $('select[name=item]').val(),
					}
				});
			});
		</script>
	{/block}
{/block}

	public function handleGetDetail($value) {
		$itemDetail = $this->optItemFacade->getOptItem($value);
		$this->template->itemDetail = $itemDetail;
		if ($this->isAjax()) {
			$this->redrawControl('itemBox');
		}
	}

Po hodině experimentování jsem došel k tomuto kódu, který je plně funkční:

<script>
	$.nette.ext("modals", {
		before: function() {
			this.wasModalOpenedBeforeAjaxRequest = this.isModalOpened();
		},
        success: function(payload) {
            if (payload.isModal) {
            	if (!this.wasModalOpenedBeforeAjaxRequest) {
					$('.modal-ajax').modal('show');
				} else {
					$('.modal-ajax').addClass('in').css({'display': 'block'}).modal('show');
					$('.modal-backdrop').removeClass('fade');
					$('.modal-backdrop:not(:last)').remove();
					window.setTimeout(function() {
						$('.modal-backdrop').addClass('fade');
					}, 200);
				}
            } else {
                $('.modal-ajax').modal('hide');
            }
        }
    }, {
    	wasModalOpenedBeforeAjaxRequest: false,
    	isModalOpened: function() {
    		return ($('.modal.fade.in').length > 0);
		}
	});
</script>

Nahrál jsem i video, jak to v praxi funguje. Pro vysvětlení, kliknutí na křížek je další ajax request <a n:href="default" class="ajax">. Na videu jsou 2 situace – 1) otevřu modal a zavřu 2) otevřu modal a otevřu další modal kliknutím na link <a n:href="this" class="ajax">.

Javascript kód je trošku krkolomný kvůli tomu, že blikal backdrop, pak blikal modal, poté se nedařilo modal zavřít atd :-)).

Video s ukázkou v praxi

Editoval Jan Mikeš (5. 5. 2017 12:53)

Na progress používám plugin nprogress, extension do nette pak vypadá takto:

<script>
	$.nette.ext('nprogress',  {
        start: function() {
            window.NProgress.start();
        },
        complete: function() {
            window.NProgress.done();
        }
    });
</script>

Poté jsem si jen upravil css, o které se samozřejmě rád podělím:

<style>
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 99999;
  top: 50%;
  right: 50%;
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .5);
  margin-left: -30px;
  margin-top: -30px;
}

#nprogress .spinner-icon {
  width: 20px;
  height: 20px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #fff;
  border-left-color: #fff;
  border-radius: 50%;
  display: inline-block;
  margin: 20px;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

.no-spinner #nprogress .spinner {
  display: none;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

Co se týká pouze zavření modalu, to si řídíš v PHP, stačí nastavit $this->payload->isModal = FALSE; v presenteru a modal se zavře.

@JanMikeš Možná bys mi mohl ještě poradit? mám dva formSucceeded a u jednoho se po dokončení modal zavře ale u druhého ne. Tvrdí to že isModal je TRUE, ale přitom je tam nastaveno na false. Díky za rady

ten je ok

	public function identifyGuestsAdminFormSucceeded(Form $form, $values)
	{
		$this->checkFacade->identifyGuestAdmin($values, $this->guestId);
		$this->flashMessage('Guest identifikovan', 'success');
		$this->redrawControl('flashes');
		$this->redrawControl('modal');
		$this->checks = $this->checkFacade->getChecksByRegistrationIdQuery($this->regId);
		$this['basicDataGridChecks']->reload();
		$this->payload->isModal = FALSE;
	}

tenhle zůstane otevřený

	public function addMemberAdminFormSucceeded(Form $form, $values)
	{
		$team = $this->teamFacade->getTeam($values->teamId);
		$this->personFacade->createPersonAdmin($team, $values);
		$this->flashMessage('Clen pridan', 'success');
		$this->redrawControl('flashes');
		$this->redrawControl('modal');
		$this->people = $this->personFacade->getPeopleByTeamIdQuery($values->teamId);
		$this['detailDataGrid']->reload();
		$this->payload->isModal = FALSE;
	}

Progress jsem už vyřešil…v podstatě krokuju stejně akorát po schválení mi to hodí before a pak místo toho aby se mi hodilo isModal jako false, tak se hodi ze je true, ale nikde to neni…a nejake rady na integraci x debugu a co xdebug s php stormem

@sibka ahoj, tuším, že problém bude s tím, že se ti neaplikují pravidla na nově přidaný element do DOM. Můžeš sem poslat ukázku javascriptu těch validačních pravidel? Já osobně používal live validation a přesně tento problém jsem vyřešil přes nette ajax extension:

<script>
$.nette.ext('initFormsValidation', {
		success: function(payload) {
			if (payload.snippets) {
				for (var snippetId in payload.snippets) {
					$("form", "#" + snippetId).each(function() {
						Nette.initForm(this);
					});
				}
			}
		}
	});
</script>

Mart78 napsal(a):

Můžete mě někdo nakopnout jakým způsobem získám ID při zpracování editačního formuláře? Tím že ho do modalu vykreslím přes ajax, tak nemám v URL ID položky, a tudíž pak při odeslání formuláře nemám možnost $this->getParemeter('id')

Dej ho tomu handlu jako parametr např.

<?php
	/**
     * @param $offset
     */
    public function handleLoadMoreNotifications($offset)
    {
        $this->offset = $offset;
        $this->redrawControl('notifContainer');
    }
?>

Ak sa nemýlim, tak payloady musíš odosielať

<?php
$this->presenter->sendPayload();
?>

a v tom prípade neviem či ti pôjde redrawControl(), pretože nebudeš posielať nový HTML kód ale iba nejaká data – payload, alebo json

Ahoj,

@JanMikeš povedlo se mi zprovoznit tvé řešení, funguje dobře. Je tu však jedna věc, na kterou nemohu přijít jak udělat. A sice potřeboval bych vyskočit modal i při načtení celé stránky, tedy ne pouze při ajaxovém požadavku.

Poradil bys prosím tě?

Díky moc