Question 14897 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

IMAGE
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 class="UpdateSectionStatuss btn btn-success me-3 h-50 mt-5 " id="user-{{ $users->id }}"
                            user_id="{{ $users->id }}" href="javascript:void(0)">Verified</p>
                    @else
                        <p class="UpdateSectionStatuss btn btn-danger me-3 h-50 mt-5 " 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 .

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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-danger');
    } else if (res['Verified'] == 1) {
        $("#user-" + user_id).html(
            "<p> Verified </p>"
        )
        $("#user-" + user_id).removeClass('btn-danger');
        $("#user-" + user_id).addClass('btn-success');
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search