{"id":16239663,"url":"https://github.com/jalkoby/phoenix_ujs","last_synced_at":"2025-08-11T02:09:07.497Z","repository":{"id":57323009,"uuid":"69455651","full_name":"jalkoby/phoenix_ujs","owner":"jalkoby","description":"Unobtrusive vanilla js toolset to simplify Phoenix framework (and other frameworks) usage","archived":false,"fork":false,"pushed_at":"2018-02-22T15:40:39.000Z","size":27,"stargazers_count":40,"open_issues_count":0,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-08-09T13:26:50.681Z","etag":null,"topics":["ajax","phoenix-framework","ujs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jalkoby.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-28T11:15:16.000Z","updated_at":"2025-03-02T13:40:15.000Z","dependencies_parsed_at":"2022-09-11T16:33:09.799Z","dependency_job_id":null,"html_url":"https://github.com/jalkoby/phoenix_ujs","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jalkoby/phoenix_ujs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jalkoby%2Fphoenix_ujs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jalkoby%2Fphoenix_ujs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jalkoby%2Fphoenix_ujs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jalkoby%2Fphoenix_ujs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jalkoby","download_url":"https://codeload.github.com/jalkoby/phoenix_ujs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jalkoby%2Fphoenix_ujs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269771977,"owners_count":24473332,"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","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","phoenix-framework","ujs"],"created_at":"2024-10-10T13:44:35.847Z","updated_at":"2025-08-11T02:09:07.473Z","avatar_url":"https://github.com/jalkoby.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# phoenix_ujs\n\n**Unobtrusive vanilla JS toolset for Phoenix framework**\n\n[![npm version](https://badge.fury.io/js/phoenix_ujs.svg)](https://badge.fury.io/js/phoenix_ujs)\n\n## Purpose\n\nA compact port of [jquery-ujs](https://github.com/rails/jquery-ujs) for Phoenix framework (the library is agnostic, so\n  you can use it with other backends as well). The library **does not requires jQuery** and covers only essential needs:\n\n- non-'GET' links (POST, PUT, PATCH, DELETE, etc)\n- confirmation and/or remote request on clicking link or submitting form\n- refreshing CSRF inputs in forms (fix browser form caching)\n\n## Installation\n\n```js\nnpm i --save phoenix_ujs\n```\nIf your js build system supports commonjs `require` and/or `import` methods (**Brunch, Webpack, Browserify**) add the\nnext code at the top of your main js file:\n\n```js\nvar UJS = require(\"phoenix_ujs\");\n// or\nimport \"phoenix_ujs\";\n```\n\nFor other cases you can use one of the package files:\n``` bash\n~ : ls node_modules/phoenix_ujs\nujs.js      # browser version\nujs.min.js  # minified browser version\nujs.cjs.js  # commonjs version (used in `require` by default)\nujs.es.js   # ES6 version\n```\nTo setup your backend - open layout file and add next at the top of the **\u003chead\u003e**:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- example for Phoenix.HTML 2.7.1+ --\u003e\n    \u003c%= csrf_meta_tag() %\u003e\n    \u003c!-- example for Phoenix.HTML 2.7.0 and below--\u003e\n    \u003cmeta name=\"csrf-token\" content=\"\u003c%= get_csrf_token() %\u003e\"/\u003e\n    \u003c!-- also meta tag can contain the next setting-attributes:\n      csrf-param=\"_csrf_token\"\n      csrf-header=\"x-csrf-token\"\n      method-param=\"_method\"\n    --\u003e\n```\n\n## Usage\n\n### Markup\n\n```html\n\u003c!-- to specify non-get method add `ujs-method` --\u003e\n\u003ca href=\"/request/post\" ujs-method=\"post\"\u003eMake a POST request\u003c/a\u003e\n\u003ca href=\"/request/delete\" ujs-method=\"delete\"\u003eMake a DELETE request\u003c/a\u003e\n\u003ca href=\"/request/patch\" ujs-method=\"patch\"\u003eMake a PATCH request\u003c/a\u003e\n```\n\n```html\n\u003c!-- add confirmation with `ujs-confirm`  --\u003e\n\u003ca href=\"/request/get\" ujs-confirm=\"Are you sure?\"\u003eAsk confirmation to open link\u003c/a\u003e\n\u003ca href=\"/request/post\" ujs-confirm=\"Are you sure?\" ujs-method=\"post\"\u003eAsk confirmation to make a POST request\u003c/a\u003e\n\u003cform action=\"/request/post\" method=\"POST\" ujs-confirm=\"Are you sure?\"\u003e\n  \u003c!-- ask confirmation when form is submitting --\u003e\n\u003c/form\u003e\n```\n\n```html\n\u003c!-- make an ajax request on click if `ujs-remote` is present --\u003e\n\u003c!-- the next event will be triggered:\n  ajax:beforeSend - event before AJAX call. AJAX request can be canceled if handler will return `false`\n  ajax:success - a success response (2xx status code)\n  ajax:error - an error response (4xx, 5xx status code)\n  ajax:complete - an response received with any status\n--\u003e\n\u003ca href=\"/request/patch\" ujs-method=\"patch\" ujs-remote\u003ePatch remotely\u003c/a\u003e\n\u003cform action=\"/request/post\" method=\"POST\" ujs-remote\u003e\n  \u003c!--  AJAX form submitting --\u003e\n\u003c/form\u003e\n```\n\n### JS API\n\nThe library exports module (window.UJS in browser version) with the next properties:\n\n- `confirm` - the confirmation function which accepts a message as the first argument. You can override it for your needs\n- `csrf` - a CSRF configuration object:\n  - `token`  - a current CSRF token. You can skip the meta tag in the header and put the token in runtime\n  - `header` - a header used for CSRF requests\n  - `param`  - a query/form param used for CSRF requests\n- `xhr` - the AJAX contructor\n\n```js\nvar UJS = require(\"phoenix_ujs\");\n\nUJS.xhr(url, method, options);\n\n// a simple get request\n// all ajax events (ajax:beforeSend, ajax:success, ...) will be triggered on document\nUJS.xhr(\"/api/ping\", \"GET\", {\n  success: function(xhr) {\n    console.log(\"pong\");\n  }\n});\n\nUJS.xhr(\"/api/posts\", \"POST\", {\n  type: 'json', // convert data into json, set Content-Type \u0026 Accept headers\n  data: { post: { title: \"The first post\", body: \"Hello world!\" } }, // the request's payload\n  success: function(xhr) {\n    alert(\"The post has been published\");\n  }\n});\n```\n`options` accepts the next params:\n- `headers` - additional headers\n- `target` - js event target (by default - document)\n- `beforeSend` - the callback before xhr executed. It passes the config with **xhr** \u0026 **options** properties. `return false` will stop the ajax request\n- `success` - the success callback (200 \u003c= status_code \u003c 300)\n- `error` - the error callback (status_code \u003e= 400)\n- `complete` - the complete callback (any status_code)\n- `type` - indicated additional processings;\n  - \"json\" - converts data into json string, sets Content-Type \u0026 Accept headers to `application/json`\n  - \"text\" - sets Content-Type \u0026 Accept headers to `text/plain`\n  - Array(2..3) - sets Content-Type - the first array's element, sets Accept - the second array's element and process data with the third element (if it's exist)\n\n## AJAX events\n\nEach ajax request triggers the following events:\n\n- `ajax:beforeSend` is triggered before making an ajax call. In this event you can cancel the ajax request:\n```js\ndocument.addEventListener('ajax:beforeSend', function(e) {\n   if(e.target.nodeName === 'I') {\n     // if \u003ci\u003e triggered an ajax request - stop the ajax\n     e.preventDefault();\n   } else {\n     e.data.xhr.setRequestHeader('my-vendor-header', e.data.options.someValue);\n   }\n});\n```\n- `ajax:success` is triggered after getting an response and response is 2xx.\n```js\ndocument.addEventListener('ajax:success', function(e) {\n  console.log(e.data.xhr.responseText);\n});\n```\n\n- `ajax:error` is triggered after getting an response and response is 4xx or 5xx.\n```js\ndocument.addEventListener('ajax:error', function(e) {\n  console.error(e.data.xhr.responseText);\n});\n```\n\n- `ajax:complete` is triggered after any response:\n```js\ndocument.addEventListener('ajax:complete', function(e) {\n  console.log(e.data.xhr.responseText);\n});\n```\n## Things which are not included\n\n- executing a response js code. It's highly recommended to not do it, but if you need - there's an example:\n\n```js\ndocument.addEventListener('ajax:success', function(e) {\n  if(e.target \u0026\u0026 e.target.hasAttribute('ujs-eval')) {\n    eval(e.data.xhr.responseText);\n  }\n});\n```\n\n```html\n\u003ca href=\"/some/url\" ujs-method=\"get\" ujs-remote ujs-eval\u003eEval the server code\u003c/a\u003e\n```\n\n## Old browser support\nIf you're working on a project with old browsers support (IE 9-, Android 2.x, etc) - the library will not work unless you add a polyfill for FormData. For example this one https://www.npmjs.com/package/js-polyfills\n\n## License\n[MIT](./LICENSE.txt) © [Sergey Pchelintsev](http://www.sergeyp.me)\n\n## TODO\n- tests\n- examples\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjalkoby%2Fphoenix_ujs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjalkoby%2Fphoenix_ujs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjalkoby%2Fphoenix_ujs/lists"}