How to call correctly this function in Ajax?

Question

I have this code:

function changeEventStatusClass(object){
    if ($(object).hasClass("fa-circle")) {
        $(object).removeClass("fa-circle").addClass("fa-circle-o");
        //alert("adevarat");
    } else {
        $(object).removeClass("fa-circle-o").addClass("fa-circle");
    }
}

function changeEventStatus(eventId, status) {
    console.log(eventId, status);
    $.ajax({
        type:'POST',
        data: {
            eventId: eventId,
            status: status,
        },
        url: "<?php echo $this->serverUrl().str_replace('public','',$this->basePath()).'/user/ajaxupdateappointmentstatus'; ?>",
        success: function (result) {
            if (result.success) {
                console.log(eventId);
                changeEventStatusClass(eventId); //here is problem
            }
        }
    });
}

$(".crad").on('click', function(){
    var eventId = $(this).attr('data-id');
    var completed = ($( this ).hasClass("fa-circle-o")) ? true : false;
    console.log(completed);
    if (completed) {
        changeEventStatus(eventId, 7);
    } else {
        changeEventStatus(eventId, 0);
    }
})

<i class="fa fa-circle-o circle crad" data-id="241"></i>
<i class="fa fa-circle-o circle crad" data-id="242"></i>
<i class="fa fa-circle-o circle crad" data-id="243"></i>
<i class="fa fa-circle-o circle crad" data-id="244"></i>

I have a problem when I try to call the function changeEventStatusClass because it is not a parameter ID (it's a data-id );

How to order correctly to make this function? Currently the site is changing class to all buttons and I just want the current one

Can you help me to solve this problem?

Thanks in advance!

Answer 1

You can use Attribute Equals Selector [name=”value”] , Additionally you can also use .toggleClass() to add or remove classes.

function changeEventStatusClass(object){
    $("[data-id='"+object+"']").toggleClass("fa-circle-o fa-circle");
}

However better approach would be to pass the object like

function changeEventStatusClass(element){
    element.toggleClass("fa-circle fa-circle-o");
}

function changeEventStatus(element, status) {
    $.ajax({
        type:'POST',
        data: {
            eventId: element.attr('data-id'),
            status: status,
        },
        url: "<?php echo $this->serverUrl().str_replace('public','',$this->basePath()).'/user/ajaxupdateappointmentstatus'; ?>",
        success: function (result) {
            if (result.success) {
                console.log(eventId);
                changeEventStatusClass(element); //here is problem
            }
        }
    });
}

$(".crad").on('click', function(){
    var element = $(this);
    var eventId = element.attr('data-id');
    var completed = element.hasClass("fa-circle-o");
    if (completed) {
        changeEventStatus(element, 7);
    } else {
        changeEventStatus(element, 0);
    }
})

Answer 2

Basically you need to select the element whose data-id attribute value is passed by doing

object = $( "[data-id='" + object + "']" ); //this line is added

change this method as

function changeEventStatusClass(object) {
    object = $("[data-id='" + object + "']"); //this line is added
    if ($(object).hasClass("fa-circle")) {
        $(object).removeClass("fa-circle").addClass("fa-circle-o");
        //alert("adevarat");
    } else {
        $(object).removeClass("fa-circle-o").addClass("fa-circle");
    }
}