My next question is how I am able to querySelectorAll elements which have a certain className and a dataset attribute assigned to false. The following example works as I want it to.

   const huecosDisponibles = document.querySelectorAll('.huecoDisponible[data-listaespera="false"]');
console.log(huecosDisponibles);

<div class="huecoDisponible" data-listaespera="false">hola</div>
<div class="huecoDisponible" data-listaespera="false">hola</div>
<div class="huecoDisponible" data-listaespera="false">hola</div>
<div class="huecoDisponible" data-listaespera="false">hola</div>
<div class="huecoDisponible" data-listaespera="false">hola</div>
<div class="huecoDisponible" data-listaespera="false">hola</div>
<div class="huecoDisponible" data-listaespera="true">hola</div>
<div class="huecoDisponible" data-listaespera="false">hola</div>

Nevertheless, I am trying to apply the same selection technique after performing an Ajax request in a C# razor page and it doesn't happen. The function which contains the ajax request sets some of the boxes to true or false.

In my case, I have to select the ones that they have the dataset attribute to false. I assume that the problem may lie in the document.ready state. I tried moving my variable after the ajax request is completed and still I am getting the same error again and again:

Uncaught ReferenceError: huecosDisponibles is not defined

     

If anyone has any advice which can help me solve this problem, that would be really grateful.

Thanks in advance