статус активен или неактивен без обновления страницы

Question

В моем laravel проекте я сделал статус «Активно» или «ВЫКЛ» без каких-либо jquery или ajax. Но сейчас я хочу применить ajax. потому что этот код принимает страницу refre sh, поэтому я не хочу, чтобы страница refre sh. поэтому кто-нибудь может сказать мне, как я могу применить ajax в этом коде. Здесь я поместил свой контроллер маршрута и код блейда. Так что, пожалуйста, скажите мне, как этого добиться. Это мой клинок

       <tr><td>21</td><td>Featured Image On Home Page</td>
            <td>
                 <a href="{{url('knowledgebasehomeImageblock')}}">
                  @if($settingval[0]->homeimg_block==1)
                  {!! '<div class ="text-success text-toggle-color"><i class="fa fa-toggle-on fa-2x" aria-hidden="true"></i>
                </div>' !!}
                @else
                {!! '<div class="text-secondary"><i class="fa fa-toggle-off fa-2x" aria-hidden="true"></i>
              </div>' !!}
              @endif 
            </a>
            </td>
          </tr> 

Это мой маршрут

Route::get('knowledgebasehomeImageblock','knowledgebaseSettingController@homeimageblock');

Это мой контроллер

    public function listimageblock(){
      $statusvalue = DB::table('knowledgebaseSetting')->get()->toArray();
      $retVal = ($statusvalue[0]->listimg_block==1) ? 0 : 1 ;
      $colFeatured = array('listimg_block' =>$retVal);
      DB::table('knowledgebaseSetting')->update($colFeatured);
      return Redirect::back()->with('message','Display featuredblock updated successfully!'); 
    }

Answer 1

Теперь у меня есть решение, я делаю небольшие изменения в своем коде. Это блейд-файл, и этот $ settingval [0] исходит от контроллера, или вы можете использовать его в блейд-файле

@php
$settingval = DB::table('your_table_name')->get();
@endphp

 <tr><td>21</td><td>Featured Image On Home Page</td>
            <td>
            <input data-id="toggle" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $settingval[0]->listimg_block ? 'checked' : '' }}>
            </td>
          </tr>

И я изменил маршрут на именованный маршрут, потому что в моем случае он выдает ошибку в консоль, поэтому я изменил на именованные маршруты

Route::get('knowledgebasehomeImageblock','knowledgebaseSettingController@homeimageblock')->name('list_image_block');

И это мой код сценария

<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script>
  $(function() {
    $('.toggle-class').change(function() {
        var listimg_block = $(this).prop('checked') == 1 ? 1 : 0; 
        // var user_id = $(this).data('id'); 

        $.ajax({
            type: "GET",
            dataType: "json",
            url: '{{route('list_image_block')}}',
            data: {'listimg_block': listimg_block},
            success: function(data){
              console.log(data.success)
            }
        });
    })
  })
</script>

Answer 2

для этой цели вы можете использовать SSE (Server-Sent Events) в HTML 5, чтобы получить статус в любой момент. с событиями, отправленными сервером, обновления приходят автоматически.

<script>
  if(typeof(EventSource) !== "undefined") {
   var source = new EventSource("/knowledgebasehomeImageblock");
   source.onmessage = function(event) {
       if(event.data) {
          // change the icon status;
       }else {
         // change the icon status;
       }
   };
 } else {
    // show this message: "Sorry, your browser does not 
    support server-sent events...";
 }

ваш код на стороне сервера похож на следующий код:

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
// check offline or online and echo result, for example echo true
echo true;
flush();

для получения дополнительной информации вы можете увидеть этот учебник HTML5 Сервер События