filtering data using drop-down onChange event

I have a table name "domains" with column "state" type boolean value 0 or 1.

I have listed all adverts where state value = 0 in my controller as below

public function newdomain(){        
      $domains = DB::table('domains')->where('state' ,'=', 0)->get();        
        $advertisers = DB::table('advertisers')->get();         
        return view('admin.newdomain',compact('domains','advertisers'));
    }

On my view on the top of dataTable list, I have added a form with dropdown to select as below

{!! Form::open(array('url' => 'newdomain'))!!}
                                    <div class="form-group">
                                        <label for="">Select from the options</label>
                                        <select class="form-control input-sm" id="state" name="state" onchange="state()">
                                            <option value=""></option>
                                            <option value="0">Ignored</option>
                                            <option value="1">Not Ignored</option>
                                        </select>
                                    </div>                                    
                                    <div class="form-group">
                                        <button class="btn btn-primary" type="submit">Filter</button>                                        
                                    </div>
                                    {!! Form::close()!!}

I would like to Regenerate data table list based on the dropdown value selected.

I have been suggested to use Ajax, As i am new to JavaScript and jQuery, Please help me out

JavaScript:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  <script>
      $( "#state" ).change(function() 
  {
    //
    });
  });
    </script>

What must go in my controller method newdomain()?

Muzammil

10 years ago

Level 1

<script>
    $( "#state" ).change(function()   {
        
        var stateID = $(this).val();

        $.ajax({
            url: "{{route('what-ever-the-url')}}",
            data : {stateID : stateID}

        }).done(function(response) {
            console.log(response)
        });
    });
</script>

This is GET request , if you want to send as POST then you need to send _token along with ajax request.

andremellow

10 years ago

Best Answer

Level 9

@sanainfotech ,

Your mothod can be whatever you want. Just try to be explicit.

Even Angular and Jquery can run together, for ajax request you just need to use only one.

You can use the "<select " event onclick="state()". This is not a jquery way. This will call a state function outside of jquery scope. To do jquery way you can do as you did like:

$( "#state" ).change(function() 
  {
    //this is the #state dom element
    var state = $(this).val();
    
    // parameter 1 : url
        // parameter 2: post data
        //parameter 3: callback function 
    $.get( 'put_your_url_here' , { state : state } , function(htmlCode){ //htmlCode is the code retured from your controller
        $("#domains_table tbody").html(htmlCode);
    });
  });

// In your controller

public function getDomains(Request $request)
{
    $state = $request->state;

    $domains = DB::table('domains')->where('state' ,'=', $state )->get();        

    $html = view('view_that_will_create_your_table_data', compact('domain'))->render();

    return  $html
}

//view_that_will_create_your_table_data.blade.php

@foreach( $domais as $domain)
<tr>
 <td>{{ $domain->your_property }}
 <td>{{ $domain->your_property }}
 <td>{{ $domain->your_property }}
</tr>
@endforeach

If you want to render your default domains state in your main view you can just call view_that_will_create_your_table_data like

<table id="domains_table">
    ....
    <tbody>
    @include('view_that_will_create_your_table_data ')
    </tbody>
</table>

Of couse there are other approaches, this is one of many you can implement!

2 likes

bobsback

9 years ago

Level 1

@andremellow Tyvm I was trying to work out the best way to do this for hours

Please or to participate in this conversation.