Обновление таблицы с JQuery и Ajax

Question

У меня довольно большая страница с большим количеством контента, одна часть которой представляет собой таблицу цен по датам. Как правило, таблица выглядит так:

Ссылки «Previous» и «Next» и datepicker позволяют пользователю показывать другой диапазон дат в таблице. Однако, используя простые html-формы и php/mysql, вся страница обновляется каждый раз, и это выглядит довольно грязно. Я хочу использовать jQuery и Ajax для обновления только таблицы.

С этой целью я поместил таблицу в отдельный файл, используя PHP include(). Этот отдельный файл с именем calendar_inner.php использует переменную $ startdate для выполнения необходимых запросов mysql для получения всех данных для таблицы. Теперь мне просто нужно понять, как подавать включенный файл с новым значением $ startdate, а затем обновлять этот файл. Здесь я нащупываю темноту с помощью jQuery.

Начиная с только даты, я начал писать сценарий jQuery, но неудивительно, что он не работает.

$('#StartDateCal').on('submit', function(g) { 
    g.preventDefault(); //prevent form from submitting 
    var startdate = $("#StartDate").val(); 
    $.ajax ({ 
     type: 'post', 
     url: 'calendar_inner.php', 
     data: data, 
     dataType: 'text' 
    }); 
}); 

Прошу быть ласковым со мной. Мой случайный успех с jQuery был ограничен случаями, когда я смог скопировать чужую часть кода практически дословно. Благодарю.

EDIT Я изменил свой сценарий на основе совета Raslett, но пока не достиг решения.

$('#StartDateCal').on('submit', function(g) { 
    g.preventDefault(); //prevent form from submitting 
    $.ajax ({ 
     type: 'post', 
     url: 'calendar_inner.php', 
     data: $('#StartDateCal').serialize(), 
     success: function(result) { 
      $('#getresult').html(result); 
     } 
    }); 
}); 

Теперь полная страница не обновляется, только файл calendar_inner.php, так что это небольшой успех. Я думаю, теперь проблема заключается в том, что делать с результатом. Используя код выше и размещение

<div id="getresult"></div> 

в начале calendar_inner.php вставляет свою страницу 404 ошибки в общую страницу. Изменение html (результата) на текст (результат) записывает весь код страницы ошибки 404 в одно и то же пространство. То, что я не знаю, это то, что генерируется скриптом, который заставляет сервер ссылаться на страницу 404 Error.

SECOND EDIT Я избавился от ошибки 404. Я неправильно назвал URL. Теперь, когда это исправлено, я приближаюсь, но оставшиеся вещи довольно загадочны. Сценарий теперь записывает первую строку таблицы дважды: один раз с датой начала 1 января и второй раз с исходной датой начала. Итак, теперь все, что мне нужно сделать, это: 1. Убедить первую версию строки таблицы использовать новую дату начала 2. Остановить вторую версию строки таблицы от показа 3. Пропустить дату начала следующей части таблицы, в которой цены рассчитаны и написаны Фу! Не просто.

THIRD EDIT Как сказал Раслатт, jQuery теперь работает, и мне просто нужно отсортировать файл calendar_inner.php. Для простоты я просто помещаю первые несколько строк ниже. Ключевой переменной является $ startdate, которая затем управляет всем остальным. Мне нужно jQuery, чтобы изменить значение $ startdate.

ЧЕТВЕРТЫЙ EDIT Обновлен код calendar_inner.php и показан больше. Смотри ниже.

<div id="getresult"></div> 
<script> 
$(document).ready(function() { 
//Submit change of date in price tab without refreshing page 
$('#StartDateCal').on('submit', function(g) { 
     g.preventDefault(); //prevent form from submitting 
     $.ajax ({ 
      type: 'post', 
      url: '/includes/calendar_inner.php', 
      data: $('#StartDateCal').serialize(), 
      success: function(result) { 
       console.log(result), 
       $('#getresult').html(result); 
      } 
     }); 
    }); 
}); 
</script> 
<?php 
if(isset($_POST['StartDate']) && !empty($_POST['StartDate'])) { 
      $startdate = htmlentities($_POST['StartDate'], ENT_QUOTES); 
      $firstdate = date('Y-m-d',$startdate); 
      $lastdate = date('Y-m-d',strtotime('+11 days',strtotime($firstdate))); 

      // database insertion of above variables 
     }else{ 
      $firstdate = date('Y-m-d',$startdate); 
$lastdate = date('Y-m-d',strtotime('+11 days',strtotime($firstdate))); 
     } 

