Основной AJAX получить запрос

Question

Я делаю календарь с 2 ссылками, одна для возврата на месяц, а другая для перехода на месяц.

Это мой файл cal.php:

<div class='cal_wrapper' id='cal'>
 <?php
   echo "<a href='cal.php?month=m&year=y'>Prev Month</a>";
   echo "<a href='cal.php?month=m&year=y'>Next Month</a>";

   echo $calendar;

 ?>
 </div>

Я пытаюсь использовать jquery / ajax, чтобы обновить содержимое внутри div cal_wrapper без обновления страницы.Я выгляжу тяжело, но не могу найти никаких примеров того, как это можно сделать без использования HTML-формы.Как я могу отправить 2 переменные через запрос GET, месяц и год, должно быть довольно простым ... но я собираюсь косоглазие, пытаясь найти что-то в интернете ..

Answer 1

Сначала дайте ссылку на классы

echo "<a class='month_selector' href='cal.php?month=m&year=y'>Prev Month</a>";
echo "<a class='month_selector' href='cal.php?month=m&year=y'>Next Month</a>";

Затем загружайте содержимое запроса ajax в div обертки при каждом щелчке по одной из этих ссылок.

$('#cal_wrapper a.month_selector').live(function(e){
     $('#cal_wrapper').load( $(this).attr('href') ); 
     e.preventDefault(); 
}); 

РЕДАКТИРОВАТЬ, вы можете использовать .load для загрузки фрагментов страницы, используя #wrapper_div

$('#cal_wrapper a.month_selector').live('click', function(e){
     $('#cal_wrapper').load( $(this).attr('href') + ' #wrapper_div' ); 
     e.preventDefault(); 
}); 

Так что оберните ваш div cal_wrapper в #wrapper_div и приведенный выше код загрузит только содержимое оболочки div. Используйте live вместо click, так как вы динамически вставляете ссылки.

Answer 2

Просто исправлю ответ выше.Вам необходимо использовать метод jquery «live», потому что содержимое элемента cal_wrapper будет меняться (всякий раз, когда вы нажимаете на ссылку «next / prev»)

Поместите содержимое ниже в «основной файл».Первая загрузка (внутри onready) будет загружать первый месяц и год.

<script type="text/javascript">

$(document).ready(function() {
    $('.call_wrapper').load('cal.php?month=m&year=y');

    $('.cal_wrapper a.pagination').live('click', function(){
        var link = $(this).attr('href');
        $('.cal_wrapper').load(link); 
        e.preventDefault();
    });
});

</script>

<div class='cal_wrapper' id='cal'></div>

И ваш cal.php (удалите тег div из него)

<?php
    echo "<a class="pagination" href='cal.php?month=m&year=y'>Prev Month</a>";
    echo "<a class="pagination" href='cal.php?month=m&year=y'>Next Month</a>";

    echo $calendar;
?>