Nette.ajax – data-append – problém s identifikací nového obsahu

Kcko
Člen | 465
+
0
-

Ahoj,
mám výpis produktů, stránkování ajaxem ve smyslu načíst další (data-atribut na tlačítku), to je fajn, funguje.
Rád bych nějak označil (třídou) produkty, které se mi vrátí snippetem a apendnou se ke stávajícím. Snažím se napsat si vlastní extensi, jenže ta se provede později než interní metoda updateSnippets, takže když si sáhnu na snippet (u mě je to „product-list“) tak vlastně v DOMu už obsahuje všechny produkty a ne jen ty nové = vložené stránkováním, takže nevím jak snadno je rozeznat, lze to nějak? Napadají mě šílenosti (znám číslo stránky, vím na kolik stránkuji, tak si můžu produkty přes js funkci slice uříznout a dosadit to jen tem „novým“, ale to je ošklivé řešení).

Editoval Kcko (22. 10. 2018 13:59)

CZechBoY
Člen | 3608
+
0
-

Takže chceš aby všechny vrácený produkty měly třídu např. appended? Napadlo mě ještě trošku backendovější řešení a to, že bys za podmínky offset > 0 přidal všem produktům tu třídu.
Samozřejmě pokud tam máš ještě klasický stránkování tak by to chtělo trošku vyšperkovat…

Kcko
Člen | 465
+
0
-

CZechBoY napsal(a):

Takže chceš aby všechny vrácený produkty měly třídu např. appended? Napadlo mě ještě trošku backendovější řešení a to, že bys za podmínky offset > 0 přidal všem produktům tu třídu.
Samozřejmě pokud tam máš ještě klasický stránkování tak by to chtělo trošku vyšperkovat…

O to se pokouším, ale stejně mi to v šabloně označí všechny, protože ta šablona (latte) stejně iteruje nad všemi. Myslel jsem spíše, že to půjde nějakým fíglem skrz nette.ajax.js

Edit:
už jsem to vymyslel. Každému produktu přidávám přímo z presenteru do šablony data-atribut data-page-number=""

Když má číslo 1, tak nic a při každém ajaxu, znaám nejvyšší číslo paginatoru (aktuální strana) – to mám uloženo v dataatributu na hlavním snippetu a pak flashnu jen ty produkty, kde je tohle číslo.

Funkční :-)

Editoval Kcko (22. 10. 2018 16:33)

CZechBoY
Člen | 3608
+
0
-

Proč iteruješ nad všema když nakonec vrátíš jen např. 10? Nebo jsem nepochopil tvoji zprávu …

Kcko
Člen | 465
+
0
-

CZechBoY napsal(a):

Proč iteruješ nad všema když nakonec vrátíš jen např. 10? Nebo jsem nepochopil tvoji zprávu …

Blbě sem se vyjádřil, ale to „označení“ z PHP vrstvy nejde. Označí mi to všechny produkty, pokud tedy nědělám něco blbě

Pseudokód

<?php

if ($this->isAjax())
{
    if ($this->paginator->page >1)
      $this->template->flashProduct = TRUE;
   //prekresleni kontrolek
}

?>

v šabloně pak podmínka na přidání třídy (dostane ji naprosto každý produkt).

Jak říkám, vyřešil jsem to jinak, každý produkt v sobě nese data-atribut s číslem stránky paginátoru, tuto informaci nese i nějaký nadřazený snippet, který překresluji a pak JS extenze, která v before funkci, odstraní z celého snippetu produktů všechny .flash třídy a v success si zkontroluje které číslo stránkování je nejvyšší z data-atributu hlavního snippetu a všechny produkty, které tento data-atribut mají tuto .flash třídu dostanou.

CZechBoY
Člen | 3608
+
0
-

Já jsem právě myslel že každej produkt má mít tu třídu :-) Jaký produkty teda mají mít tu třídu když ne všechny nově přidaný?

Kcko
Člen | 465
+
0
-

CZechBoY napsal(a):

Já jsem právě myslel že každej produkt má mít tu třídu :-) Jaký produkty teda mají mít tu třídu když ne všechny nově přidaný?

Každý nově přidaný když klikneš na načíst další tj provede se ?page=$x

Ale přidá se mi to na všechno …, asi to nechme ne, nebo pokud máš chuť to řešit (protože si myslím, že bez JS se to stejně vyřešit nedá a onen způsob v aplikační vrstvě nepomůže, tak Ti můžu poslat URL projektu i kód), tady ten web prezentovat nemůžu, neběží ještě.

CZechBoY
Člen | 3608
+
0
-

Klidně pošli na mail :-)

Kcko
Člen | 465
+
0
-

CZechBoY napsal(a):

Klidně pošli na mail :-)

Telegram / Skype / ICQ? (Telegram rulz). Přes maila to bude to samý jako tady (myslim deelay) ;-)

CZechBoY
Člen | 3608
+
0
-

Pehápkáři slack? :-)

Kcko
Člen | 465
+
0
-

CZechBoY napsal(a):

Pehápkáři slack? :-)

No včera jsem se tam lognul a přišlo mi to aktivitou jak Gitter, a navíc mi to přišlo hodně nepřehledný, tak to asi necháme být, to už je lepší komunikovat na fóru.

