Pomocí tabs filtrovat články

před 5 lety
jAkErCZ
Člen | 322
+
0
-

Zdravím,

Mám dotaz chtěl bych udělat že v tabs vykreslím kategorie a po kliknutí kliknutí na danou kategorii by se články vyfiltrovaly tak aby odpovídaly dané kategorii.

šablona:

<ul class="nav nav-tabs nav-tabs-fill" role="tablist">
            <li n:foreach="$categorys as $category" class="nav-item">
                <a class="nav-link" href="#tabs-{$category['category_id']}" role="tab" data-toggle="tab">{$category['title']}</a>
            </li>
        </ul>
        <div class="tab-content">
            <div n:foreach="$categorys as $category" role="tabpanel" class="tab-pane fade show" id="tabs-{$category['category_id']}">
                <div class="nk-gap"></div>
                <!-- START: Action Tab -->
                <div class="nk-blog-post nk-blog-post-border-bottom">
                    <div class="row vertical-gap">
                        <div class="col-lg-3 col-md-5">
                            <a href="blog-article.html" class="nk-post-img">
                                <i
                                        mg src="{$basePath}/images/post-9-mid-square.jpg" alt="He made his passenger captain of one">
                                <span class="nk-post-categories">
                                    <span class="bg-main-1">Action</span>
                                </span>
                            </a>
                        </div>
                        <div class="col-lg-9 col-md-7">
                            <h2 class="nk-post-title h4"><a href="blog-article.html">He made his passenger captain of one</a></h2>
                            <div class="nk-post-date mt-10 mb-10">
                                <span class="fa fa-calendar"></span> Jul 3, 2018
                                <span class="fa fa-comments"></span> <a href="#">0 comments</a>
                            </div>
                            <div class="nk-post-text">
                                <p>Just then her head struck against the roof of the hall: in fact she was now more than nine feet high, and she at once took up the little golden key and hurried off to the garden door...</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END: Action Tab -->
                <div class="nk-gap"></div>
            </div>

Presenter:

/**
    * @param $url
    */
   public function actionArticles()
   {
       $articles= $this->articleManager->getArticleWidthCategory('1');
       $categorys = $this->articleManager->getCategories();

       bdump($articles);

       // přístup ke komponentě VisualPaginatoru:
       $visualPaginator = $this['visualPaginator'];
       // přístup k samotnému paginatoru:
       $paginator = $visualPaginator->getPaginator();
       // počet položek na stránku
       $paginator->itemsPerPage = 4;
       // spočítat celkový počet položek
       $paginator->itemCount = $articles->count('*');
       /* Předání do šablony */
       $this->template->articles = $articles;
       $this->template->categorys = $categorys;
   }

Model:

/**
 * Vrátí články do slideru dle tagu.
 * @param $category_id
 * @return array ID články které jsou s tímto tagem
 */
public function getArticleWidthCategory($category_id)
{
    $category = $this->database->table(self::TABLE_ART_CAT)->select('article_id')
        ->where(self::COLUMN_CAT_ID, $category_id);
    foreach ($category as $cat){
        $article = $this->getArticleWithID($cat->article_id);
        $articles[] = [
            'articles' => $article
        ];
    }
    return $articles;
}

takto to více méně funguje ale nevím jak do toho zapojit to překreslení nebo mi to aktuálně nenapadá.

Rád bych aby to fungovalo že když vejdou na články tak tam budou všechny vypsané a až si člověk vybere danou sekci tak se vyfiltrují.

Takže nějaké rady?

Díky.

před 5 lety
Polki
Člen | 553
+
0
-

Ajax?

před 5 lety
jAkErCZ
Člen | 322
+
0
-

Polki napsal(a):

Ajax?

To vím taky ale přemýšlím jak to udělat.

Jako chápu že si vytvořím signal ale jak pak udělám to aby se pod tím vypsal ten tabs jelikož ten se volá také přes href.

před 5 lety
Polki
Člen | 553
+
-2
-

Můžeš si například udělat rozšíření: (při použití nette.ajax.js)

$.nette.ext('toTab2', {
    complete: function () {
		$('#odkazNa2Tab').trigger('click');
    }
});

nebo si napsat podobně vlastní funkci:

$.ajax({
  url: "url",
}).done(function() {
  $('#odkazNa2Tab').trigger('click');
});
před 5 lety
Martk
Člen | 661
+
+1
-

Z hlavy a zkráceně

parametr category

renderDefault(int $category) { ... }

Záložky

	<a n:href="this category => $id" n:foreach="$categories as $id => $name" class="ajax">{$name}</a>

	<a n:href="this category => null" class="ajax">Bez kategorie</a>

Snippet

<div n:snippet="articles">
	Seznam tvých článků
</div>

A myslím, že bude stačit v action metodě, ale ruku bych za to nedal, jinak použit handle:

actionDefault() {
    if ($this->isAjax()) {
        $this->redrawControl('articles');
    }
}

První vyzkoušet bez ajaxu, jestli to funguje

před 5 lety
jAkErCZ
Člen | 322
+
0
-

Martk napsal(a):

Z hlavy a zkráceně

parametr category

renderDefault(int $category) { ... }

Záložky

	<a n:href="this category => $id" n:foreach="$categories as $id => $name" class="ajax">{$name}</a>

	<a n:href="this category => null" class="ajax">Bez kategorie</a>

Snippet

<div n:snippet="articles">
	Seznam tvých článků
</div>

A myslím, že bude stačit v action metodě, ale ruku bych za to nedal, jinak použit handle:

actionDefault() {
    if ($this->isAjax()) {
        $this->redrawControl('articles');
    }
}

První vyzkoušet bez ajaxu, jestli to funguje

Super tohle sem přesně myslel díky moc :)

ještě mám takový technický dotaz jak správně označit aktivní ???
Našel jsem tohle

<a n:href="this category => $id" n:class="$presenter->linkCurrent ? 'nav-link ajax active'">{$category['title']}</a>

Jenže ten funguje až na něj kliknu ale před kliknutím tam class ani nemá jak této funkci mohu nějak předat podmínku else nebo něco takového? :D

Díky

před 5 lety
Zdeno1981
Člen | 115
+
0
-

Ahoj,

Zkusím ti napovědět https://php.baraja.cz/…rni-operator

Editoval Zdeno1981 (15. 10. 2019 14:06)

před 5 lety
Martk
Člen | 661
+
+1
- 
<a n:href="this category => $id" n:class="'nav-link ajax', $presenter->linkCurrent ? 'active'">
{$category['title']}
</a>

Jinak else je to co @Zdeno1981 poslal

před 5 lety
jAkErCZ
Člen | 322
+
0
-

Martk napsal(a):

<a n:href="this category => $id" n:class="'nav-link ajax', $presenter->linkCurrent ? 'active'">
{$category['title']}
</a>

Jinak else je to co @Zdeno1981 poslal

Díky to mě mohlo taky napadnout že to stačilo hodit před to :D