How to change color when click active or inactive in php using jquery

Question

I want to change color of <i> tag when I click for active and inactive

My ajax code

$('.factive').click(function(){
    var factiveId = $(this).attr('id');
    $.post('controller/ajax-product-active.php?factiveId='+factiveId,
    {},function(data)
    {  
        $('#product-active').html(data);
    });
});

ajax-product-active.php

if ($csrow['status']=='Active') {
    $update_status = mysqli_query($conn,"update products set status = 'Deactive' where id = '{$factiveId}'");

    echo "<a id='$csrow[id]' class='factive' style='cursor: pointer;'  onclick='productActive($csrow[id])'>
        <i class='fa fa-circle pactive' aria-hidden='true'style='color:red' title='Deactive'></i></a>";

}elseif ($csrow['status']=='Deactive') {

    $update_status = mysqli_query($conn,"update products set status = 'Active' where id = '{$factiveId}'");

    echo "<a id='$csrow[id]' class='factive' style='cursor: pointer;'  onclick='productActive($csrow[id])'>
        <i class='fa fa-circle pactive' aria-hidden='true'style='color:#12bc00' title='Active'></i></a>";
}

This code is running successfully but color is changing only first. Whether click on any tag

this is already here check this : https://stackoverflow.com/questions/16598213/how-to-bind-events-on-ajax-loaded-content — Pravin JP, Jul 31 '18 at 05:10

score 0 · Accepted Answer · answered Jul 31 '18 at 06:04

When you click on the active element then you have to get the current value(Active,Deactive) and change the class accordingly

$('.factive').click(function(){
    var currentVal = $(this).find('i').attr('title');
    var addCls = 'active';
    var removeCls = 'deactive';
    var title = 'Active';
    if(currentVal == 'Active'){
      addCls = 'deactive';
      removeCls = 'active';
      title = 'Deactive';
    }
    $(this).find('i').addClass(addCls).removeClass(removeCls);
    $(this).find('i').attr('title',title);
    $(this).find('i').text(title);
 });

.active{color:#12bc00}
.deactive{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id='1' class='factive active' style='cursor: pointer;'>
  <i class='fa fa-circle pactive' aria-hidden='true' title='Active'>Active</i>
  
<a id='2' class='factive deactive' style='cursor: pointer;'>
  <i class='fa fa-circle pactive' aria-hidden='true' title='Deactive'>Deactive</i>
</a>

score 0 · Answer 2 · answered Jul 31 '18 at 06:25

When working with AJAX requests a rule, I use, is to make all the data transferred between backend to client into JSON. Therefore PHP will send its response in JSON, and JS will expect a JSON object back. With that said, let's modify your HTML/CSS/JS in this manner (Note: I am excluding all unrelated info) :

<style>
    .product {
        color: red
    }

    .product.active {
        color: green;
    }
</style>

<a href="#" class="product">
    <i class="fa fa-circle"></i>
</a>

<script>
    $('.product').click(function (e) {
        e.preventDefault();
        var $link = $(this);
        var id = $link.attr('id');

        $.ajax({
            url: 'controller/ajax-product-active.php',
            type: 'post',
            dataType: 'json',
            data: {productId: id},
            success: function (data) {
                if (data.active) {
                    $link.addClass('active');
                } else {
                    $link.removeClass('active');
                }
            }
        });
    });
</script>

In the above modification, I am calling your link .product because that makes the most sense to me, since a "product" can be "active" or "inactive". In the JS, I am changing your $.post to $.ajax to add the dataType: 'json' option which tells it that the expected response should be JSON. We expect the return to be something like {"active":"true"} or {"active":"false"}. Based on that, we either add or remove the .active class to the .product element. Depending on the classes, CSS applies accordingly.

On the PHP side, we would need to do something like this (again, im only including relevant code. $status is the same as the $csrow['status'] you provided):

$response = [];
if ($status === 'Active') {
   $result = mysqli_query($conn, "update products set status = 'Deactive' where id = '{$factiveId}'");
   $response['active'] = false;
} elseif ($status === 'Deactive') {
   $result = mysqli_query($conn, "update products set status = 'Active' where id = '{$factiveId}'");
   $response['active'] = true;
}
header('Content-Type: application/json');
echo json_encode($response);

Notice that we're building the $response array, then returning that to JS as JSON.

Give this structure a go, it will make your code cleaner, and prepare you for a RESTful architecture.

How to change color when click active or inactive in php using jquery

2 Answers2