jQuery UI Tabs多标签页日期筛选器同步更新需求

我有5个标签页，每个标签页都包含一个日期筛选器。当前修改其中一个标签页的日期时，其他标签页仍显示当前日期或各自设置的日期，我需要实现修改任意一个标签页的日期后，所有标签页的日期筛选器自动同步为该日期。此外，标签页在主页面中调用，日期控件位于Ajax加载的Timeline页面。

标签页页面（HTML） #

<div id="tabScheduleEvents">
    <ul>
        <cfloop query="qAllScheduleEvents">
            <li><a href="#tab-#qAllScheduleEvents.ScheduleEventID#">#qAllScheduleEvents.Name#</a></li>
        </cfloop>
    </ul>

    <cfloop query="qAllScheduleEvents">
        <cfset Request.Attributes.Shop_LocationID = Variables.LocationID>
        <cfset Request.Attributes.ScheduleEventID = qAllScheduleEvents.ScheduleEventID>

        <div id="tab-#qAllScheduleEvents.ScheduleEventID#">
            <cfinclude template="/scheduler/_ajax/Timeline.cfm">
        </div>
    </cfloop>
</div>

主页面jQuery代码 #

<script>
$(document).ready(function()
{
    $("#tabScheduleEvents").tabs();
});
</script>

Timeline页面（HTML） #

<div>
    <label><strong>Date:</strong></label>
    <input type="text" id="EventDate#Request.Attributes.ScheduleEventID#" name="EventDate" value="#DateFormat(Now(), 'm/d/yyyy')#">
</div>

Timeline页面jQuery代码 #

$('#EventDate<cfoutput>#Request.Attributes.ScheduleEventID#</cfoutput>').change(function()
{
    var EventDate = $(this).val();

    objCal.setOptions(
    {
        'selectedDate': EventDate
    });

    $.getJSON('/scheduler/_ajax/ListScheduleEventJobs.cfm?&StartDate=' + $('#EventDate<cfoutput>#Request.Attributes.ScheduleEventID#</cfoutput>').val(), function (events) {
        objCal.setEvents(events);
    });
});

核心修改思路 #

给所有日期输入框添加统一类名，监听类的change事件，当任意输入框值变化时，同步更新所有输入框的日期，并触发每个标签页对应的日历实例更新事件数据。

1. 修改Timeline页面HTML（添加统一类名） #

给日期输入框加上event-date-input类，方便批量选择和操作：

<div>
    <label><strong>Date:</strong></label>
    <input type="text" class="event-date-input" id="EventDate#Request.Attributes.ScheduleEventID#" name="EventDate" value="#DateFormat(Now(), 'm/d/yyyy')#">
</div>

2. 修改Timeline页面jQuery代码（实现同步逻辑） #

替换原有的单个输入框监听，改为监听类事件，同时处理所有标签页的同步更新：

// 给所有日期输入框绑定change事件
$('.event-date-input').on('change', function() {
    var newDate = $(this).val();
    
    // 1. 同步所有日期输入框的显示值
    $('.event-date-input').val(newDate);
    
    // 2. 获取当前触发事件的输入框对应的ScheduleEventID
    var currentInputId = $(this).attr('id');
    var scheduleEventId = currentInputId.replace('EventDate', '');
    
    // 3. 更新当前标签页的日历实例（假设每个标签页的objCal命名为objCal_xxx）
    var currentObjCal = window['objCal_' + scheduleEventId];
    if (currentObjCal) {
        currentObjCal.setOptions({
            'selectedDate': newDate
        });
        // 重新加载当前日历的事件数据
        $.getJSON('/scheduler/_ajax/ListScheduleEventJobs.cfm?StartDate=' + newDate, function(events) {
            currentObjCal.setEvents(events);
        });
    }
    
    // 4. 同步更新其他标签页的日历实例
    $('.event-date-input').not(this).each(function() {
        var otherEventId = $(this).attr('id').replace('EventDate', '');
        var otherObjCal = window['objCal_' + otherEventId];
        if (otherObjCal) {
            otherObjCal.setOptions({
                'selectedDate': newDate
            });
            // 重新加载其他日历的事件数据
            $.getJSON('/scheduler/_ajax/ListScheduleEventJobs.cfm?StartDate=' + newDate, function(events) {
                otherObjCal.setEvents(events);
            });
        }
    });
});

3. 调整日历实例命名（关键） #

确保每个标签页的objCal实例有唯一命名，比如在初始化日历的时候，用对应的ScheduleEventID作为后缀：

// 示例：在Timeline页面初始化日历的代码中，替换原objCal为带ID的命名
window['objCal_#Request.Attributes.ScheduleEventID#'] = new Calendar({
    // 原有初始化参数
    selectedDate: '#DateFormat(Now(), 'm/d/yyyy')#'
});

这样修改后，任意一个标签页的日期变化都会同步到所有标签页，并且每个标签页的日历都会更新为新日期对应的事件数据。

内容的提问来源于stack exchange，提问作者user2675939