Load filtered data without reloading the whole page in Laravel

Question

I would like to load the data from the database without reloading the whole page with jquery.

Just like in this pen: https://codepen.io/gabrieleromanato/pen/kheox?q=jQuery%3A%20filterable%20portfolio%20%20&order=popularity&depth=everything&show_forks=false

My Index.blade php:

<div class="row">
                    <ul class="categories">
                            @foreach ($category as $category)
                      <li>
                        <a href="{{ route('category', $category->id) }}">  <class = "se ni dolocen"> {{ $category->title }} ({{ $category->companies->count() }}) </a>
                      </li>
                            @endforeach
                    </ul>                
                    
                    <div class="companies_list">                  
                    @foreach($categories as $companies)                
                      <div class="col_3">

                        @if ($companies->image_url)
                          <img src="{{ $companies->image_url }}" class="podjetjaslike" alt="" href="{{ route('companies.showp2ps', $companies->id) }}">  
                        @endif
                            <div class="tags">  <object>
                              <a href="/premium" title="Premium" class="premium">Premium</a>
                            </object><div class="rate color4">{{ $companies->rating }}</div>
                          </div></a>
               <div class="content">
                            <a onclick="" href="{{ route('companies.showp2ps', $companies->id) }}">
                              <h3>{{ $companies->title }}</h3></a>
                              
                <p>{{ $companies->categorie_id }}.</p>
                <div class="bottom">
                 <div class="time">{{ $companies->date }}</div>
</div>
 </div>
</div>

                    @endforeach

This is my page.controller:

public function category($id) {

            $category = Category::with('companies')->orderBy('title', 'asc')->get();
      
            //\DB::enableQueryLog();
            $categories = Companies::Paginate()
            
            ->where('category_id', $id);

            return view("pages.index", compact ('categories', 'category'));    //->render();

            //dd(\DB::getQueryLog());
        }

In the end of index.php. I have jquery script:

<script type="text/javascript">

    var Browse = {
        sort: function(items) {
            items.show();
            $('ico_list').find('col_3').not(items).fadeOut(500);
        },
        showAll: function(items) {
            items.fadeIn(500);
        },
        doSort: function() {
            $('li', 'categories').on('click', function() {

                var $li = $(this);
                if (!$li.is('#all')) {

                    var items = $({{ $companies->id }});

                    Browse.sort(items);

                } else {
                    Browse.showAll($('col_3', 'companies_list'));
                }

            });
        }
    };

    Browse.doSort();

    </script>

How should I do to reload the data dynamic with jquery to not reload the page?

lol and i thought that there is a php playground on SO when i saw your post .... then i got disappointed xD — messerbill, Mar 01 '18 at 13:10
no no this is not your fault. SO does not provide a `PHP` playground — messerbill, Mar 01 '18 at 13:13
Maybe this will be close to what you would like? http://phpfiddle.org/ — Roga Men, Mar 01 '18 at 13:16
What the JS does there is to hide and sort. No reloading or fetching content. The content should already be there from the page load, only hidden when the category selected doesn't match the category of the item. — buckyBadger, Mar 01 '18 at 13:17
Yes the filter is already working through PageController and with (href) but the page is reloading.. And I would like to have ajax/jquery instant reload data : ) — Roga Men, Mar 01 '18 at 13:18
"Load data without reloading the page", doesn't it sound like [ajax](https://stackoverflow.com/a/9436594/6242649)? Check [this link](http://blog.teamtreehouse.com/beginners-guide-to-ajax-development-with-php) as well. — Udayraj Deshmukh, Mar 01 '18 at 14:20
I don't know what is the solution maybe ajax. I will look close to your link. Thank you. — Roga Men, Mar 01 '18 at 15:04

Load filtered data without reloading the whole page in Laravel

0 Answers0