Ajax reload frame работает только один раз

Question

У меня есть расписание на моем сайте.Пользователь может выбрать несколько раз.Выбранное время вставляется в базу данных, и кнопка становится зеленой с красной, чтобы пользователь знал, что она отключена.

Я хочу сделать это только с перезагрузкой div.Он работает, но работает только один раз, при повторном нажатии кнопки div не обновляет / перезагружает.

Обновление базы данных / обновление;

    $('.updateTime').click(function(){
        var getUrlParameter = function getUrlParameter(sParam) {
            var sPageURL = window.location.search.substring(1),
                sURLVariables = sPageURL.split('&'),
                sParameterName,
                i;

            for (i = 0; i < sURLVariables.length; i++) {
                sParameterName = sURLVariables[i].split('=');

                if (sParameterName[0] === sParam) {
                    return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
                }
            }
        };


        var uniqueId = $(this).attr('id');
        var sdate = getUrlParameter('date');

        $.ajax({
            url: './ajax/reservation_insert_times.php',
            type: 'POST', 
            data: {
                uniqueId :uniqueId, sdate :sdate
            },

            success: function(mydiv){
            $("#result").load(location.href+ ' #mydiv');
            }

        });
    });

Код для генерациивремя

    <div class="row" id="result">

        <?          
        $result = array();  
        $query = $db->query("SELECT * FROM reservation_times WHERE datum = '" . db_escape($_GET['date']) . "' ");
        while($row = mysqli_fetch_array($query)) {
        $result[] = $row['time']; 
        }           
    ?>
    <?
    $timestamp = strtotime(date("Y-m-d")." 12:00");

    for ($i=0;$i<=32;$i++) {

        $time = date('H:i', $timestamp);
        $time .= ' UUR';

        if (in_array($time, $result)) {
            $color = "background-color:red !important";
        }
        else $color = "";

        $timestamp += 15 * 60; 

        if (isset($checked) && $checked !='') { $color = 'background-color: red;';}?>

            <div class="col-xs-4 col-md-3 col-lg-2" id="mydiv">
                <button type="button" id="<?=$time;?>" class="btn btn-block btn-success btn-sm text-center" style="padding:10px; margin-bottom:10px; <?=$color;?>" onclick="" <? if (isset($checked) && $checked !='') { echo 'disabled';}?>>
            <?=$time;?>
                </button>
            </div>

        <? } ?>       
    </div>

Код для вызова booking_availablity.php:

    $query = $db->query("SELECT * FROM reservation_times WHERE time = '".$uniqueId."'");
if(mysqli_num_rows($query) == 1) {
    $remove = $db->query("DELETE FROM reservation_times WHERE time = '".$uniqueId."'");
} else {
    if (isset($uniqueId) && $uniqueId !='') :
        $sql = $db->query("INSERT INTO reservation_times (time, datum)
    VALUES ('".$uniqueId."', '".$newDate."')");
    endif;
}

Answer 1

Измените success метод вашего ajax:

$.ajax({
        url: './ajax/reservation_insert_times.php',
        type: 'POST', 
        data: {
            uniqueId :uniqueId, sdate :sdate
        },

        success: function(mydiv){
            $("#result").html(mydiv);    
        }

    });

Вы отправляете ajax для получения нового контента, но затем в методе success вместо загрузки нового контента, полученного как ответ ajax, вы снова загружаете контент того же самого div. Вот почему он работает в первый раз, но останется неизменным в следующий раз.

//Wrong
$("#result").load(location.href+ ' #mydiv'); 

// Correct
$("#result").html(mydiv);

Итак, теперь, когда эта ajax отправляет на сервер, она обновляет содержимое div#result. И чтобы позволить пользователю вручную обновлять содержимое этого div по мере необходимости, вам нужно будет вызвать этот ajax после нажатия кнопки, помеченной как Refresh Timetable.