Change the div with ajax and multiple [email protected]

Posted 1 year ago by feralheart

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 "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="[email protected]" params="[a => 24, b => 52]">
                        <button type="button" class="btn btn-link">First Example</button>
                    </a>
                </li>
                <li>
                    <a action="[email protected]" 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;
    }
}

Please sign in or create an account to participate in this conversation.