Laravel Bootstrap Toggle switch Update DB field using Ajax – Technology

Laravel Bootstrap Toggle switch Update DB field using Ajax

There are the Following The simple About Laravel Bootstrap Toggle switch Update DB field using Ajax Full Information With Example and source code.

As I will cover this Post with live Working example to develop Bootstrap Toggle to Update Database in Laravel 5.7, so the some major files and Directory structures for this example is following below Laravel Toggle Switch Inside Bootstrap Ajax Example.

Step 1: Include CDN and HTML Code

laravel-toggle-switch-button

<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>

<h2>Manage data using switch/toggle button on html with Laravel</h2>
<button  onclick="save">
  @if ($saved == true)
    <i id="save-icon" ></i><span id="save">Saved!</span>
  @else
    <i id="save-icon" ></i><span id="save">Save</span>
  @endif
</button>

Step 2: JavaScript Function

function save() {
    var saveEl = document.getElementById("save-icon");
    var iconType = saveEl.getAttribute("data-prefix");
}

Step 3: Ajax Http Call in jQuery

if ( iconType === 'fas' ) {
  $.ajax({
    url: "/unsave-product",
    cache: false,
    data: {
        slug: productSlug,
        userId: {{ $userId }}
    }
  })
  .done(function (response) {
      document.getElementById("save-icon").classList.add("far");
      document.getElementById("save").innerHTML="Save";
  })
  .fail(function () {
      console.log('failure');
  });
} else {
    $.ajax({
        url: "/save-product",
        cache: false,
        data: {
            slug: productSlug,
            userId: {{ $userId }}
        }
    })
        .done(function (response) {
            document.getElementById("save-icon").classList.add("fas");
            document.getElementById("save").innerHTML = "Saved!";
        })
        .fail(function () {
            console.log('failure');
        });
}

Step 4: Create A Laravel Controller

And Last to update query in Database to Save and unsave Product Details.

public function unsave(Request $request) {
    $product = product::where('slug', $request->input('slug'))->first();
    $savedProduct = savedProducts::where([
        ['user_id', $request->input('userId')],
        ['product_id', $product->id]
    ])->first();

    $savedProduct->delete();
}

public function save(Request $request) {
    $product = product::where('slug', $request->input('slug'))->first();

    $savedProduct = new savedProducts();
    $savedProduct->user_id = $request->input('userId');
    $savedProduct->product_id = $product->id;
    $savedProduct->save();
}

Angular 6 CRUD Operations Application Tutorials

Read :

• Technology
• Google Adsense
• Programming

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Laravel Bootstrap Toggle switch Update DB field using Ajax.
I would like to have feedback on my onlinecode blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.