Laravel Blade - Append view to table tbody

Question

I'm trying to append rows to a table but it don't pass <tr> and <td>, it's wired. Pass all without this two tags.

My jquery code is that:

$.get('/remove-day-travel/'+id, function(data)
   {
     $('#travelTable tbody').html('');
     $('#travelTable tbody').append(data);


     addDayTravel();
     removeDayTravel();
   });

My controller:

public function removeDayTravel($id)
{
  $intervention = DB::table('interventionDays')->select('interventionId')->where('id', $id)->first();

  //DB::table('interventionDays')->where('id', $id)->delete();

  $travelHours = DB::table('interventionDays')
                ->where('interventionId', $intervention->interventionId)
                ->orderBy('day', 'ASC')
                ->get();
  return view('current-dayTravel', compact('travelHours'));
}

And my view is that:

@if(count($travelHours) > 0)
  <?php $count = 1; ?>
  @foreach ($travelHours as $key => $value)
    <input type="hidden" name="day-travel-id[{{$count}}]" value="{{$value->id}}">
    <input type="hidden" name="day-travel-remove[{{$count}}]" value="0">
    <tr>
      <td><label>Dia {{$count}}:</label></td>
      <td><label>Ida</label></td>
      <td class="@if ($errors->has('hour-day-1[' . $count . ']')) has-error @endif">
        {!! Form::text('hour-day-1[' . $count . ']', $value->morningStart , ['class' => 'form-control travelGoStartHour', 'placeholder'=> '']) !!}
      </td>
      <td class="@if ($errors->has('hour-day-2[{{$count}}]')) has-error @endif">
        {!! Form::text('hour-day-2[' . $count. ']', $value->morningEnd, ['class' => 'form-control travelGoEndHour', 'placeholder'=> '']) !!}
      </td>
      <td>
        <label>Volta</label>
      </td>
      <td class="@if ($errors->has('hour-day-3[' . $count . ']')) has-error @endif">
        {!! Form::text('hour-day-3[' . $count . ']', $value->afternoonStart, ['class' => 'form-control travelBackStartHour', 'placeholder'=> '']) !!}
      </td>
      <td class="@if ($errors->has('hour-day-4[' . $count . ']')) has-error @endif">
        {!! Form::text('hour-day-4[' . $count . ']', $value->afternoonEnd, ['class' => 'form-control travelBackEndHour', 'placeholder'=> '']) !!}
      </td>
      <td>
        {!! Form::checkbox('dinner[' . $count . ']', 0,$value->dinner) !!}
      </td>
      <td>
        {!! Form::checkbox('stay[' . $count . ']', 0,$value->stay) !!}
      </td>
      <td>
        @if($key == count($travelHours) -1)
          <i class="icon-plus-circled add-new-day-travel" title="Adicionar Novo dia" data-id="1"></i>
        @endif
      </td>
      <td>
        @if($key == count($travelHours) -1)
          <i class="icon-cancel remove-day-travel" title="Remover dia" data-id="{{$count}}" data-record="{{$value->id}}"></i>
        @endif
      </td>
    </tr>
    <?php $count += 1; ?>
  @endforeach
@endif

But returns me this:

I don't understand why? What I'm doing wrong?

Thank you

Try to render your view before returning and check if it fixes it. `return view('current-dayTravel', compact('travelHours'))->render();` — Laerte, Jan 16 '18 at 17:38
Now I change view and put all table with thead and tbody. I javascript do append to tableId and works! I don't understand what is the problem but this way works. — user3242861, Jan 16 '18 at 17:54

score 1 · Answer 1 · answered Jan 16 '18 at 18:20

1

$('#travelTable tbody').html(data);

Use the above in your JS instead of what you currently have

answered Jan 16 '18 at 18:20

Columbus

133
1
11

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

When you render a tr or th or even td tag outside a tbody or thead or tfooter html ignores them and replace them by a empty space because those tags can only be placed in between opening and closing table tags.

Browsers ignore the <tbody>, <tr>, and <td> tags and the corresponding end tags. This has not been specified in HTML specifications, since they do not define the parsing of syntactically erroneous documents. In the HTML5 draft, however, there is a description that defines the browser behavior in a manner that corresponds to the what browsers actually do: Tree construction.

This means that you cannot write an HTML document that contains, say, a element outside a table element. The HTML parser in a browser simply does not construct such document trees. (You can, however, construct such a document dynamically with client-side scription.)

See previous answer here:

How do browsers analyze <tr> <td> without <table>?

Laravel Blade - Append view to table tbody

2 Answers2