//Select database 
require_once('../Connections/MySQL.php'); 
mysql_select_db($database_MySQL, $MySQL); 
mysql_set_charset("utf8"); 

// Create a temporary table 
$query_temptable = "CREATE TEMPORARY TABLE temptable (dt DATE NOT NULL)"; 
$result = mysql_query($query_temptable, $MySQL) or die(mysql_error()); 

//Now loop through the date range and fill the temporary table 
$thisdate = $firstdate; 
while (strtotime($thisdate) <= strtotime($lastdate)){ 
$query_insertdate = "INSERT INTO temptable (dt) VALUES ('$thisdate')"; 
$result2 = mysql_query($query_insertdate, $MySQL) or die(mysql_error()); 
$thisdate = date('Y-m-d', strtotime('+1 day', strtotime($thisdate))); 
} 

// MySQL query to get price_id (or blank) for all dates in range 
$query_tariff = "SELECT temptable.dt, lh_dates.tariff_id FROM temptable LEFT JOIN lh_dates ON temptable.dt = lh_dates.dt AND hid = '$hid'"; 
$tariff = mysql_query($query_tariff, $MySQL) or die(mysql_error()); 

// Create array of tariff_ids 
$i = 0; 
$tariff_id_list = array(); 
while ($row_tariff = mysql_fetch_assoc($tariff)) { 
$tariff_id_list[$i] = $row_tariff['tariff_id']; 
$date_list[$i] = $row_tariff['dt']; 
$i++; 
} 
$tariff_id_unique = array_unique($tariff_id_list); 

// Drop the temporary table 
$query_droptable = "DROP TEMPORARY TABLE IF EXISTS temptable"; 
$result3 = mysql_query($query_droptable, $MySQL) or die(mysql_error()); 

//Here we start building the pseudo-table using divs 
echo "<div class='calendar'>"; 
// Dates row 
echo "<div class='toprow'>"; 
echo "<div class='cal_firstcol'>&nbsp;</div>"; 
$i = 0; 
$thisdate=strtotime($firstdate); 
while ($i++ < 12) { 
$day_week = date('D', $thisdate); 
$day_num = date('j', $thisdate); 
$month_name = strtoupper(date('M', $thisdate)); 
echo "<div class='cal_dates'>"; 
echo $day_week."<br><span class='cal_day'>".$day_num."</span><br>".$month_name; 
$thisdate = $thisdate+86400; 
echo "</div>"; 
} 
echo "<div class='clear'></div></div>"; 

