Laravel应用中基于jQuery的Tab页数据懒加载与事件绑定实践

<ul class="nav nav-pills">
    <li class="nav-item" style="width: 10%">
        <a class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
    </li>
    <li class="nav-item" style="width: 10%">
        <a class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
    </li>
</ul>

<script type="text/javascript">
function getPurchasesPayments(vendor_id,start_date,end_date){
    // ... AJAX code to fetch purchase payments data
}

$(document).ready(function(){
    var vendor_id = "<?= $vendor->id; ?>";
    var start_date = "<?= $start_date;?>";
    var end_date = "<?= $end_date;?>";

    if ($('.purchases-payments').length > 0) {
        // 尝试绑定点击事件，但选择器和方法使用可能存在问题
        $('div').click('.purchases-payments',function(e){ 
            $('.purchases-payments-details').html('');
            getPurchasesPayments(vendor_id,start_date,end_date);
            e.preventDefault();
            return false;
        });
    }

    if ($('.liquidations').length > 0) {
        // 尝试绑定点击事件，同样存在问题
        $('div').click('.liquidations',function(e){
            alert('test'); // 预期未触发
            e.preventDefault();
            return false;
        });
    }
});
</script>

<ul class="nav nav-pills">
    <li class="nav-item" style="width: 10%">
        <a id="purchasesTab" class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
    </li>
    <li class="nav-item" style="width: 10%">
        <a id="liquidationsTab" class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
    </li>
</ul>

<script type="text/javascript">
// 定义数据加载函数
function getPurchasesPayments(vendor_id, start_date, end_date){
    // 实际的AJAX请求，用于获取采购/支付数据
    console.log('Fetching Purchase/Payments data for vendor:', vendor_id);
    // 示例：使用jQuery.ajax
    $.ajax({
        url: '/api/purchases-payments', // 你的API端点
        method: 'GET',
        data: { vendor_id: vendor_id, start_date: start_date, end_date: end_date },
        beforeSend: function() {
            // 显示加载指示器
            $('.purchases-payments-details').html('<p>Loading purchases data...</p>');
        },
        success: function(response) {
            // 更新内容区域
            $('.purchases-payments-details').html(response.html); // 假设API返回HTML片段
            console.log('Purchase/Payments data loaded.');
        },
        error: function(xhr, status, error) {
            // 处理错误
            $('.purchases-payments-details').html('<p class="text-danger">Error loading data: ' + error + '</p>');
            console.error('Error fetching purchase/payments data:', error);
        }
    });
}

function getLiquidations(vendor_id, start_date, end_date){
    // 实际的AJAX请求，用于获取清算数据
    console.log('Fetching Liquidations data for vendor:', vendor_id);
    // 示例：使用jQuery.ajax
    $.ajax({
        url: '/api/liquidations', // 你的API端点
        method: 'GET',
        data: { vendor_id: vendor_id, start_date: start_date, end_date: end_date },
        beforeSend: function() {
            // 显示加载指示器
            $('.liquidations-details').html('<p>Loading liquidations data...</p>');
        },
        success: function(response) {
            // 更新内容区域
            $('.liquidations-details').html(response.html); // 假设API返回HTML片段
            console.log('Liquidations data loaded.');
        },
        error: function(xhr, status, error) {
            // 处理错误
            $('.liquidations-details').html('<p class="text-danger">Error loading data: ' + error + '</p>');
            console.error('Error fetching liquidations data:', error);
        }
    });
}

$(document).ready(function(){
    var vendor_id = "<?= $vendor->id; ?>";
    var start_date = "<?= $start_date;?>";
    var end_date = "<?= $end_date;?>";

    // 绑定采购/支付Tab的点击事件
    $('#purchasesTab').click(function(e){ 
        // 阻止默认的锚点跳转行为，因为我们希望通过JS控制内容加载
        e.preventDefault(); 
        // 调用加载函数
        getPurchasesPayments(vendor_id, start_date, end_date);
    });

    // 绑定清算Tab的点击事件
    $('#liquidationsTab').click(function(e){ 
        // 阻止默认的锚点跳转行为
        e.preventDefault(); 
        // 调用加载函数
        getLiquidations(vendor_id, start_date, end_date);
    });

    // 初始加载：当页面加载完成时，如果“采购/支付”Tab是默认激活的，则立即加载其数据
    // 注意：Bootstrap的data-toggle="pill"会自动处理Tab的激活状态，
    // 但数据加载需要手动触发。
    // 可以检查哪个Tab是active来决定初始加载哪个数据。
    if ($('#purchasesTab').hasClass('active')) {
        getPurchasesPayments(vendor_id, start_date, end_date);
    }
});
</script>

// ... (定义getPurchasesPayments和getLiquidations函数，如上所示)

// 假设你的HTML中存在用于显示内容的div
// <div class="tab-content">
//     <div class="tab-pane fade show active" id="purchases-payments-tab">
//         <div class="purchases-payments-details"></div>
//     </div>
//     <div class="tab-pane fade" id="liquidations-tab">
//         <div class="liquidations-details"></div>
//     </div>
// </div>