Ajax script only changes styles after page reload?

Question

PHP

Hello. It is necessary to implement "Selected goods" on the website of the online store on Bitrix.
I found a solution on the Internet that works, but not completely.

The bottom line is this: create a php file with the code:

<?
global $USER;
if (CModule::IncludeModule ( "iblock" )) {
    $elId = intval ( $_REQUEST ["elid"] );
    $userId = $USER->GetID (); 
    $dbEl = CIBlockElement::GetList ( Array (), Array ("ID" => $elId, "IBLOCK_ID" => "2" ) );

    if ($obEl = $dbEl->GetNextElement () AND !empty($userId)) {
        $props = $obEl->GetProperties ();
        $UserList = array_unique($props["F_USER"]["VALUE"]); 
            if(!in_array($userId, $UserList)) {
                $UserList[] = $userId;
                CIBlockElement::SetPropertyValueCode ($elId, "F_USER", $UserList);
                echo "done";
            }
            else {
                $key = array_search($userId, $UserList);
                unset($UserList[$key]);
                CIBlockElement::SetPropertyValueCode ($elId, "F_USER", $UserList);
                echo "deleted";
            }
    }
    else {
        echo "fail";
    }
}
exit;?>

In the bitrix.section component, in the place where the link is needed, the following code:

<?if(in_array($USER->GetId(),$arItem["PROPERTIES"]["F_USER"]["VALUE"])){
  $check = " checked";
}
else{
  $check = "";
};?>
<a href="#" class="catalog-item-fav favorite_check<?=$check?>" data-id="<?=$arItem['ID']?>"></a>
  <div class="favorit_label"> <?=$val?></div>

All this is handled by a script with ajax function:

<script>
$("document").ready(function(){
  $(".favorite_check").click(function(e){
    e.preventDefault();
    var $this = $(this);
      $.get("/personal/favoriteajax.php", {
        elid: $this.data('id')
      }, function(data){
        switch(data){
          case 'done' : var response = 'Товар успешно добавлен в избранное';$this.addClass("checked");break;
          case 'deleted' : var response = 'Товар успешно удален из избранного';$this.removeClass("checked");break;
          case 'fail' : var response = 'Вы не авторизованы, либо Ваш запрос некорректен';$this.removeClass("checked");break;
        }
$(".favorit_label").html(response).fadeIn().delay(2000).fadeOut();
      });
    });
});
</script>

The F_USER property is created in the product properties and everything is already tied to it.

What works: the script works when clicked, i.e. accesses the php document. The F_USER property is set for the product, i.e. the product is added to favorites.

What doesn't work: the script has a function to add the "checked" class to the link. This is necessary in order to hang the necessary styles on this class. There is also a function to display a message that the product has been added. All this should happen at once, without reloading the page - I clicked on the link, it changed color and the message popped up. It doesn't work for me. Moreover, the class is added only when I "reset the cache".

What could be wrong? Thank you.

Answer 1

I solved the issue myself! in the php file did not add the line before the code:
<? require($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php');?>
After adding everything worked!

Answer 2

bitrix.section - lies in the cache, but you do not have any event that would update the cache of the component