I want to show result from database without reloading the page

Question

I am working with laravel . I have two div . One div is to show some output from database and other div is for showing some output from database.

Let me show my code.

<div id="pending">
        @foreach($pendings as $pending)
        {{ $pending->title }}
        <br>
    @endforeach

<div id="accepted">
        @foreach($accepteds as $accepted)
        {{ $accepted->title }}
        <br>
    @endforeach

When an user will enter to the page, I want to show him pending div or pending data. Then I want to keep two button. One is PENDING and other one is ACCEPTED. And I want to show pending div or pending data when user will click pending button as well as accepted div or accepted data when user will click accepted button. Anyone please help me.

One more think I don't have much knowledge about AJAX or JQuery.

Answer 1

create two buttons with ids button_1 & button_2 and bind db result in single div.You can try below codes

function sendAjaxRequest(element,urlToSend) {
             var clickedButton = element;
              $.ajax({type: "POST",
                  url: urlToSend,
                  data: { id: clickedButton.val(), access_token: $("#access_token").val() },
                  success:function(result){
                  /*can add logic for html or json data*/
                   $("#divid").append(result);
                  },
                 error:function(result)
                  {
                  alert('error');
                 }
             });
     }

       $(document).ready(function(){
          $("#button_1").click(function(e){
              e.preventDefault();
              sendAjaxRequest($(this),'/pages/test/');
          });

          $("#button_2").click(function(e){
              e.preventDefault();
              sendAjaxRequest($(this),'/pages/test/');
          });
        });

Answer 2

我已经通过Bootstrap Tabs和Pills做到了这一点。