How to change the color of the button after the status change on jquery-CodePudding

Am facing a tiny problem with the status change color of the button does not change remain the same but when reloading the page color of the button changes. I Change the status from active to inactive text change and appear in-active but the color remains the same until I refresh the page.

This is my Blade Code to show active or inactive

@if ($users->verified == 1)
                 <p  id="user-{{ $users->id }}"
                            user_id="{{ $users->id }}" href="javascript:void(0)">Verified</p>
                    @else
                        <p  id="user-{{ $users->id }}"
                            user_id="{{ $users->id }}" href="javascript:void(0)">Un-Verify</p>
                    @endif

**Here is my Script Code **

$(".UpdateSectionStatuss").click(function() {
    var verified = $(this).text();
    var user_id = $(this).attr("user_id");
    // console.log(verified);
    $.ajax({
        type: 'POST',
        url: "{{ URL::to('User_profile_status') }}",
        data: {
            verified: verified,
            user_id: user_id
        },
        success: function(res) {
            if (res['Verified'] == 0) {
                $("#user-"   user_id).html(
                    "<p class='UpdateSectionStatuss' href='javascript:void(0)'> Un-Verify </p>"
                )
            } else if (res['Verified'] == 1) {
                $("#user-"   user_id).html(
                    "<p class='UpdateSectionStatuss' href='javascript:void(0)'> Verified </p>"
                )
            }
        },
        error: function() {
            alert("Error");
        }

    });

});

I want to output when click on status change the color of a button also change.That's it .

CodePudding user response：

Yea, what you have done is good but it's kind of static on one way. With PHP/Blade, you are dumping the IF/ELSE code blocks only once. You can't see the other UI side without refreshing the page. You need to work with either Jquery or Javascript to manipulate the dom. And then add or remove classes based on it dynamically to make it behave the way you want.

.getByElementId('someId')

then followed by,

 element.classList.add("btn-danger");

can do the trick for you.

CodePudding user response：

try this in success function

success: function(res) {
    if (res['Verified'] == 0) {
        $("#user-"   user_id).html(
            "<p> Un-Verify </p>"
        )
        $("#user-"   user_id).removeClass('btn-success');
        $("#user-"   user_id).addClass('btn btn-danger');
    } else if (res['Verified'] == 1) {
        $("#user-"   user_id).html(
            "<p> Verified </p>"
        )
        $("#user-"   user_id).removeClass('btn-danger');
        $("#user-"   user_id).addClass('btn btn-success');
    }
}