Laravel Ajax displaying Data using looping

Question

I want to display data when I click search button.

search button form code so far :

<div class="col-xs-4 col-sm-4 col-md-4">
 <div class="form-group">
    <label class="control-label">Driver Name:</label>
    {!! Form::select('driver_id', $driver, null, array('class' => 'form-control')) !!}
 </div>
</div>

<div class="col-xs-4 col-sm-4 col-md-4">
 <div class="form-group">
    <label>Fine Date:</label>
    {!! Form::text('fine_date', null, array('id' => 'datetimepicker', 'class' => 'form-control')) !!}
 </div>
</div>

<div class="col-xs-4 col-sm-4 col-md-4">
 <div class="form-group filter-btn">
    <button class='btn btn-info' type='search'>Search</button>
 </div>
</div>

here's my controller so far :

public function getDriverByWorkingDate(Request $request) {
return Attendance::join('attendance_details', 'attendance_details.attendance_id', '=', 'attendances.id')
                        ->join('fleets', 'fleets.attendance_detail_id', '=', 'attendance_details.id')
                        ->join('cars', 'fleets.car_id', '=', 'cars.id')
                        ->select(
                            'fleets.start_time',
                            'fleets.end_time', 
                            'fleets.car_id', 
                            'cars.plate_no',
                            'attendances.working_date',
                            'attendances.driver_id'
                        )
                        ->where('attendances.working_date', Carbon::parse($request->fine_date))
                        ->where('attendances.driver_id', $request->driver_id)->get();
}

and here's jquery so far :

$('button[type="search"]').click(function(e) {
    $.ajax({
        url: "{{ route('driver.name') }}",
        type: "POST",
        data: { 
            '_token' : '{{csrf_token() }}',
            'driver_id' : $('select[name="driver_id"]').val(),
            'fine_date' : $('input[name="fine_date"]').val(),
        },
        success: function(data) {
        },
        error: function(data) {

        } 
    });  
});

Everything works fine and data is being returned.

#attributes: array:6 [
    "start_time" => "2016-11-16 08:00:00"
    "end_time" => "2016-11-16 18:00:00"
    "car_id" => 5
    "plate_no" => "DFE82846J"
    "working_date" => "2016-11-16"
    "driver_id" => 1
  ]
  #original: array:6 [
    "start_time" => "2016-11-16 08:00:00"
    "end_time" => "2016-11-16 18:00:00"
    "car_id" => 5
    "plate_no" => "DFE82846J"
    "working_date" => "2016-11-16"
    "driver_id" => 1
  ]

How do I display those data into HTML div ? thanks,

Possible duplicate of Displaying data when pressed button laravel — Sanzeeb Aryal
– Sanzeeb Aryal, Commented Nov 16, 2016 at 9:04

user7166502 · Accepted Answer · 2016-11-16 09:08:28Z

1

create a div and append the json result

success: function(data) {
    $.each(data, function (i, item) {trHTML += '<tr><td>' + data.car_id + '</td><td>' + data.plate_no + '</td></tr>';}$('#test').append(trHTML);   
},

answered Nov 16, 2016 at 9:08

user7166502

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Mohammad Nurul Huda Rimon · Accepted Answer · 2016-11-16 09:09:45Z

1

You need to pass json response to the ajax callback.

Try this:

public function getDriverByWorkingDate(Request $request) {
    $attendances = Attendance::join('attendance_details', 'attendance_details.attendance_id', '=', 'attendances.id')
        ->join('fleets', 'fleets.attendance_detail_id', '=', 'attendance_details.id')
        ->join('cars', 'fleets.car_id', '=', 'cars.id')
        ->select(
            'fleets.start_time',
            'fleets.end_time', 
            'fleets.car_id', 
            'cars.plate_no',
            'attendances.working_date',
            'attendances.driver_id'
        )
        ->where('attendances.working_date', Carbon::parse($request->fine_date))
        ->where('attendances.driver_id', $request->driver_id)
        ->get();

    return response()->json([
        'status' => true,
        'attendances' => $attendances
    ], 200);
}

Ajax success:

success: function(data) {
    if(data.status == true) {
        $.each(data.attendances, function(i, v) {
            // do something

            console.log(v.start_time);
            console.log(v.end_time);
        });

    }
},

edited Nov 16, 2016 at 9:09

answered Nov 16, 2016 at 9:04

Mohammad Nurul Huda Rimon

2,5351 gold badge17 silver badges18 bronze badges

6 Comments

Mohammad Nurul Huda Rimon Over a year ago

It's defense on you. create a div into the HTML and after iterate you can append your data into the HTML.

Andrew Vanusi Over a year ago

can u help me append it into htlm ?

Mohammad Nurul Huda Rimon Over a year ago

For ex. before each create a var temp = '<ul>'; and inside each temp += '<li>'+ v.start_time +'</li>'; finally after each append the temp var into the DOM like so. temp += '</ul>'; $('#list').html(temp); Hope this you understands how it's works. Create a div in you html like: <div id="list"></div>

Andrew Vanusi Over a year ago

I'have create <div id="result" </div>

Mohammad Nurul Huda Rimon Over a year ago

@AndrewVanusi No problem you can create any name what you want.

|

Abdullah Al Shakib · Accepted Answer · 2016-11-16 08:42:52Z

0

You can use js template engine(like: handlebarsjs) to parse parse data and display them

OR

Use traditional way:

In your controller, use this way:

public function getDriverByWorkingDate(Request $request) {
  $data =  Attendance::join('attendance_details', 'attendance_details.attendance_id', '=', 'attendances.id')
                    ->join('fleets', 'fleets.attendance_detail_id', '=', 'attendance_details.id')
                    ->join('cars', 'fleets.car_id', '=', 'cars.id')
                    ->select(
                        'fleets.start_time',
                        'fleets.end_time', 
                        'fleets.car_id', 
                        'cars.plate_no',
                        'attendances.working_date',
                        'attendances.driver_id'
                    )
                    ->where('attendances.working_date', Carbon::parse($request->fine_date))
                    ->where('attendances.driver_id', $request->driver_id)->get();

  return ['success' =>data]
}

And in your jquery code, try this way:

success: function(data) {
  var customHtml = '';
  if(data.success){
    var response = data.success;
    for (var i in response) {
       customHtml = customHtml + '<div>'+ response[i].car_id+'</div>';
       customHtml = customHtml + '<div>'+ response[i].plate_no+'</div>';
       customHtml = customHtml + '<div>'+ response[i].start_time+'</div>';
       customHtml = customHtml + '<div>'+ response[i].end_time+'</div>';
    }

    $('.YOUR-AREA').html(customHtml)
  }
},

answered Nov 16, 2016 at 8:42

Abdullah Al Shakib

2,0442 gold badges15 silver badges16 bronze badges

2 Comments

Andrew Vanusi Over a year ago

what do u mean i in respone ?

Abdullah Al Shakib Over a year ago

here response is a object

Collectives™ on Stack Overflow

Laravel Ajax displaying Data using looping

3 Answers 3

Comments

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related