CODEWITHSUNDEEP
phpajaxlaravellaravel-5.5
Feralheart
Feralheart

Reputation: 1920

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

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;
    }
}

Upvotes: 2

Views: 1444

Answers (1)

Mr. Pyramid
Mr. Pyramid

Reputation: 3935

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.

Upvotes: 3

Related Questions