Jquery не работает, как ожидалось в цикле Do-While

Question

У меня есть веб-страница, на которой перечислены гостиничные номера, а затем при необходимости отображается календарь доступности для каждого номера.Моя проблема в том, что календарь не всегда отображается.

Список комнат создается с помощью цикла PHP do-while.Каждая запись содержит некоторую информацию и ссылку для просмотра календаря доступности.

<a href="javascript:;" data-roomid="<?php echo $room_id ?>" class="click">See Calendar</a>

Затем этот запрос запускает раскрытие календаря, чтобы открыть его в div класса hiddencal и с тем же data-roomidпо ссылке:

$(document).ready(function() {
    $("a.click").on('click', function() {
        var s = $(this);
        var roomid = $(this).attr("data-roomid");
        $(".hiddencal[data-roomid='" + roomid + "']").load("availcalendar.php?hid=<?php echo $hid;?>&room_id=" + roomid + "&month=<?php echo $ArrMonth;?>&year=<?php echo $ArrYear;?>")
        .slideToggle(1000, function() {
            s.html(s.text() == 'See Calendar' ? 'Hide Calendar' : 'See Calendar');
        });
    });
});

Допустим, в списке четыре комнаты.Если щелкнуть ссылку в первой комнате, отобразится календарь, но если я пойду по нему, щелкнув ссылку во второй комнате, то слайд-тоггл работает, но календаря нет.

И наоборот, если я начну со второйзатем в первую комнату я могу получить оба календаря, но не третий или четвертый.Таким образом, в действительности я могу просматривать календари снизу вверх, но без сверху вниз.

Я попытался отобразить переменные в файле vendcalendar.php, чтобы посмотреть, отбрасываются ли некоторые данные, но я не могу 'отследить проблему.Есть ли что-то, что я упускаю, что очевидно для более опытного глаза, чем мое?

EDIT2 GaetanoM был прав, но это была только одна из двух ошибок, поэтому я изо всех сил пытался понять, что происходит.Я закончил работу с этим кодом, очень похожим на предложение GaetanoM:

$(document).ready(function() {
$("a.click").on('click', function() {
    var s = $(this);
    var roomid = $(this).attr("data-roomid");
$(".hiddencal[data-roomid='" + roomid + "']").load("availcalendar.php?hid=<?php echo $hid?>&room_id=" + roomid + "&month=06&year=2019").slideToggle(1200, function() {
        s.html(s.text() == 'See Calendar' ? 'Hide Calendar' : 'See Calendar');
    });
});
});

В файле utilcalendar.php была еще одна проблема, и как только я их исправил, все было хорошо.Спасибо всем за предложения.

Answer 1

Ваша проблема в этой строке:

$(".hiddencal[data-roomid='" + roomid + "']").load("availcalendar.php?hid=<?php echo $hid;?>&room_id=" + roomid + "&month=<?php echo $ArrMonth;?>&year=<?php echo $ArrYear;?>")

.load (url [, data] [, complete]) : загрузить данные с сервера и поместитьвернул HTML в соответствующие элементы.

complete : функция обратного вызова, которая выполняется после завершения запроса.

Следовательно, для запуска slideToggle вам необходимо использовать complete callback:

$(".hiddencal[data-roomid='" + roomid + "']").load("YOUR URL", function() {
    s.slideToggle(1000, function() {
        s.html(s.text() == 'See Calendar' ? 'Hide Calendar' : 'See Calendar');
    });
});