Překreslení snippetu z jiného požadavku (ve Firebugu snippet je, ale nepřekreslí se)

nettolog

Dobrý večer, chtěl bych vás poprosit o názor, radu nebo nakopnutí :-), jak nejlépe řešit mou situaci.
V jednom presenteru mám klasický formulář (není psaný v Nette\Forms), který má action sám na sebe. On to není úplně obyčejný formulář, ale taková utilita v JS, každopádně nechová se nijak extra výjimečně, jen se data z formuláře při odeslání odešlou v pozadí ajaxově na stránku v action, a stránka se neobnoví.

Jakmile tento presenter zjistí, že formulář odesílá nějaká data, tak je zpracuje a rád by uživateli vypsal nějaký výsledek. Takže jsem si asi naivně myslel, že bude fungovat:

if(isset($_POST['form-data'])){
//zpracovavam...
$this->template->vysledek = "hotovo";
$this->redrawControl('vysledek');
}

{* nejaky formular *}

{snippet vysledek}
{ifset $vysledek}{$vysledek}{/ifset}
{/snippet}

Ono to funguje tak napůl. Ve Firebugu vidím, že tam ten ajaxový požadavek proběhl, dokonce vidím i správnou odpověď, ale ve stránce se to nepřekreslí. Je možné, že se ten snippet snaží překreslit jen v rámci požadavku, který volal formulář? A je možné nějak ten požadavek směřovat na původní požadavek?

Klidně můžu rozdělit zpracování dat ve formuláři a formulář+snippet s výsledkem do samostatných presenterů, ale tím si asi nijak nepomůžu.

Nenapadá vás nějaký způsob, jak na to? Bohužel nemůžu použít standardní cestu Nette formuláře, který by měl třídu ajax, apod., jedná se konkrétně o http://www.dropzonejs.com/ .

Editoval nettolog (27. 8. 2015 0:01)

chemix

Ahoj

Postupoval bych tak, ze bych si zaregistroval event http://www.dropzonejs.com/#…
„success“ zjistil bych si co se mi posila za data, nejspise se dostanes k cele response a nasledne bych bud rucne: tj. Nahradil obsah elementu „#snippet-vysledek“ za to co mi prijde v JSON odpovedi, nebo pokud bych chtel byt „borec“, tak k tomu nejak vyuzit nette ajax a zavolat metodu s parametrem co se stara o prekreslovani snippetu

jinak mozna lepsi je pouzit handle
narazil jsem na https://github.com/…zoneUploader ale jeste nezkousel
plus nejake starsi vlakno : https://forum.nette.org/…load-manager

na NetteCamp si to chci vyzkouset, tak se pak rad podelim o zkusenosti

nettolog

Díky moc za rady, vyřešil jsem to jak jsi psal.

Na stránce, kde je formulář pro upload:

<script>
Dropzone.options.myAwesomeDropzone = {
  acceptedFiles: "image/*",
  init: function() {
    this.on("success", function(file, response) {
		console.log(response.result);
		});
  }
};
</script>

Zpracování formuláře (nakonec není problém řešit to v jiném presenteru, aby to bylo oddělené):

if(isset($_POST['form-data'])){
//zpracovavam...
$this->payload->result = "hotovo";
$this->sendPayload();
}

Jestli narazíš na nějaké zajímavosti nebo lepší řešení pro Nette, tak se budu určitě těšit, moc se mi ten DropZoneJs líbí. :)

Editoval nettolog (27. 8. 2015 16:33)

Phalanx

Taky teď řeším dropzone, vyřešil jsem zatím nahrazením snippetu ručně – Netuším jak do dropzone zaintegrovat $.nette.ajax

Přidávám kód, pokud by to někomu pomohlo

<?php
<div id="dZUpload" class="dropzone">
	<div class="dz-default dz-message" data-dz-message></div>
</div>

<script type="text/javascript">
	$(document).ready(function () {
		Dropzone.autoDiscover = false;
		$("#dZUpload").dropzone({
			url: {link uploadDocuments!},
			addRemoveLinks: false,
			success: function (file, response) {
				var imgName = response;
				file.previewElement.classList.add("dz-success");
				$("#snippet-carForm-fileList").html(response.snippets["snippet-carForm-fileList"]); // hack it!
			},
			error: function (file, response) {
				file.previewElement.classList.add("dz-error");
			}
		});
	});
</script>



public function handleUploadDocuments()
{
	// upload

	$this->template->documents = ...;
	$this->redrawControl('fileList');
}
?>

repli2dev

Integraci s $.nette.ajax lze provést následujícím kódem:

element.dropzone({
    {* Configuration *}
    init: function() {
        {* Remove file after the upload is completed *}
        this.on("successmultiple", function(files, payload) {
            if (payload.snippets) {
                $.nette.ext('snippets').updateSnippets(payload.snippets);
            }
    }
});

revoke

repli2dev napsal(a):

Integraci s $.nette.ajax lze provést následujícím kódem:
this.on("successmultiple", function(files, payload) {
         if (payload.snippets) {
             $.nette.ext('snippets').updateSnippets(payload.snippets);
         }
});

Pokud jsou však ve snippetu odkazy .ajax, přestane fungovat „ajaxizace“. Musel jsem to vyřešit takhle:

this.on('successmultiple', function(files, payload) {
				$.nette.ajax({link redraw!});
 });

přičemž handlerRedraw obsahuje jen příkaz pro překreslení snippetu. Existuje lepší / správnější řešení?

Editoval revoke (10. 6. 2016 22:00)

pehape

Implementace, kterou popsal repli2dev je funkční, jen je potřeba po update-u snippetů zavolat metodu $.nette.load().

this.on("successmultiple", function(files, payload) {
    if (payload.snippets) {
        $.nette.ext('snippets').updateSnippets(payload.snippets);
			$.nette.load();
    }
});

Editoval pehape (17. 8. 2016 12:20)