Laravel: Change the div with ajax and multiple controller@action

Question

I want to change the div's content with AJAX (I don't want to reload all of the page when I click on the links), i found some documentations, but I only saw "static" solutions (they are "hard coded" that "if you click on this bring this", but I don't want to use a 3000 row switch-case on the bottom of my project).

Someone can show me a "dynamic" solution where I only have to give the controller, action and the parameters to the on-click and the jquery router makes the routing without tinkering?

My example code:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
    <head>
        @include('includes.head')
    </head>
    <body>
        <div id="header">
         <nav id="navbar" class="navbar navbar-default">
           <ul class="nav nav-tabs navbar-right">
                <li>
                    <a action="FirstExampleController@firstExamle" params="[a => 24, b => 52]">
                        <button type="button" class="btn btn-link">First Example</button>
                    </a>
                </li>
                <li>
                    <a action="SecondExampleController@secondExamle" params="[id => 1, newValue => 42]">
                        <button type="button" class="btn btn-link">Second Example</button>
                    </a>
                </li>
         </nav>
        </div
        <div id="app">
            <!-- This will be changed by the router -->
        </div>
        <footer class="container navbar">
            @include('includes.footer')
        </footer>

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

Controller Actions

class FirstExampleController extends Controller{

    public function firstExample(Request $request){
        $a = $request -> a;
        $b = $request -> b;

        $c = $a + $b;

        return $c;
    }
}

class SecondExampleController extends Controller{

    public function secondExample(Request $request){
        $id = $request -> id;
        $newValue = $request -> newValue;

        //database operation where the id's object's new value will be $newValue

        return $this->showItems;
    }
}

Mr. Pyramid · Accepted Answer · 2018-09-17T05:08:56.977

3

Do it like this way,

First of all add an id to each button and as well as on links inside <a> which you can use as selector for ajax and use data-* attributes for params you can read more about data-attributes here

 $('#buttonID').click(function(e) {  // e=event
        e.preventDefault();
        var param1 = $(this).data("param1")
        var param2 = $(this).data("param2")
        // so on....
        $.ajax({
           url: "/routeNames",
           type: "GET"/"POST",
           data: { data1: param1, data2: param2 }, 
           success: function(response) {
           console.log(response);  
    }
   });
});

NOTE: You don't need to specify like this SecondExampleController@secondExample instead use routes read more about routes and just specify the name of route or the URI of route.

PS: this is just a basic structure. You need to do R&D for getting best of it.

edited Sep 17 '18 at 05:08

answered Nov 02 '17 at 19:51

Mr. Pyramid

3,855
5
32
56

What R&D meaning? I have some views where are a lot of links/buttons. Is there any chance to include this jQuery script only once? – Feralheart Nov 04 '17 at 10:03
No, as params will vary for your different request so does the type if you want to make a script and include it you need to maintains all those cases. if you are not bound with requirements then you can use vue,react or angular js you will able to meet the need. – Mr. Pyramid Nov 04 '17 at 10:11
if you are satisfied with my answer you can accept it ;) – Mr. Pyramid Nov 04 '17 at 17:18

Laravel: Change the div with ajax and multiple controller@action

1 Answers1