Pavel Kravčík
Člen | 1180
+
0
-

Se poděl sem, vypadá to zajímavě. :)

Kcko
Člen | 465
+
0
-

Pavel Kravčík napsal(a):

Se poděl sem, vypadá to zajímavě. :)

Už jsem všechno podstatné napsal i kód, co dalšího Tě zajímá?

URL projektu sem dát nemůžu, zatím neběží a nemůžu sem dát ani URL vývojové verze (jen do PM), takže zbývá nějaký smysluplný chat (ideálně TELEGRAM, což mě překvapuje že nikdo nezná / nepoužívá, podporuje skupiny, synchronizace s telefonem = IHNED), případně skype nebo tak něco (SLACK či FB messenger niet).

  • tady je video http://bit.ly/2z0xSo9, které dělá to co jsem chtěl, ale nedosáhl jsem toho tak jak mi psal @CZechBoY , takže by mě zajímalo, zda se to dá vyřešit snadněji.

Editoval Kcko (24. 10. 2018 11:28)

Pavel Kravčík
Člen | 1180
+
0
-

No, kde je ten problém. My jedeme Slack btw. Mně zajímalo, jak to máš řešené, že Ti to nejde. Napadají mi dva způsoby a v obou mi to nepřijde těžké, stačí nějaký JS s timeoutem:

  1. Máš foreach v latte, kterému měníš limit – pak stačí do latte dát {$iterator->getCounter() > 30} a přidat třídu. V JS pak s timeoutem, které tu třídu odstraní.

2. Chytřejší donačítání

public function handleShowTerm($id)
    {
        $latte = $this->Latte->create();

        /**
         * nějaké rozšíření jako makra atd.
         */
        \Nette\Bridges\ApplicationLatte\UIMacros::install($latte->getCompiler());
        $latte->addProvider('uiControl', $this->LinkGenerator);
        $latte->addProvider('uiPresenter', $this->LinkGenerator);

        $list = [];

        $data = $latte->renderToString(__DIR__ . DIRECTORY_SEPARATOR . 'detail.latte',
        [
            'list' => $list
        ]);

        $this->getPresenter()->sendJson(['id' => $id, 'text' => $data]);
    }

A pak JS v hlavním latte:

$.nette.ajax({
  url: {link showTerm!, id => 'ID'}.replace('ID', id),
  success: function(data)
	{
		$('#testDetail' + data.id).empty();
		$('#testDetail' + data.id).append(data.text);
		$('#testDetail' + data.id).show();

		//custom animace
	}
});

Editoval Pavel Kravčík (24. 10. 2018 11:45)

Kcko
Člen | 465
+
0
-

@PavelKravčík No ted mi to jde :-), jen jsem nechápal co se mi snažil @CZechBoY naznačit, že to udělám jen na straně backendu (resp PHP), že si přidám tu třídu asi z Presenteru do šablony, protože to když udělám (viz někdě nahoře) tak po překreslení snippetu, tu třídu mají všechny produkty na stránce, ne jen ty nově appendnuté.

Napíšu to ještě jednou jak jsem to vyřešil.

V hlavním snippetu, ve kterém je výpis produktů, drží informaci o aktuálním čísle z paginatoru (při prvotním načtení má tedy 1), tu samou informaci v data atributu mají i produkty (opět tedy 1).

Kliknu na načíst další (hlavní snippet má tedy 2ku, nově přidané produkty mají 2ku, ty přednimi mají 1čku).

Pak jsem si dopsal do extenzi do nette-ajax.js od @VojtěchDobeš , která v before metodě ze všech produktů tu třídu odstraní, a pak si zjistí nejnovejší číslo paginatoru a k nim shodující se produkty se stejným číslem a ty oflashuje.

<?php
$.nette.ext('flashNewProducts', {


	before: function (xhr, settings) {
		if (!settings.nette)
            return;

        if (!settings.nette.el.hasClass('flash-products'))
            return;

        var productList = $('#snippet--productList');
        productList.find('.product-box').removeClass('flash-product');


	},


	complete: function (jqXHR, status, settings) {
		if (!settings.nette)
			return;

        if (!settings.nette.el.hasClass('flash-products'))
            return;

        var currentPage = $('#snippet--productBtnNext a').data('paginator-page');

        var productList = $('#snippet--productList');
        productList.find('.product-box[data-page="'+currentPage+'"]').addClass('flash-product');

	}
});

?>

Editoval Kcko (24. 10. 2018 12:01)

Pavel Kravčík
Člen | 1180
+
0
-

Jo, už chápu, kde byl problém. :) Díky.

Kcko
Člen | 465
+
0
-

Pavel Kravčík napsal(a):

Jo, už chápu, kde byl problém. :) Díky.

A já pro změnu už nechápu vůbec nic ;]

Pavel Kravčík
Člen | 1180
+
+1
-

Tak můžeš dělat prezidenta, zdá se že je to jedna z hlavních prekvizit. :)

Jen jste se nepochopili bych řekl, tys měl ten snippet na celý výpis, ale fungovalo by to asi jen s dynamickými snippety a CzechBoy předpokládal to, co jsem udělal ve své 1. Každopádně tvé řešení mi přijde ok.