README

TroopersAjaxBundle

描述

此捆绑包提供了一个简单的结构来运行ajax操作。对于每种类型的操作（链接或表单），您必须在标签（a，form）上添加data-toggle="ajax"，并在update属性中指定要更新的容器的id。

安装

使用Composer

在您的composer.json文件中添加此行

"troopers/ajax-bundle": "dev-master"

在您的AppKernel.php中声明捆绑包

public function registerBundles() {
    $bundles = array(
        [...]
        new Troopers\AjaxBundle\TroopersAjaxBundle(),
        [...]

配置

AsseticInjectorBundle方式

如果您已安装我们的AsseticInjectorBundle捆绑包

感谢您，对我们来说您很棒；)
它可能“只是工作”，但如果不行，您将不得不检查您的javascript（injector="foot"）和样式表（injector="head"）块中的注入器标签。

正常方式

只需在模板中加载ajax.js和ajax.css

<!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>

示例

链接

<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>

更新表单的链接（使用data-form jQuery选择器）

<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">Transport</option>
        <option value="structure">Stucture</option>
    </select>

然后在您的控制器操作中

 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);
    }
}

出于某种原因，您可能不会刷新表单的一些部分（例如，input类型="file"）。然后，添加数据属性'data-ignoreonchange="$some_unique_id"'。

额外功能

正如您可能已经注意到的，您可以自动设置用于ajax响应的容器。实际上，您还可以执行其他一些功能

更新策略

data-update-strategy属性用于定义用于通过使用data-update属性设置的容器集成您的ajax内容的函数。因此，如果您想，您可以告诉库在容器后、前、追加、预处理或自定义函数中放置。请注意，默认行为是简单地用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（如果容器不为空）隐藏 + slideDown（如果容器为空）。如果这个效果不符合您的需求，您可以通过填充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>

如果您不想有任何效果，只需在链接（或目标）标签上添加data-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>

在最后一个例子中，第一个链接将因为没有目标容器上的data-noEffect而执行不带任何效果的ajax调用，而第二个，因为其覆盖将触发fadeIn效果。

Bootstrap Modal使用

这是ajax功能家族中最年轻的一员，现在您可以通过在链接上添加data-toogle="modal"简单地触发bootstrap modal

<a href="ajaxCall" data-toogle="ajax-modal">Click me and the ajax result will pop in a beautiful popup</a>

这将“按原样”工作，但为了有一个酷的外观，您需要在modal中添加正确的标记。更多信息请参阅Twitter Bootstrap modal文档

覆盖加载器

AjaxBundle 默认包含一个加载器和覆盖层。如果您想更改它，可以通过在 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>

此示例将告诉 ajax.js 使用 /img/loading.gif，并将禁用覆盖层。

troopers / ajax-bundle

维护者

详细信息