1. Como funciona

Adicione y2-ajax em qualquer elemento. Ao disparar o trigger, o data-y2-ajax busca a URL, injeta o HTML no destino e cuida de tudo automaticamente: executa scripts, injeta CSS e reinicializa todos os módulos Y2 - como se fosse um carregamento de página completo.

2. Triggers

3 modos de disparo - click, load automático e hover prefetch.

3. Efeitos de Entrada

Use y2-effect para animar o conteúdo ao ser injetado. O destino recebe .is-ldg durante o carregamento e .y2-fx-{efeito} ao injetar.

/* Estado de loading - personalize como quiser */
#box.is-ldg { opacity: .4; pointer-events: none; }

Fade (5)

Slide (4)

Básicos (9)

Flip (4)

Avançados (9)

4. AJAX Interno

Com y2-src o conteúdo é copiado de uma DIV oculta na própria página - sem requisição HTTP.

Use <template> ou <div style="display:none"> como fonte. Após a injeção, Y2.reinit() é chamado automaticamente.

Demo - AJAX Interno

5. API JavaScript

Dispare carregamentos programaticamente sem HTML declarativo.

// Carregar conteúdo via GET
Y2Ajax.load('/api/lista', '#resultado');

// Com opções
Y2Ajax.load('/api/lista', '#resultado', {
    effect: 'fade',   // 'fade' | 'none'
    push: true        // atualiza a URL no navegador
});

// POST com dados
Y2Ajax.post('/api/salvar', { nome: 'João', idade: 30 }, '#resposta');

// POST com FormData (upload de arquivo)
const fd = new FormData(document.querySelector('#meuForm'));
Y2Ajax.post('/api/upload', fd, '#resultado');

// Eventos disponíveis no elemento trigger
el.addEventListener('yd:ajax:start', ({ detail }) => {
    console.log('Buscando:', detail.url);
    showSpinner();
});

el.addEventListener('yd:ajax:done', ({ detail }) => {
    console.log('Concluído. Destino:', detail.dest);
    hideSpinner();
});

el.addEventListener('yd:ajax:error', ({ detail }) => {
    console.error('Erro:', detail.err);
    Y2Alert.err('Falha ao carregar conteúdo.', 5000);
});

6. Padrões Reais

Casos de uso comuns em aplicações.

// Enviar form via JS com feedback
async function salvarForm() {
    const fd = new FormData(document.querySelector('#form'));

    document.querySelector('#form')
        .addEventListener('yd:ajax:done', () => {
            Y2Alert.ok('Dados salvos!', 3000, 'tr');
        }, { once: true });

    Y2Ajax.post('/api/salvar', fd, '#resposta');
}

7. Reinit Automático

Após cada carregamento, Y2.reinit(dest) é chamado automaticamente - todos os módulos Y2 no novo conteúdo são inicializados sem nenhuma configuração extra.

// Manual: reinicializar módulos em um container específico
Y2.reinit(document.querySelector('#meu-container'));

// Global: reinicializar tudo
Y2.reinit();

8. Quick Reference