Question

我正在使用wordpress，一个名为The Events Calendar（很棒的插件btw）的插件，我正在尝试创建一个带有小导航元素的小部件。导航将显示上个月，当前月份和下个月。例如，今天导航将显示“Apr May Jun”。

当您点击“Jun”时应该加载6月份发生的事件。我想通过jquery / ajax magic将这些加载到指定的div中。

我有点工作，但我有一个错误，我不知道如何解决它。当我点击初始显示的月份之一时，它可以正常工作。但是当我点击另一个月时，我正在丢失我的jquery函数（可能是由于页面没有完全重新加载。）

所以，我想知道是否有办法重新初始化导航，以便获得更多点击。

使用代码：

我的sidebar.php文件包含以下代码：

一些HTML

<div id="upcoming-events-box">
<div class="upcoming-events-block-inner">
<div class="upcoming-events-content">

    <div id="EventLoader">
    <?php get_template_part( 'content', 'the-events' ); ?>
    </div>

</div>
</div>
</div>

还有一些Jquery：

<script type="text/javascript">
jQuery(function() {

    jQuery('#upcoming-events-months li a').click(function() {
        var toLoad = jQuery(this).attr('href')+' #EventLoader';
        jQuery('#EventLoader').hide('fast',loadContent);
        jQuery('#load').remove(); 
        jQuery('.upcoming-events-content').append('<span id="load">LOADING...</span>');
        jQuery('#load').fadeIn('normal');


    function loadContent() {
        jQuery('#EventLoader').load(toLoad,'',showNewContent);
    }

    function showNewContent() {
        jQuery('#EventLoader').show('normal',hideLoader);
    }

    function hideLoader() {
        jQuery('#load').fadeOut('normal');
    }
    return false;

    });
});

</script>

调用侧栏的content-the-events.php包含以下代码：

<div id="upcoming-events-months">
 // Some php
global $post;

$current_page_URL = $_SERVER["SERVER_NAME"];

if (isset($_GET['setmonth'])) {
$current_month = $_GET['setmonth'];
 } else {
$current_month = date('M'); // This gets the current month
}

$next_month = date('M', strtotime('+1 month', strtotime($current_month)));
$prev_month = date('M', strtotime('-1 month', strtotime($current_month)));

echo "<ul>";
echo "<li><a href='http://".$current_page_URL."?setmonth=".$prev_month."'
id='".$prev_month."'>".$prev_month."</a></li>";
echo "<li>".$current_month."</li>";
echo "<li><a href='http://".$current_page_URL."?setmonth=".$next_month."'
id='".$next_month."'>".$next_month."</a></li>";
echo "</ul>";
</div>

<div id="content"></div>

<div class="upcoming-event-scroller">
<?php
$all_events = tribe_get_events(array(
'eventDisplay'=>'all',
'posts_per_page'=>-1,
'start_date'=>'01 '.$current_month.' 2012',
'end_date'=>'31 '.$current_month.' 2012'
));

foreach($all_events as $post) {
setup_postdata($post);
?>
<div class="row <?php echo (++$j % 2 == 0) ? 'even' : 'odd'; ?>">
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
<p class="event-date"><a href="<?php the_permalink(); ?>"><?php echo tribe_get_start_date($post->ID, true, 'M j, Y'); ?> - <?php echo tribe_get_end_date($post->ID, true, 'M j, Y'); ?></a></p>
</div>

<?php } //endforeach ?>
<?php wp_reset_query(); ?>
</div>

也许我让自己真的很困惑，试图解决这个问题。哈哈。任何帮助将不胜感激。

Jquery和日历下一个和上个月的按钮

0 个答案: