CODEWITHSUNDEEP
jqueryajaxlaravel
sd077
sd077

Reputation: 483

How can I change button class and fontawesome icon based on my database value 0 or 1 in laravel using jquery ajax?

I have column status in database with boolean value 0 and 1. 0 means user is shown and 1 means user is hidden.

This is my button

 <button class="btn btn-info btn-sm btn_show" type="button" id="btn_show" data-value="{{$user->status}}" data-id="{{$user->id}}"><i
                                            class="fa fa-eye"></i>
                                </button>

My Controller

 public function userhideandshow($id)
{
    $user = User::find($id);
    if ($user->status == 0) {
        $user->status = 1;
    } else {
        $user->status = 0;
    }
    $user->save();

    return response()->json(['success']);
}

Ajax Call

$(function () {
        $(".btn_show").click(function () {
            let status = $(this).data('value');
            console.log(value);
            let id = $(this).data('id');
            $.ajax({
                url: "/user/" + id,
                method: "POST",
                data: {'id': id, 'status': value},
                dataType: "json",
                success: function (data) {
                    console.log(value);
                    if (value == 0) {
                        $("button.btn_show").find("i").removeClass("fa fa-eye").addClass("fa fa-eye-slash");
                    } else {
                        $("button.btn_show").find("i").removeClass("fa fa-eye-slash").addClass("fa fa-eye");
                    }
                },
            });
        });
    });

When I click on button I want to change its class and icon based on my database value. If value is 0, then button is primary and icon is fa fa-eye and if 1 then fa fa-eye slash and button info. Database value is changing but how do I change button based on value. Thanks in advance.

My need is this

 @if($user->status == 0)
    <button type="button" id="btn_show" data-value="{{ $user->status }}" data-id="{{$user->id}}" class="btn btn-primary btn-sm btn_show"><i
                    class="fa fa-eye"></i>
        </button>
  @else
    <button type="button" id="btn_show" data-value="{{$user->status}}" data-id="{{$user->id}}" class="btn btn-info btn-sm btn_show"><i
                    class="fa fa-eye-slash"></i>
        </button>
@endif

Upvotes: 1

Views: 885

Answers (1)

Ruben Danielyan
Ruben Danielyan

Reputation: 768

You need to set class to current clicked button, so try this

$(".btn_show").click(function () {
    let this_button = $(this);
    let this_button_icon = $(this).find("i"); // Add this to have current button icon instance
    let status = $(this).data('value');
    console.log(value);
    let id = $(this).data('id');
    $.ajax({
        url: "/user/" + id,
        method: "POST",
        data: {'id': id, 'status': value},
        dataType: "json",
        success: function (data) {
        console.log(value);
        // set class to icon
        if (value == 0) {
        this_button_icon.removeClass("fa fa-eye").addClass("fa fa-eye-slash");
        this_button.attr('data-user-id', 1);
        } else {
            this_button_icon.removeClass("fa fa-eye-slash").addClass("fa fa-eye");
            this_button.attr('data-user-id', 0);
        }
    },
});

EDITED: Try this

<button type="button" id="btn_show{{$user->id}}" data-value="{{$user->status}}" data-id="{{$user->id}}" class="btn btn-sm btn_show {{$user->status ? 'btn-info' : 'btn-primary'}}"><i
                class="fa {{$user->status ? 'fa-eye-slash' : 'fa-eye'}}"></i>
    </button>

Upvotes: 1

Related Questions