How to accses to laravel if-else variable with jquery

Question

I have a dating project. We are using laravel 6 and jquery 3.4.1

The problem is that I need to draw a div when receiving AJAX.

So, javascript and blade template :

static countNewMessages() {
    $.get('/some/link/here', results => {
      let total = 0;
      if (results.length === 0) {
        $('.chat__list-block').each(function (index) {
          $(this).removeClass('chat__list-block_new');
        });
        $('.chat__list-non-read-counter').addClass('chat__list-non-read-counter_hidden').each(function (index) {
          $(this).text('');
        });
        $('#number-of-new-messages').addClass('d-none').removeClass('d-flex').html('');
        $('#inbox-messages-count-title').html('0');

        return false;
      }

      results.forEach(v => {
        if (Chat.containers?.threads) {
          let threadElement = $('.chat__list-block[data-pid=' + v.from_userid + ']');

          threadElement.addClass('chat__list-block_new');
          threadElement.find('.chat__list-non-read-counter')
            .addClass('chat__list-non-read-counter_hidden')
            .text(v.count);

          if (0 < threadElement.length && !threadElement.hasClass('chat__list-block_active') && 0 < v.count) {
            threadElement.find('.chat__list-non-read-counter')
              .removeClass('chat__list-non-read-counter_hidden');
          }
        }

        total += v.count;
        $('#number-of-new-messages').addClass('d-flex').removeClass('d-none').html(total);
        $('#inbox-messages-count-title').html(total);
      });
    });
  }

@if(count($threads))
<div>Chat requests</div>
@else
<div>No chat requests</div>
@endif

 Run code snippet

Expand snippet

The standard if-else behavior in the template suits me fine. If a user visits the page but has no messages the second block is displayed, and if he has messages the first block is displayed. But if a user who is on the block "no chat requests" and receives new messages then the block "chat requests" is rendered only after a full refresh of the page.

If you need more information, please let me know

Answer 1

Try this :

@if(count($threads))
   <div data-threads-count="{{ count($threads) }}">Chat requests</div>
@else
   <div data-threads-count="{{ count($threads) }}">No chat requests</div>
@endif

Now you can access threads count by using data function in jquery ex :

$(selector).data('threads-count');