Question posted in
You can find the official documentation here.

Jquery ajax – status active or inactive withour page refresh

In my laravel project I have done the status Active On or OFF without any jquery or ajax. But right now i want to apply ajax. because this code take page refresh, so i don’t want the page refresh. so can anyone tell me how can I apply the ajax in this code. Here I put my route controller function and blade code. so plz tell me how to achieve this.
This is my blade 

       <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>

This is my route

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

This is my controller

    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!'); 
    }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Now I get the solution, I make some little changes in my code. This is blade file and this $settingval[0] comes from controller or you can used in blade file

    @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>

    And I changed the route into named route because in my case it throw an error in console so I changed into named routes

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

    And this is my script code

    <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>

  2. 0

    for this goal you can use SSE (Server-Sent Events) in HTML 5 to get status in any moment.
    with server-sent events, the updates come automatically. 

    <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...";
 }

    your code in server side is like the following code:

    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();

    for more info you can see this tutorial HTML5 Server-Sent Events

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search