Блог

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

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

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

   echo $calendar;

 ?>
 </div>
  

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

Сначала укажите ваши классы ссылок

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

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

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

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

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

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

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

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

 <script type="text/javascript">

$(document).ready(function() {
    $('.call_wrapper').load('cal.php?month=mamp;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=mamp;year=y'>Prev Month</a>";
    echo "<a class="pagination" href='cal.php?month=mamp;year=y'>Next Month</a>";

    echo $calendar;
?>