change/update page content without reloading page - by AJAX Laravel

Question

I have a simple view, which displays results of a query

$number = 5;
$events = Event1::has('users', '<', 1)->latest()->take($number)->get();

TASK: Now I want to create some filter and sorting methods... and be able to refresh the displayed results without page reload

In my view file I have this:

<div id="top5-list">
@foreach($events as $event)
 ///
@endforeach

</div>

**

TO DO

** I wish to implement the below scenarios, if possible working in the same VIEW:

SCENARIO 1) using the same query, but change the value of parameters - just like in the example above - the variable $number changes the number of displayed results.

Most preferably I'd wish to use more than one variable

SCENARIO 2) build a separate query for each user-selectable viewing mode - for example

filter named: show top - refreshes the content with this query:

$events = Event1::has('users', '<', 1)->latest()->take($number)->get();

and filter named show best - refreshes the content with results of this completely rebuilt query:

$events = Event1::whereHas('users', function($q){
$q->where('importance', 0);})->get();

Scenario 2-A

In one view I will have a top-10 list of more than one item, for example TOP 5 EVENTS and TOP 5 ENTITIES side by side

My desired function: by pressing a button the queries responsible for displaying the top-5 would be changed from, for instance switching from "top-5-most important"

$events = ...query_1...
$entities = ...query_1...

into "top-5-most popular"

$events = ...query_2...
$entities = ...query_2...

SCENARIO 3) My ltimate goal is to build a filter which might sort out Books on-the-fly by clicking none, one, or many genres. Just as my other question demonstrates: how to filter records filtered by more than one criterion in pivot table - laravel eloquent collections

Peter · Accepted Answer · 2016-07-28 03:33:41Z

Ok, it was quite simple.

In your VIEW file you need to define a DIV (or any element) with a id defined, for example id="list_records"

<div id="list_records">
     // it can be empty or you can put a loading gif file
</div>

Now you need to define a route in routes.php To make these instructions simpler, I put the code in the route definition, however it should be put in a controller method.

Route::get('a-test', function() {

    $rnd = rand(1, 5); // varying number erves as a marker to show it works
    $posts= Posts::
            ->take($rnd)
            ->get();

return View::make('experiments.testa', compact('top5events','rnd','posts'));
});

As you see, you need to create a VIEW file: VIEWS/EXPERIMENTS/testa.blade.php

Content of the file:

{{ $rnd or 'random variable is missing!'}} 
// a feedback for beginners: will show that the AJAX is working even if the loop count would be zero records.


    @foreach($postsas $post)

       <p>{{ $post->title}}</p>  // just to print something

    @endforeach

Now within your main view file you have to put some JS:

{{ HTML::script('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js') }}

<script type="text/javascript">

function myFunction() {

$("#list_records").toggleClass( "csh_12" )
$('#list_records').load('a-test');
}
</script>

Note: the toggleClass is used to let you see that JS is working and JQuery is properly loaded. You need to define the CSS class csh_12 in your CSS file. Example:

.csh_12 {background: red;}

Now you need a button to trigger the reloading:

<button id="demo" onclick="myFunction()">Refresh the list</button>

That's it! Now the floor is yours!

Collectives™ on Stack Overflow

change/update page content without reloading page - by AJAX Laravel

TO DO

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

TO DO

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related