No post anterior, eu percorri o processo necessário para que os diálogos modais do WordPress apareçam dentro do contexto da área de administração.
Isso usa:
- a API interna do WordPress,
- a biblioteca Thickbox fornecida,
- e algum código de exemplo para exibi-lo.
Neste tutorial, mostrarei como preencher a caixa de diálogo modal com dados. Depois disso, compartilharei como preencher os dados dinamicamente usando Ajax.
Caixas de diálogo modais do WordPress: dados estáticos
Para este post, suponho que você tenha lido o post inicial da série e tenha uma compreensão do que o código está fazendo (embora seja ainda melhor se você tiver algum código funcionando em seu ambiente de desenvolvimento local).
Independentemente disso, vamos falar sobre preencher a meta box com informações. Ou seja, veremos:
- colocando informações no corpo da meta box,
- preenchendo o título com conteúdo.
Feito isso, passaremos a obter informações do servidor de forma assíncrona e, em seguida, preencher o código que temos até agora.
1 Definindo os Dados
Adicionar conteúdo à caixa meta é muito fácil. Relembre do post anterior; temos um elemento HTML que possui um display: none; valor para seu atributo de estilo .
Aqui está a essência original :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
add_thickbox();
?>
<div id="acme-thickbox-demo" class="wrap">
<h1>Acme Thickbox Demo</h1>
<p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.</p>
<div id="acme-thickbox-content">
<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" class="thickbox">Display The Dialog</a>
<div id="acme-modal-dialog" style="display:none;"></div><!-- #acme-modal-dialog -->
</div><!-- #acme-thickbox-content -->
</div><!-- #acme-thickbox-demo -->Adicionar conteúdo à caixa de diálogo modal é fácil. Basta localizar o elemento acme-modal-dialog e preenchê-lo com as informações que você deseja exibir ao usuário.
Por exemplo, veja este exemplo de código :
<div id="acme-modal-dialog" style="display:none;">
<h2>Hello World</h2>
<p>Lucas ipsum dolor sit amet ventress dak jusik chewbacca tenel beru bail anomid hapes mas.</p>
<p>Fel kalee kyle desann. Ozzel p'w'eck jax castell saleucami. Thisspias veila mantell mccool garindan jax.</p>
<p>Barriss kurtzen sing bertroff cody frozarns. Han koon miraluka vau.</p>
<p>
<ul>
<li>Bajic asajj boba raymus dug piell moddell jax darth.</li>
<li>Sio anakin naberrie shistavanen fisto utapau chewbacca aayla.</li>
</ul>
</p>
<p>
Corran axmis kor-uj hutt marek kenobi ansuroer echani. Mirax mara fisto bith tyranus kashyyyk farlander max b'omarr.
Ben dodonna askajian teevan palpatine lobot beru.
</p>
</div><!-- #acme-modal-dialog -->Quando o usuário clicar na âncora do post anterior (aquele que diz Display The Dialog ), então o modal será exibido com o conteúdo que você vê acima.
De um modo geral, deve se parecer com o que você vê acima com base no código descrito na essência.
2 Definir um título
Em seguida, observe que a caixa de diálogo modal inclui uma opção para descartá-la sempre que o usuário terminar de lê-la. Além de oferecer essa capacidade, observe que a área da caixa de diálogo tem muito espaço em branco.
Você sabe o que quero dizer: é uma área que geralmente é relegada a ser usada como uma barra de título. Graças à API Thickbox e sua integração com o WordPress, podemos facilmente adicioná-lo ao nosso título. Pode ser dinâmico (como se a informação viesse via Ajax) ou pode ser estático.
E já que estamos trabalhando com informações estáticas neste post em particular, vamos configurar isso. Para isso, precisamos adicionar um atributo title à âncora responsável por exibir o modal.
Depois de localizar a âncora responsável por acionar a exibição (lembre-se, ela contém o texto Display The Dialog ), adicione um atributo title a ela para que o código fique assim :
<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" title="Hello World" class="thickbox">Display The Dialog</a>Agora, quando você clicar na âncora para acionar a exibição, ela não apenas mostrará a caixa de diálogo como na foto acima, mas também conterá um título:
Útil, certo? Mas e se fosse mais dinâmico?
Agora no Ajax
E a natureza dinâmica é o que pretendo abordar a seguir. Especificamente, estou procurando percorrer o processo de pegar o que temos aqui, que são dados estáticos e substituí-los por informações recuperadas de forma assíncrona.
Ou seja, o usuário clica na âncora Exibir a caixa de diálogo e depois:
- uma solicitação é feita ao servidor,
- os dados são recuperados,
- e, em seguida, as informações são canalizadas para o título e as áreas de conteúdo da caixa de diálogo.
É um pouco melhor do que usar informações estáticas e torna o aplicativo mais dinâmico.