Laravel 5和AJAX

Question

I want to display a partial form using ajax when I select the client name. So far I have managed to fetch data from database using this:

<script>
  $('#client').change(function(){
    var client = $(this).val();
    var host = "{{URL::to('/')}}";
    var url = host + '/newinvoice/' + client;
    $.ajax({
      url: url,
      type: 'GET',
      beforeSend: function(){
        $('.client_services').html('Loading...');
      },
      success: function(data){
        $('.client_services').html(data);
      }
    });

    return false;
  });
</script>

Here is my Controller.

public function getClientServices(Client $client) {
  return json_encode($client->client_service()->get());
}

So instead of $('.client_services').html(data); I want to display text inputs depending on the number of available services for that particular client.

I don't know how to do that.

The above snippet returns results like:

[{"id":1,"client_id":1,"service_id":1,"frequency":90,"deleted_at":null,"created_at":"2015-04-15 10:20:33","updated_at":"2015-04-15 12:22:48"},{"id":2,"client_id":1,"service_id":1,"frequency":0,"deleted_at":null,"created_at":"2015-04-15 13:10:41","updated_at":"2015-04-15 13:24:41"},{"id":3,"client_id":1,"service_id":1,"frequency":180,"deleted_at":null,"created_at":"2015-04-15 13:58:39","updated_at":"2015-04-15 15:34:46"}]

I'm interested on id only.

What I want to do after that is enter the charges for that particular service for that particular client.

I hope I am clear.

Answer 1

Build a partial view "_clientservice" with the final html structure you want to inject.

In your controller:

public function getClientServices(Client $client)()
{
    $clientService = $client->clientService()->get();
    return \Response::json(['html' => view('_clientservices', compact('clientService'))->render()]);
}

and then:

<script>
  $('#client').change(function(){
    var client = $(this).val();
    var host = "{{URL::to('/')}}";
    var url = host + '/newinvoice/' + client;
    $.ajax({
      url: url,
      type: 'GET',
      beforeSend: function(){
        $('.client_services').html('Loading...');
      },
      success: function(data){
        $('.client_services').html(data.html);
      }
    });

    return false;
  });
</script>