AjaxBundle
1.0.0
Este pacote oferece uma estrutura simples para executar ações Ajax. Para cada tipo de ação (link ou formulário), você deve adicionar um data-toggle="ajax" à tag ( a , form ) e especificar o id do container a ser atualizado no atributo update.
Com o compositor:
Adicione esta linha em seu arquivo compositor.json:
"troopers/ajax-bundle": "dev-master"
Declare o pacote em seu AppKernel.php:
public function registerBundles() {
$bundles = array(
[...]
new TroopersAjaxBundleTroopersAjaxBundle(),
[...]Se você instalou nosso pacote AsseticInjectorBundle:
Obrigada, você é incrível para nós ;)
Pode "simplesmente funcionar", mas se não, você terá que verificar as tags do injetor em seus blocos javascript ( injector="foot" ) e folha de estilo ( injector="head" ).
normal Basta carregar ajax.js e ajax.css no seu modelo:
<!DOCTYPEhtml><html><head>...
{% folhas de estilo de bloco %}<link rel="stylesheet" href="{{ asset('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}</head><body>. ..
{% block javascripts %}<!-- Certifique-se de ter o jquery carregado antes --><script type="text/javascript" src="{{ asset('bundles/troopersajax/js/ajax.js') }} "></script>{% endblock %}</body></html><a href="ajaxCall" data-toggle="ajax" data-update="updater-container">Click me</a> <div id="updater-container">Here will stand the ajaxCall response</div>
<form action="ajaxAction" method="POST" data-toggle="ajax" data-update="updater-ajaxAction-container"> <input type="submit" value="Ok save me" /> </form> <div id="updater-ajaxAction-container">Here will stand the ajaxAction response</div>
<a data-toggle="ajax" data-form="#search" data-update="result-panel" data-update-strategy="append" href='your_url'> Show more </a>
Se o link contiver a propriedade data-form, ele enviará o formulário usando as propriedades do link.
Você pode enviar automaticamente uma solicitação ajax para atualizar seu formulário quando uma entrada/seleção for alterada, basta adicionar o atributo de dados "data-refreshonchange":
<select name="category" data-refreshonchange="true"><option value="transport">Transporte</option><option value="estrutura">Estrutura</option></select>
Então na ação do seu controlador:
if ($request->query->get('novalidate', false) === false) {if ($form->isValid()) {// form is valid} else {// evite exibir erros quando novalidate $form = $formFactory->createForm();$form->setData($user);
}
}Por algum motivo, você não atualizaria algumas partes do seu formulário (por exemplo, um input type="file"). Em seguida, adicione o atributo de dados 'data-ignoreonchange="$some_unique_id"'.
Como você provavelmente notou, você pode definir automaticamente um contêiner para sua resposta ajax. Na verdade, você pode fazer alguns outros recursos:
O atributo data-update-strategy é usado para definir a função a ser usada para integrar seu conteúdo ajax com o contêiner já definido usando o atributo data-update. Então, se quiser, você pode dizer à biblioteca para colocar depois, antes, anexar, preceder ou uma função personalizada. Observe que o comportamento padrão é simplesmente substituir o conteúdo do contêiner pela função html.
Vejamos um exemplo. Se você deseja que seu conteúdo ajax seja simplesmente adicionado no final do seu contêiner, aqui está o seu código:
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-update-strategy="append">Click me</a> <div id="updater-container">This sentence will stay here and the ajax content will be displayed just after</div>
Por padrão, quando carregamos o conteúdo ajax, um pequeno efeito é executado: hide + fadeIn (se o contêiner não estiver vazio) hide + slideDown (se o contêiner estiver vazio). Se esse efeito não atender às suas necessidades, você poderá definir o seu próprio preenchendo o atributo data-effect. Por exemplo :
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-effect="slideDown">Click me</a> <div id="updater-container">This container will be hidden, the ajax content will be placed here and then the slideDown function will be used to display this</div>
Se você não quiser nenhum efeito, basta adicionar o atributo de dados noEffect na tag do link (ou destino). Por exemplo, no link:
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-noEffect=true>Click me, no effect</a> <div id="updater-container">This container will be hidden without any effect if you click</div>
ou diretamente no alvo:
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container">Click me, no effect</a> <a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-effect="fadeIn">Click me (fadeIn)</a> <div id="updater-container" data-noEffect=true>This container will be hidden with or without an effect, according by the link you choose</div>
Neste último exemplo, o primeiro link fará a chamada ajax sem nenhum efeito por causa do data-noEffect no contêiner de destino e o segundo, por causa de sua substituição, acionará um efeito fadeIn.
Este é o mais novo da família de recursos ajax, agora você pode simplesmente acionar o modal bootstrap simplesmente adicionando data-toogle="modal" no link que você decidir:
<a href="ajaxCall" data-toogle="ajax-modal">Click me and the ajax result will pop in a beautiful popup</a>
Isso funcionará "como está", mas para ter uma aparência legal, você terá que adicionar a marcação correta dentro do modal. Mais informações no documento modal Twitter Bootstrap
AjaxBundle vem com um carregador padrão e uma sobreposição. Se desejar, você pode alterá-lo definindo a marcação do carregador que deseja usar em window.loader
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>{% block title %}Bem-vindo!{% endblock %}</title>{% block stylesheets %}<link rel="stylesheet" href="{{asset('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}<link rel="icon" type="image/x-icon" href="{{asset('favicon.ico') }}" /></head><body>{% block body %}{% endblock %}
{% bloquear javascripts %}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript ">window.loader = '<div id="canvasloader-container" style="display: none;"><img src="{{asset('/img/loading.gif') }}" style="largura: 80%; padding-top: 15px;"/></div>';window.loaderOverlay = null;</script><script type="text/javascript" src="{{ asset('bundles/troopersajax/js/ajax.js') }}"></script>{% endblock %}</body></html> Este exemplo dirá ao ajax.js para usar /img/loading.gif e desativará a sobreposição.