// Room rows 
//MySQL query to get rooms 
$query_room = "SELECT room_id, roomtype, normalocc, singleocc, extrabed, childbed, cot FROM lh_rooms WHERE hid = '$hid' ORDER BY orderr ASC"; 
$room = mysql_query($query_room, $MySQL) or die(mysql_error()); 
while ($row_room = mysql_fetch_assoc($room)) { 
foreach ($tariff_id_unique as $value) { 
$tariff_id = $value; 
$room_id = $row_room['room_id']; 
$query_price = "SELECT * FROM lh_prices WHERE tariff_id = '$tariff_id' AND room_id = '$room_id'"; 
$price = mysql_query($query_price, $MySQL) or die(mysql_error()); 
$row_price[$value] = mysql_fetch_assoc($price); 
} 

echo "<div class='row'>"; 
echo "<div class='cal_firstcol'>".$row_room['roomtype']."</div>"; 
$thisdate = $firstdate; 
$i=0; 
while (strtotime($thisdate) <= strtotime($lastdate)){ 
$thisday = strtolower(date('D',strtotime($thisdate))); 
echo "<div class='cal_pricecol'>"; 
if (in_array($thisday, $we_rates)) { 
echo $row_price[$tariff_id_list[$i]]['price_we_std']; 
}else{ 
echo $row_price[$tariff_id_list[$i]]['price_wd_std']; 
} 
echo "</div>"; 
$i++; 
$thisdate = date('Y-m-d',strtotime('+1 day',strtotime($thisdate))); 
} 
echo "</div>"; 

if (($row_room['extrabed']>=1)||($row_room['childbed']>=1)) { 
echo "<div class='row hiddenrow' style='display:none'>"; 
echo "<div class='cal_firstcol'>Child Extra Bed</div>"; 
$thisdate = $firstdate; 
$i=0; 
while (strtotime($thisdate) <= strtotime($lastdate)){ 
$thisday = strtolower(date('D',strtotime($thisdate))); 
echo "<div class='cal_pricecol'>"; 
echo $row_price[$tariff_id_list[$i]]['price_eb_c']; 
echo "</div>"; 
$i++; 
$thisdate = date('Y-m-d',strtotime('+1 day',strtotime($thisdate))); 
} 
echo "<div class='clear'></div></div>"; 
} 

} 

echo "</div>"; 
?> 

ПЯТЫЙ EDIT (!) В ответ на Rasclatt, это то, что таблица выглядит после выполнения сценария. Датпикер, Предыдущая, флажок и далее находятся на родительской странице. Первая строка дат начала 30 сентября - результат скрипта, а вторая строка дат закодирована в calendar_inner.php. Перемещение

<div id="getresult"></div> 

далее по страницам перемещается по первой строке даты соответственно. Код формы для DatePicker является

<form id="StartDateCal"> 
<input type="hidden" name="hid" id="hid" value="<?php echo $hid ?>"> 
<input type="hidden" name="lang" id="lang" value="<?php echo $$ln ?>"> 
From <input name="StartDate" id="StartDate" class="datebox" size="10" value="<?php echo date('j M Y', $startdate) ?>" type="date"> 
<input name="submit" class="button" id="CalSubmitBtn" type="submit" value="Go"> 
</form> 

Answer 1

Это необходимо загрузить форму, то скрипт, который будет автозагрузка таблицы в <div id="get result"></div> контейнер с помощью AJAX. При подаче формы он должен загружаться в одно и то же место, переписывая таблицу. Итак, просто для уточнения, вы не запустили бы php для создания таблицы на исходной странице загрузки. Все, что вы запустили php for, - это рассчитать $hid, $$ln и $startdate. Ваш calendar_inner.php будет содержать только код календаря, а страница загрузки будет содержать только форму и jQuery.

В качестве опции я добавил предпочтение CheckDates(FetchResults), где FetchResults - это имя контейнера. Просто вы можете загрузить его в другое имя контейнера, которое вы можете.

<form id="StartDateCal"> 
<input type="hidden" name="hid" id="hid" value="<?php echo $hid ?>"> 
<input type="hidden" name="lang" id="lang" value="<?php echo $$ln ?>"> 
From <input name="StartDate" id="StartDate" class="datebox" size="10" value="<?php echo date('j M Y', $startdate) ?>" type="date"> 
<input name="submit" class="button" id="CalSubmitBtn" type="submit" value="Go"> 
</form> 
<div id="getresult"></div> 
<script> 
    function CheckDates(FetchResults) 
     { 
      $.ajax ({ 
       type: 'post', 
       url: '/includes/calendar_inner.php', 
       data: $("#StartDateCal").serialize(), 
       success: function(result) { 
       $("#"+FetchResults).html(result); 
       } 
      }); 
     } 
    $(document).ready(function() { 
     // Auto load ajax 
     CheckDates('getresult'); 
     // On submit load ajax 
     $('#StartDateCal').submit(function() { 
      // Add a loader image or text so you know it's refreshing 
      $('#getresult').html("Loading..."); 
      // Run table loader 
      CheckDates('getresult'); 
      return false; 
     }); 
    }); 
</script>