troopers/ajax-bundle
Composer 安装命令：
composer require troopers/ajax-bundle
包简介
Symfony AjaxBundle
关键字：
README 文档
README
TroopersAjaxBundle
Description
This bundle offers a simple structure to run ajax actions. For each kind of action (link or form), you have to add a data-toggle="ajax" to the tag ( a, form ) and to specify the id of the container to update in the update attribute.
Installation
With Composer :
Add this line in your composer.json file :
"troopers/ajax-bundle": "dev-master"
Declare the bundle in your AppKernel.php:
public function registerBundles() {
$bundles = array(
[...]
new Troopers\AjaxBundle\TroopersAjaxBundle(),
[...]
Configuration
AsseticInjectorBundle way
If You have installed our AsseticInjectorBundle bundle:
- Thank you, you are awesome for us ;)
- It may "just work" but if not, you'll have to check the injector tags in your javascript (
injector="foot") and stylesheet (injector="head") blocks.
The normal way
Just load ajax.jsand ajax.css in your template:
<!DOCTYPE html> <html> <head> ... {% block stylesheets %} <link rel="stylesheet" href="{{ asset('bundles/troopersajax/css/ajax.css') }}" /> {% endblock %} </head> <body> ... {% block javascripts %} <!-- Be sure to have jquery loaded before --> <script type="text/javascript" src="{{ asset('bundles/troopersajax/js/ajax.js') }}"></script> {% endblock %} </body> </html>
Examples
Links
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container">Click me</a>
<div id="updater-container">Here will stand the ajaxCall response</div>
Forms
<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>
Link that updates a form (using the data-form jquery selector)
<a
data-toggle="ajax"
data-form="#search"
data-update="result-panel"
data-update-strategy="append"
href='your_url'>
Show more
</a>
If the link contains the data-form property, it will submit the form using the properties of the link.
Auto-refresh a form
You can automatically send an ajax request to update your form when an input/select change, just add the data attribute "data-refreshonchange":
<select name="category" data-refreshonchange="true"> <option value="transport">Transport</option> <option value="structure">Stucture</option> </select>
Then in your controller's action:
if ($request->query->get('novalidate', false) === false) { if ($form->isValid()) { // form is valid } else { // avoid to display errors when novalidate $form = $formFactory->createForm(); $form->setData($user); } }
For some reason, you would not refresh some parts of your form (for example an input type="file"). Then, add the data attribute 'data-ignoreonchange="$some_unique_id"'.
Extra features
As you probably noticed, you can automatically set a container for your ajax response. Actually, you can do some others features :
Update strategy
The data-update-strategy attribute is used to define the function to use to integrate your ajax content with the container your already set by using the data-update attribute. So if you want to, you can tell the library to put after, before, append, prepend or a custom function. Note that, the default behavior is to simply replace the content of the container by the html function.
Let's take an example. If you want your ajax content to be simply added in the end of your container, here is your code :
<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>
Effect
By default, when we load ajax content, a small effect is run : hide + fadeIn (if container not empty) hide + slideDown (if container is empty). If this effect does not feed your needs, you can set your own by filling the data-effect attribute. For example :
<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>
If you do not want any effect, you can just add the data attribute noEffect on the link (or the target) tag. For example, on the 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>
or directly on the target :
<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>
In this last example, the first link'll do the ajax call without any effect because of the data-noEffect on the target container and the second, because of its override will trigger a fadeIn effect.
Bootstrap Modal use
This is the is the youngest of the ajax feature's family, now you can simply trigger bootstrap modal by simply adding data-toogle="modal" on the link you decides to :
<a href="ajaxCall" data-toogle="ajax-modal">Click me and the ajax result will pop in a beautiful popup</a>
This will work "as is" but to have a cool appearence, you will have to add the correct markup inside the modal. More info in the Twitter Bootstrap modal doc
Overwrite the loader
AjaxBundle comes with a default loader and an overlay. If you want, you can change it by defining the loader's markup you want to use in window.loader
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>{% block title %}Welcome!{% 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 %} {% block 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="width: 80%; padding-top: 15px;"/></div>'; window.loaderOverlay = null; </script> <script type="text/javascript" src="{{ asset('bundles/troopersajax/js/ajax.js') }}"></script> {% endblock %} </body> </html>
This example will tell ajax.js to use the /img/loading.gif and will disable the overlay.
troopers/ajax-bundle 适用场景与选型建议
troopers/ajax-bundle 是一款 基于 JavaScript 开发的 Composer 扩展包，目前已累计 30.05k 次下载、GitHub Stars 达 29， 最近一次更新时间为 2016 年 09 月 27 日， 在 PHP 生态内属于活跃度较高的组件。
它主要适用于以下技术方向： 「ajax」 等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。
我们在过去多个企业项目中使用过 troopers/ajax-bundle 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。
基于 troopers/ajax-bundle 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。
线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。
承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。
与 troopers/ajax-bundle 相关的其它包
同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：
Selenium4 (WebDriver) driver for Mink framework
laravel middleware to allow ajax only calls
Sitemap crawler/generator. For the given URL it will return sitemap XML file with URLs and images.
This is a laravel 4 package for the server and client side of datatables at http://datatables.net/
Yii2 extension for showLoading jQuery plugin
A simple JSend implementation
统计信息
- 总下载量： 30.05k
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 29
- 点击次数： 13
- 依赖项目数： 1
- 推荐数： 0
其他信息
- 授权协议： MIT
- 更新时间： 2016-09-27