Обновление блока ajax Laravel

Question

Подскажите, я вывожу из БД список постов. У каждого поста есть кнопка удалить. По нажатии на кнопку я работаю c ajax, из БД всё удаляется, а вот блок на странице, который должен обновить результаты, он полностью исчезает. Как исправить?

Route::get('profile/services', [ ProfileServicesController::class, 'services'])->name('services');

Route::any('profile/services.deleted', [ ProfileServicesController::class, 'servicesDeleted' ])->name('servicesDeleted');

    public function services(Request $Request){

      $category = DB::table('category')->get();

      $services = DB::table('services')
      ->orderBy('id','DESC')
      ->where('services.id_user', '=', Auth::user()->id)
      ->leftJoin('users', 'services.id_user', '=', 'users.id')
      ->leftJoin('category', 'services.id_category', '=', 'category.id')
      ->select('services.*', 'users.id as user_id', 'category.id as cat_id', 'category.title as cat_title')
      ->get();

      return view('pages/profile/services', ['services' => $services, 'category' => $category]);

    }


    public function servicesDeleted(Request $Request){


        $id = $Request->input('id_services');

        $services_deleted = DB::table('services')
        ->where('id','=',$id)
        ->delete();

        return response()->json(['success'=>'Отправлено!']);

      }

  function deletedServices(id){

      $('#lds').css('display','block');

      var _token = $("input[name='_token']").val();
      var id_services = id;

      $.ajax({
        async: false,
        url: "{{ route('servicesDeleted') }}",
        type:'post',
        data: {_token:_token,id_services:id_services},
        success: function(data) {
          $('#tasks-ajax').html(data).find('#tasks-ajax').html();
          $('#result-request-deleted').html('<div class="alert alert-success" role="alert"><strong>Успешно!</strong> Удалено!</div>');
          $('#lds').css('display','none');
        },

      });

  }

<form>
  @csrf
  <div class="row gx-5" id="tasks-ajax">
    @foreach($services as $el)

    <div class="d-flex justify-content-end">
      <a type="button" onClick="deletedServices({{$el->id}})"><i class="bi bi-x-circle"></i>       </a>
    </div>

    <div class="tasks-item row my-3">
      <div class="col-lg-8 col-md-8 col-12">
        <span>{{ $el->cat_title }} | {{ date('d.m.Y', strtotime($el->created_at)) }}</span>
        <p class="tasks-title">
          <a href="">{{ $el->title }}</a>
        </p>

      </div>
    </div>

    @endforeach
  </div>
</form>

Answer 1

Напишу ответом, уже не знаю как объяснить. Вы берете УДАЛЯЕТЕ ВСЮ вёрстку с помощью $('#tasks-ajax').html(data) заменяя её на {success: 'Отправлено!'} как вы и написали.
Понятное дело у вас ничего не выводится.

В других проектах у вас работает так как вы просто отправляете форму, а не используете аякс или перегружаете страницу после аякса (уверен на 99%), Просто по строчкам пройдите выведите каждую, проанализируйте и поймете почему так, аяксом так данные не обновляются.

Ниже пример кода как исправить. Добавляем у сервиса id по которому удалять. Далее в функции success удаляем не ВСЮ Верстку, а тот элемент который был удалён

<form>
  @csrf
  <div class="row gx-5" id="tasks-ajax">
      @foreach($services as $el)

        <div id="elem{{$el->id}}">
          <div class="d-flex justify-content-end">
              <a type="button" onClick="deletedServices({{$el->id}})"><i class="bi bi-x-circle"></i>       </a>
          </div>

          <div class="tasks-item row my-3">
              <div class="col-lg-8 col-md-8 col-12">
                  <span>{{ $el->cat_title }} | {{ date('d.m.Y', strtotime($el->created_at)) }}</span>
                  <p class="tasks-title">
                      <a href="">{{ $el->title }}</a>
                  </p>

               </div>
           </div>
        </div>

      @endforeach
  </div>
</form>


...
success: function(data) {
      document.getElementById('elem'+id_services).remove();
    },
...

Answer 2

Помогло вот такое изменение в ajax, не знаю насколько это правильно, но работает. После получения ответа на удаление поста requestDeletedServices, я обращаюсь к функции, где запрос на вывод постов requestViewServices

$.ajax({
    url: "{{ route('requestDeletedServices') }}",
    method:'post',
    data: {_token:_token,id_services:id_services},
    success: function(data) {
      $.ajax({
        url: "{{ route('requestViewServices') }}",
        method:'get',
        success: function(data) {
          $('#services-ajax').html($(data).find('#services-ajax').html());
          $('#result-request-deleted').html('<div class="alert alert-success" role="alert"><strong>Успешно!</strong> Удалено!</div>');
          $('#lds').css('display','none');
          // setTimeout(function(){
          //   location.reload();
          // }, 1500);

        },

      });

    },

  });

БЛОГ НА HUSL

Обновление блока ajax Laravel

Ответы (2 шт):