{"id":15287431,"url":"https://github.com/troopers/ajaxbundle","last_synced_at":"2025-07-26T17:33:24.849Z","repository":{"id":6020912,"uuid":"7244570","full_name":"Troopers/AjaxBundle","owner":"Troopers","description":"This bundle offers a simple structure to run ajax actions","archived":false,"fork":false,"pushed_at":"2018-03-02T15:04:19.000Z","size":103,"stargazers_count":28,"open_issues_count":1,"forks_count":9,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-13T05:09:49.462Z","etag":null,"topics":["ajax","jquery","symfony","symfony-bundle","troopers"],"latest_commit_sha":null,"homepage":"http://troopers.agency","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"mattt/Antenna","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Troopers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-12-19T17:32:44.000Z","updated_at":"2024-12-06T16:27:36.000Z","dependencies_parsed_at":"2022-09-22T06:33:08.366Z","dependency_job_id":null,"html_url":"https://github.com/Troopers/AjaxBundle","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Troopers%2FAjaxBundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Troopers%2FAjaxBundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Troopers%2FAjaxBundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Troopers%2FAjaxBundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Troopers","download_url":"https://codeload.github.com/Troopers/AjaxBundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665747,"owners_count":21142123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","jquery","symfony","symfony-bundle","troopers"],"created_at":"2024-09-30T15:28:08.428Z","updated_at":"2025-04-13T05:10:17.028Z","avatar_url":"https://github.com/Troopers.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Troopers](https://cloud.githubusercontent.com/assets/618536/18787530/83cf424e-81a3-11e6-8f66-cde3ec5fa82a.png)](http://troopers.agency/?utm_source=AjaxBundle\u0026utm_medium=github\u0026utm_campaign=OpenSource)\n\n[![License](https://img.shields.io/packagist/l/troopers/ajax-bundle.svg)](https://packagist.org/packages/troopers/ajax-bundle)\n[![Version](https://img.shields.io/packagist/v/troopers/ajax-bundle.svg)](https://packagist.org/packages/troopers/ajax-bundle)\n[![Packagist DL](https://img.shields.io/packagist/dt/troopers/ajax-bundle.svg)](https://packagist.org/packages/troopers/ajax-bundle)\n[![SensioLabsInsight](https://insight.sensiolabs.com/projects/0c7ec932-671e-4bd1-8ecd-3d3a6c015909/mini.png)](https://insight.sensiolabs.com/projects/0c7ec932-671e-4bd1-8ecd-3d3a6c015909)\n[![Twitter Follow](https://img.shields.io/twitter/follow/troopersagency.svg?style=social\u0026label=Follow%20Troopers)](https://twitter.com/troopersagency)\n=============\n\nTroopersAjaxBundle\n============\n\n## Description\n\nThis bundle offers a simple structure to run ajax actions.\nFor 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.\n\n## Installation\n\nWith Composer :\n\n\nAdd this line in your composer.json file :\n\n    \"troopers/ajax-bundle\": \"dev-master\"\n\nDeclare the bundle in your AppKernel.php:\n\n    public function registerBundles() {\n        $bundles = array(\n            [...]\n            new Troopers\\AjaxBundle\\TroopersAjaxBundle(),\n            [...]\n\n## Configuration\n\n### AsseticInjectorBundle way\n\nIf You have installed our [AsseticInjectorBundle](https://github.com/Troopers/AsseticInjectorBundle/blob/master/README.md) bundle:\n\n1. Thank you, you are awesome for us ;)\n2. 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.\n\n### The `normal` way\n\nJust load `ajax.js`and `ajax.css` in your template:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        ...\n        {% block stylesheets %}\n            \u003clink rel=\"stylesheet\" href=\"{{ asset('bundles/troopersajax/css/ajax.css') }}\" /\u003e\n        {% endblock %}\n    \u003c/head\u003e\n    \u003cbody\u003e\n        ...\n        {% block javascripts %}\n            \u003c!-- Be sure to have jquery loaded before --\u003e\n            \u003cscript type=\"text/javascript\" src=\"{{ asset('bundles/troopersajax/js/ajax.js') }}\"\u003e\u003c/script\u003e\n        {% endblock %}\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n\n## Examples\n\n### Links\n\n    \u003ca href=\"ajaxCall\" data-toggle=\"ajax\" data-update=\"updater-container\"\u003eClick me\u003c/a\u003e\n    \u003cdiv id=\"updater-container\"\u003eHere will stand the ajaxCall response\u003c/div\u003e\n\n### Forms\n\n    \u003cform action=\"ajaxAction\" method=\"POST\" data-toggle=\"ajax\" data-update=\"updater-ajaxAction-container\"\u003e\n      \u003cinput type=\"submit\" value=\"Ok save me\" /\u003e\n    \u003c/form\u003e\n\n    \u003cdiv id=\"updater-ajaxAction-container\"\u003eHere will stand the ajaxAction response\u003c/div\u003e\n\n### Link that updates a form (using the data-form jquery selector)\n    \u003ca\n        data-toggle=\"ajax\"\n        data-form=\"#search\"\n        data-update=\"result-panel\"\n        data-update-strategy=\"append\"\n        href='your_url'\u003e\n        Show more\n    \u003c/a\u003e\nIf the link contains the data-form property, it will submit the form using the properties of the link.\n\n### Auto-refresh a form\n\nYou can automatically send an ajax request to update your form when an input/select change, just add the data attribute \"data-refreshonchange\":\n\n```html\n    \u003cselect name=\"category\" data-refreshonchange=\"true\"\u003e\n        \u003coption value=\"transport\"\u003eTransport\u003c/option\u003e\n        \u003coption value=\"structure\"\u003eStucture\u003c/option\u003e\n    \u003c/select\u003e\n```\n\nThen in your controller's action:\n\n```php\n if ($request-\u003equery-\u003eget('novalidate', false) === false) {\n    if ($form-\u003eisValid()) {\n        // form is valid\n    } else {\n        // avoid to display errors when novalidate\n        $form = $formFactory-\u003ecreateForm();\n        $form-\u003esetData($user);\n    }\n}\n```\n\nFor 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\"'.\n\nExtra features\n---\n\nAs you probably noticed, you can automatically set a container for your ajax response. Actually, you can do some others features :\n\n### Update strategy\n\n\nThe 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.\n\nLet's take an example. If you want your ajax content to be simply added in the end of your container, here is your code :\n\n    \u003ca href=\"ajaxCall\" data-toggle=\"ajax\" data-update=\"updater-container\" data-update-strategy=\"append\"\u003eClick me\u003c/a\u003e\n    \u003cdiv id=\"updater-container\"\u003eThis sentence will stay here and the ajax content will be displayed just after\u003c/div\u003e\n\n### Effect\n\nBy default, when we load ajax content, a small effect is run : hide + fadeIn (if container not empty) hide + slideDown (if container is empty).\nIf this effect does not feed your needs, you can set your own by filling the data-effect attribute.\nFor example :\n\n    \u003ca href=\"ajaxCall\" data-toggle=\"ajax\" data-update=\"updater-container\" data-effect=\"slideDown\"\u003eClick me\u003c/a\u003e\n    \u003cdiv id=\"updater-container\"\u003eThis container will be hidden, the ajax content will be placed here and then the slideDown function will be used to display this\u003c/div\u003e\n\nIf you do not want any effect, you can just add the data attribute noEffect on the link (or the target) tag.\nFor example, on the link :\n\n    \u003ca href=\"ajaxCall\" data-toggle=\"ajax\" data-update=\"updater-container\" data-noEffect=true\u003eClick me, no effect\u003c/a\u003e\n    \u003cdiv id=\"updater-container\"\u003eThis container will be hidden without any effect if you click\u003c/div\u003e\n\nor directly on the target :\n\n    \u003ca href=\"ajaxCall\" data-toggle=\"ajax\" data-update=\"updater-container\"\u003eClick me, no effect\u003c/a\u003e\n    \u003ca href=\"ajaxCall\" data-toggle=\"ajax\" data-update=\"updater-container\" data-effect=\"fadeIn\"\u003eClick me (fadeIn)\u003c/a\u003e\n    \u003cdiv id=\"updater-container\" data-noEffect=true\u003eThis container will be hidden with or without an effect, according by the link you choose\u003c/div\u003e\n\nIn 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.\n\n### Bootstrap Modal use\n\nThis 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 :\n\n    \u003ca href=\"ajaxCall\" data-toogle=\"ajax-modal\"\u003eClick me and the ajax result will pop in a beautiful popup\u003c/a\u003e\n\nThis 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](http://getbootstrap.com/2.3.2/javascript.html#modals)\n\n\n### Overwrite the loader\n\n`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`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\" /\u003e\n        \u003ctitle\u003e{% block title %}Welcome!{% endblock %}\u003c/title\u003e\n        {% block stylesheets %}\n            \u003clink rel=\"stylesheet\" href=\"{{ asset('bundles/troopersajax/css/ajax.css') }}\" /\u003e\n        {% endblock %}\n        \u003clink rel=\"icon\" type=\"image/x-icon\" href=\"{{ asset('favicon.ico') }}\" /\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        {% block body %}{% endblock %}\n        {% block javascripts %}\n            \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js\"\u003e\u003c/script\u003e\n            \u003cscript type=\"text/javascript\"\u003e\n                window.loader = '\u003cdiv id=\"canvasloader-container\" style=\"display: none;\"\u003e\u003cimg src=\"{{ asset('/img/loading.gif') }}\" style=\"width: 80%; padding-top: 15px;\"/\u003e\u003c/div\u003e';\n                window.loaderOverlay = null;\n            \u003c/script\u003e\n            \u003cscript type=\"text/javascript\" src=\"{{ asset('bundles/troopersajax/js/ajax.js') }}\"\u003e\u003c/script\u003e\n        {% endblock %}\n    \u003c/body\u003e\n\u003c/html\u003e\n```\nThis example will tell ajax.js to use the `/img/loading.gif` and will disable the overlay.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftroopers%2Fajaxbundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftroopers%2Fajaxbundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftroopers%2Fajaxbundle/lists"}