AjaxBundle
1.0.0
Этот пакет предлагает простую структуру для запуска действий ajax. Для каждого типа действия (ссылки или формы) вам необходимо добавить data-toggle="ajax" к тегу ( a , form ) и указать идентификатор обновляемого контейнера в атрибуте обновления.
С композитором:
Добавьте эту строку в свой файл композитора.json:
"troopers/ajax-bundle": "dev-master"
Объявите пакет в своем AppKernel.php:
public function registerBundles() {
$bundles = array(
[...]
new TroopersAjaxBundleTroopersAjaxBundle(),
[...]Если вы установили наш пакет AsseticInjectorBundle:
Спасибо, вы для нас супер;)
Это может «просто работать», но если нет, вам придется проверить теги инжектора в блоках javascript ( injector="foot" ) и таблице стилей ( injector="head" ).
normal способ Просто загрузите ajax.js и ajax.css в свой шаблон:
<!DOCTYPE html><html><head>...
{% таблиц стилей блока %}<link rel="stylesheet" href="{{ assets('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}</head><body>. ..
{% блокирует javascript %}<! – Обязательно загрузите jquery перед --><script type="text/javascript" src="{{ assets('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>
Если ссылка содержит свойство data-form, форма будет отправлена с использованием свойств ссылки.
Вы можете автоматически отправлять запрос ajax для обновления формы при изменении ввода/выбора, просто добавьте атрибут данных «data-refreshonchange»:
<select name="category" data-refreshonchange="true"><option value="transport">Транспорт</option><option value="structure">Структура</option></select>
Затем в действии вашего контроллера:
if ($request->query->get('novalidate', false) === false) {if ($form->isValid()) {// форма действительна} else {// избегать отображения ошибок при novalidate $form = $formFactory->createForm();$form->setData($user);
}
}По какой-то причине вы не обновили некоторые части формы (например, input type="file"). Затем добавьте атрибут данных data-ignoreonchange="$some_unique_id"'.
Как вы, наверное, заметили, вы можете автоматически установить контейнер для вашего ответа ajax. На самом деле, вы можете сделать некоторые другие функции:
Атрибут data-update-strategy используется для определения функции, которая будет использоваться для интеграции вашего ajax-контента с уже установленным вами контейнером с помощью атрибута data-update. Поэтому, если вы хотите, вы можете указать библиотеке, чтобы она помещала после, перед, добавлением, добавлением в начало или пользовательской функцией. Обратите внимание: по умолчанию содержимое контейнера просто заменяется функцией html.
Давайте возьмем пример. Если вы хотите, чтобы ваш ajax-контент просто добавлялся в конец вашего контейнера, вот ваш код:
<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>
По умолчанию, когда мы загружаем ajax-контент, запускается небольшой эффект: скрыть + FadeIn (если контейнер не пуст) скрыть + слайдDown (если контейнер пуст). Если этот эффект не соответствует вашим потребностям, вы можете установить свой собственный, заполнив атрибут data-effect. Например :
<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>
Если вам не нужен какой-либо эффект, вы можете просто добавить атрибут данных noEffect в тег ссылки (или целевой объект). Например, по ссылке:
<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>
или прямо на цель:
<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>
В этом последнем примере первая ссылка выполнит вызов ajax без какого-либо эффекта из-за data-noEffect в целевом контейнере, а вторая из-за его переопределения вызовет эффект FadeIn.
Это самая младшая из семейства функций ajax, теперь вы можете просто запустить модальную загрузку, просто добавив data-toogle="modal" в ссылку, которую вы решите:
<a href="ajaxCall" data-toogle="ajax-modal">Click me and the ajax result will pop in a beautiful popup</a>
Это будет работать «как есть», но чтобы выглядеть круто, вам придется добавить правильную разметку внутри модального окна. Дополнительную информацию можно найти в модальном документе Twitter Bootstrap.
AjaxBundle поставляется с загрузчиком по умолчанию и оверлеем. Если хотите, вы можете изменить его, определив разметку загрузчика, который вы хотите использовать, в window.loader
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>{% название блока %}Добро пожаловать!{% endblock %}</title>{% таблицы стилей блока %}<link rel="stylesheet" href="{{ assets('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}<link rel="icon" type="image/x-icon" href="{{ assets('favicon.ico') }}" /></head><body>{% body body %}{% endblock %}
{% блокирует javascript %}<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="{{ assets('/img/loading.gif') }}" style="width: 80%; papding-top: 15px;"/></div>';window.loaderOverlay = null;</script><script type ="text/javascript" src="{{ assets('bundles/troopersajax/js/ajax.js') }}"></script>{% endblock %}</body></html> В этом примере ajax.js будет указан использовать /img/loading.gif и отключено наложение.
