AjaxBundle
1.0.0
このバンドルは、ajax アクションを実行するための単純な構造を提供します。アクションの種類 (リンクまたはフォーム) ごとに、タグ ( a 、 form ) に data-toggle="ajax" を追加し、更新するコンテナーの ID を update 属性で指定する必要があります。
作曲家あり:
次の行をcomposer.jsonファイルに追加します。
"troopers/ajax-bundle": "dev-master"
AppKernel.php でバンドルを宣言します。
public function registerBundles() {
$bundles = array(
[...]
new TroopersAjaxBundleTroopersAjaxBundle(),
[...]AsseticInjectorBundle バンドルをインストールしている場合:
ありがとう、あなたは私たちにとって素晴らしい人です ;)
「単に動作する」かもしれませんが、そうでない場合は、JavaScript ( injector="foot" ) ブロックと stylesheet ( injector="head" ) ブロックのインジェクター タグを確認する必要があります。
normal方法ajax.jsとajax.cssテンプレートにロードするだけです。
<!DOCTYPE html><html><head>...
{% ブロック スタイルシート %}<link rel="stylesheet" href="{{asset('bundles/troopersajax/css/ajax.css') }}" />{% エンドブロック %}</head><body>。 ..
{% block javascripts %}<!-- 必ずその前に jquery をロードしてください --><script type="text/javascript" src="{{asset('bundles/troopersajax/js/ajax.js') }} "></script>{% エンドブロック %}</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>
リンクにデータ フォーム プロパティが含まれている場合、リンクのプロパティを使用してフォームが送信されます。
入力/選択が変更されたときにフォームを更新するための Ajax リクエストを自動的に送信できます。データ属性「data-refreshonchange」を追加するだけです。
<select name="category" data-refreshonchange="true"><option value="transport">輸送</option><option value="struction">構造</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 属性は、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 コンテンツをロードすると、小さな効果が実行されます: Hide + fadeIn (コンテナが空でない場合) Hide + 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>
効果が不要な場合は、リンク (またはターゲット) タグにデータ属性 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 呼び出しを実行し、2 番目のリンクはオーバーライドによりフェードイン効果がトリガーされるため、ajax 呼び出しを実行します。
これは、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>{% block title %}ようこそ!{% endblock %}</title>{% block stylesheets %}<link rel="stylesheet" href="{{asset('bundles/troopersajax/css/ajax.css') }}" />{% エンドブロック %}<link rel="icon" type="image/x-icon" href="{{asset('favicon.ico') }}" /></head><body>{% block 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="{{ asset('/img/loading.gif') }}" style="width: 80%;padding-top: 15px;"/></div>';window.loaderOverlay = null;</script><スクリプト タイプ="text/javascript" src="{{asset('bundles/troopersajax/js/ajax.js') }}"></script>{% エンドブロック %}</body></html>この例では、ajax.js に/img/loading.gif使用するように指示し、オーバーレイを無効にします。
