{"_id":"eldarion-ajax","_rev":"9-81ee235e8f58503279785ef1c5d829b2","name":"eldarion-ajax","description":"a library for adding declarative ajax functionality to your website","dist-tags":{"latest":"0.16.0"},"versions":{"0.12.0":{"name":"eldarion-ajax","version":"0.12.0","description":"a library for adding declarative ajax functionality to your website","main":"js/eldarion-ajax.min.js","directories":{"test":"tests"},"scripts":{"test":"./ci.sh"},"repository":{"type":"git","url":"git://github.com/eldarion/eldarion-ajax"},"keywords":["ajax"],"author":{"name":"Patrick Altman"},"license":"BSD","devDependencies":{"jshint":"2.1.4"},"gitHead":"7e5f79a46287d4a9545b1c42339b99351c376d9b","bugs":{"url":"https://github.com/eldarion/eldarion-ajax/issues"},"homepage":"https://github.com/eldarion/eldarion-ajax","_id":"eldarion-ajax@0.12.0","_shasum":"53a20a59b0eb0b72e922ce0dcd16be148548ffdb","_from":".","_npmVersion":"2.1.4","_nodeVersion":"0.10.32","_npmUser":{"name":"paltman","email":"paltman@gmail.com"},"maintainers":[{"name":"paltman","email":"paltman@gmail.com"}],"dist":{"shasum":"53a20a59b0eb0b72e922ce0dcd16be148548ffdb","tarball":"https://registry.npmjs.org/eldarion-ajax/-/eldarion-ajax-0.12.0.tgz","integrity":"sha512-gmlkv5+vrLtsPYK6lrUsr6BDvAgKRR2xrm5gm3AuA1OJsSKT4UM1U6kYmUo0/WWUjOJlUc6VXWdV5xQxvUJ9Tw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbdpcDeZheNIh1QvbPfkj6+ylmuaoAvxZnO4mXCkv3NgIhAMe68kQqhw7ECMdzba6gNl5/Wqb9+19J7XUTkusOhe+M"}]}},"0.13.0":{"name":"eldarion-ajax","version":"0.13.0","description":"a library for adding declarative ajax functionality to your website","main":"js/eldarion-ajax.min.js","directories":{"test":"tests"},"scripts":{"test":"./ci.sh"},"repository":{"type":"git","url":"git://github.com/eldarion/eldarion-ajax"},"keywords":["ajax"],"author":{"name":"Patrick Altman"},"license":"BSD","dependencies":{"jquery":"*"},"devDependencies":{"jshint":"2.1.4"},"gitHead":"8900c30ed723649c0790e4ca963be6b5a942697a","bugs":{"url":"https://github.com/eldarion/eldarion-ajax/issues"},"homepage":"https://github.com/eldarion/eldarion-ajax","_id":"eldarion-ajax@0.13.0","_shasum":"b90cfc2d9e6fecd861bc358b5a565bc9b4f1ed3f","_from":".","_npmVersion":"2.1.4","_nodeVersion":"0.10.32","_npmUser":{"name":"paltman","email":"paltman@gmail.com"},"maintainers":[{"name":"paltman","email":"paltman@gmail.com"}],"dist":{"shasum":"b90cfc2d9e6fecd861bc358b5a565bc9b4f1ed3f","tarball":"https://registry.npmjs.org/eldarion-ajax/-/eldarion-ajax-0.13.0.tgz","integrity":"sha512-5bg2SWQX7hu4PbyxRI2jAzgNo/1mTgOQb6H0266EYDtqgG2Tcwf5uIfCVYGBFTAMIE/Nt187kFJ8rfq/Ltx5hA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0gzRQNW/3l8MO657idao8i6umXX2EvtSzOVtoGWmK8AIgBW7QZapp9+HYaYDit+Syk4Kn1iu/0w4R/w7PInouC8o="}]}},"0.14.0":{"name":"eldarion-ajax","version":"0.14.0","description":"a library for adding declarative ajax functionality to your website","main":"js/eldarion-ajax.min.js","directories":{"test":"tests"},"scripts":{"test":"./ci.sh"},"repository":{"type":"git","url":"git://github.com/eldarion/eldarion-ajax"},"keywords":["ajax"],"author":{"name":"Patrick Altman"},"license":"BSD","dependencies":{"jquery":"*"},"devDependencies":{"jshint":"2.1.4"},"gitHead":"542eca99d2f922f6360ab544c7283d4a47b9a83a","bugs":{"url":"https://github.com/eldarion/eldarion-ajax/issues"},"homepage":"https://github.com/eldarion/eldarion-ajax","_id":"eldarion-ajax@0.14.0","_shasum":"e97ce0106de73857bb2bfe8966c63bbc27250cc2","_from":".","_npmVersion":"2.1.4","_nodeVersion":"0.10.32","_npmUser":{"name":"paltman","email":"paltman@gmail.com"},"maintainers":[{"name":"paltman","email":"paltman@gmail.com"}],"dist":{"shasum":"e97ce0106de73857bb2bfe8966c63bbc27250cc2","tarball":"https://registry.npmjs.org/eldarion-ajax/-/eldarion-ajax-0.14.0.tgz","integrity":"sha512-tfsoU8kzsM0ZvKThJ863m+572+j0DAUuESXc1taVKOau7SxT8rgFH5SBgfEN+HFJGFcINPhglVOt0U3OZ9bKpQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrsZdiwDjnrEK2z16meXe3cCaK2nbIVotIzW1gG+mZqAIgP7Fu9tKKSP/6wdzdaWs3nsWLuY3xFQXwMlmiee4nZBE="}]}},"0.15.0":{"name":"eldarion-ajax","version":"0.15.0","description":"a library for adding declarative ajax functionality to your website","main":"js/eldarion-ajax.min.js","directories":{"test":"tests"},"scripts":{"test":"./ci.sh"},"repository":{"type":"git","url":"git://github.com/eldarion/eldarion-ajax"},"keywords":["ajax"],"author":{"name":"Patrick Altman"},"license":"BSD","dependencies":{"jquery":">=1.8.3"},"devDependencies":{"jshint":"2.1.4"},"gitHead":"fdd16dcbdc91e8b99f5cefdfe2afe02c6d9c4e9b","bugs":{"url":"https://github.com/eldarion/eldarion-ajax/issues"},"homepage":"https://github.com/eldarion/eldarion-ajax","_id":"eldarion-ajax@0.15.0","_shasum":"1cdfce627901d20edf6baffc5f73c85de495294b","_from":".","_npmVersion":"2.1.4","_nodeVersion":"0.10.32","_npmUser":{"name":"paltman","email":"paltman@gmail.com"},"maintainers":[{"name":"paltman","email":"paltman@gmail.com"}],"dist":{"shasum":"1cdfce627901d20edf6baffc5f73c85de495294b","tarball":"https://registry.npmjs.org/eldarion-ajax/-/eldarion-ajax-0.15.0.tgz","integrity":"sha512-WwVFibAI6vasHC9K4w6aRwr+kxqvkCaQY3P6NqPXPD6iH65R20AUy/M9SMdQotDcVr0lkxI7UkujKGw8EoSulQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfICEMMn1pBNtiuCN40U577URIupy6N1xrStlB6H363AIgEdEYWPqiaXNVmytihwPtNwtXkI0eVGcTncVU7Pd97Sk="}]}},"0.16.0":{"name":"eldarion-ajax","version":"0.16.0","description":"a library for adding declarative ajax functionality to your website","main":"js/eldarion-ajax.min.js","directories":{"test":"tests"},"scripts":{"test":"./ci.sh"},"repository":{"type":"git","url":"git://github.com/eldarion/eldarion-ajax.git"},"keywords":["ajax"],"author":{"name":"Patrick Altman"},"license":"BSD","dependencies":{"jquery":">=1.8.3"},"devDependencies":{"jshint":"2.1.4"},"gitHead":"8485dae8553d404e65d52265340cc12094440261","bugs":{"url":"https://github.com/eldarion/eldarion-ajax/issues"},"homepage":"https://github.com/eldarion/eldarion-ajax#readme","_id":"eldarion-ajax@0.16.0","_shasum":"bdb3f064ea8d653481fb76d6578db86eed09b594","_from":".","_npmVersion":"3.10.9","_nodeVersion":"7.2.0","_npmUser":{"name":"paltman","email":"paltman@gmail.com"},"dist":{"shasum":"bdb3f064ea8d653481fb76d6578db86eed09b594","tarball":"https://registry.npmjs.org/eldarion-ajax/-/eldarion-ajax-0.16.0.tgz","integrity":"sha512-jIkfVLWCJM29A1ANAPlFjWMr3RypcyIVZ4iJqlTpM25W41rXMoaxi1pZ34r82jfMHocs67rXxjtEWYlfwyxbTw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKBFD9sqIcS6qays65VpahH2j/fA3YdaIib7wSrZfbNQIhAIqpTxqVyvt3pxncvbO8yGg9SpuwjaxKhdbGcrAHdiGD"}]},"maintainers":[{"name":"paltman","email":"paltman@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/eldarion-ajax-0.16.0.tgz_1481742797363_0.4489130994770676"}}},"readme":"# eldarion-ajax\n\nThis is a plugin that Eldarion uses for all of its AJAX work.\n\n[![Build Status](https://travis-ci.org/eldarion/eldarion-ajax.png)](https://travis-ci.org/eldarion/eldarion-ajax)\n\nNo more writing the same 20 line ```$.ajax``` blocks of Javascript over and over\nagain for each snippet of AJAX that you want to support. Easily extend support\non the server side code for this by adding a top-level attribute to the JSON you\nare already returning called ```\"html\"``` that is the rendered content. Unlike a\nbackbone.js approach to building a web app, eldarion-ajax leverages server side\ntemplate rendering engines to render and return HTML fragments.\n\nThis project used to be called **bootstrap-ajax** but the connection with\nTwitter Bootstrap was tenuous at best so we thought it best to rename to\n*eldarion-ajax*.\n\n## Demo\n\nThere is a demo project at https://github.com/eldarion/eldarion-ajax-demo/ which\nis also online at http://uk013.gondor.co/\n\n\n## Installation\n\njQuery is required for this library so make sure it is included somewhere on the\npage prior to the inclusion of ``eldarion-ajax.min.js``.\n\nCopy ```js/eldarion-ajax.min.js``` to where you keep your web sites static \nmedia and the include them in your HTML:\n\n    <script src=\"/js/eldarion-ajax.js\"></script>\n\n\n## Actions\n\nThere are currently three actions supported:\n\n1. ```a.click```\n2. ```form.submit```\n3. ```a.cancel```\n\n### ```a.click```\n\nBinding to the ```a``` tag's click event where the tag has the class ```ajax```:\n\n    <a href=\"/tasks/12342/done/\" class=\"btn ajax\">\n        <i class=\"icon icon-check\"></i>\n        Done\n    </a>\n\nIn addition to the ```href``` attribute, you can add ```data-method=\"post\"``` to\nchange the default action from an HTTP GET to an HTTP POST.\n\n\n### ```form.submit```\n\nConvert any form to an AJAX form submission quite easily by adding ```ajax```\nto the form's class attribute:\n\n    <form class=\"form ajax\" action=\"/tasks/create/\" method=\"post\">...</form>\n\nWhen submitting this form the data in the form is serialized and sent to the\nserver at the url defined in ```action``` using the ```method``` that was\ndeclared in the ```form``` tag.\n\n\n### ```a.cancel```\n\nAny ```a``` tag that has a ```data-cancel-closest``` attribute defined will\ntrigger the cancel event handler. This simply removes from the DOM any elements\nfound using the selector defined in the ```data-cancel-closest``` attribute:\n\n    <a href=\"#\" data-cancel-closest=\".edit-form\" class=\"btn\">\n        Cancel\n    </a>\n\n\n## Events\n\nThere are three custom events that get triggered allowing you to customize the\nbehavior of eldarion-ajax.\n\n1. ```eldarion-ajax:begin```\n2. ```eldarion-ajax:success```\n3. ```eldarion-ajax:error```\n4. ```eldarion-ajax:complete```\n5. ```eldarion-ajax:modify-data```\n\nAll events are triggered on the element that is declared to be ajax. For example,\nif you had a ```<a href=\"/tasks/2323/delete/\" class=\"ajax\" data-method=\"post\">```\nlink, the trigger would be fired on the ```<a>``` element. This, of course,\nbubbles up, but allows you to easily listen only for events on particular tags.\n\nEvery event also sends as its first parameter, the element itself, in case you\nwere listening at a higher level in the chain, you still would have easy access to\nthe relevant node.\n\n\n### ```eldarion-ajax:begin```\n\nThis is the first event that fires and does so before any ajax activity starts.\nThis allows you to setup a spinner, disable form buttons, etc. before the\nrequests starts.\n\nA single argument is sent with this event and is the jQuery object for the node:\n\n    $(document).on(\"eldarion-ajax:begin\", function(evt, $el) {\n        $el.html(\"Processing...\");\n    });\n\n\n### ```eldarion-ajax:success```\n\nThis event is triggered if the request succeeds. Four arguments are passed with\nthis event: the jQuery object; the data returned from the server; a string\ndescribing the status; and the jqXHR object:\n\n    $(document).on(\"eldarion-ajax:success\", \"[data-prepend-inner]\", function(evt, $el, data, textStatus, jqXHR) {\n        var $node = $($el.data(\"prepend-inner\"));\n        $node.data(data.html + $node.html());\n    });\n\n\n### ```eldarion-ajax:error```\n\nThis event is triggered if the request fails. Four arguments are also passed\nwith this event: the jQuery object, the jqXHR object; a string describing the\ntype of error that occurred; and an optional exception object. Possible values\nfor the third argument (besides null) are \"timeout\", \"error\", \"abort\", and\n\"parsererror\". When an HTTP error occurs, the fourth argument receives the\ntextual portion of the HTTP status, such as \"Not Found\" or \"Internal Server\nError.\"\n\n\n### ```eldarion-ajax:complete```\n\nThis event is triggered when the request finishes (after the above `success` and\n`error` events are completed). This is triggered from the document rather than\nthe element in context as the handlers processing success messages could replace\nthe DOM element and therefore would prevent the event from reaching your\nlistener. The element is always passed as the first argument with this event\n(even if it no longer exists in the DOM). In response to a successful request,\nthe arguments passed with this event are the same as those of the `success`\nevent: the element, data, textStatus, and the jqXHR object. For failed requests\nthe arguments are the same as those of the `error` event: the element, the jqXHR\nobject, textStatus, and errorThrown.\n\n\n### ```eldarion-ajax:modify-data```\n\nThis is triggered with jQuery's `triggerHandler` so it functions more like a\ncallback. If you listen for it, you have to listen on the same element that you\nhave wired up to send AJAX data on as the event doesn't bubble up. Also, it will\nsend the original data that it serialized as a parameter and if you want to\nchange the data at all, you must return new data from the function handling the\nevent. Otherwise, the original data will be used.\n\n\n## Handlers: A Framework\n\nThe events provided above allow you to roll your own handlers in such a way to\nreally customize how you want your application to respond to server responses. A\nlot have been provided (see the section below), but here is a quick primer on\nwriting your own.\n\n    $(function ($) {\n        CustomHandlers = {};\n        \n        CustomHandlers.prototype.replaceFadeIn = function (e, $el, data) {\n            $($el.data(\"replace-fade-in\")).replaceWith(data.html).hide().fadeIn();\n        };\n        \n        $(function() {\n            $(document).on(\"eldarion-ajax:success\", \"[data-replace-fade-in]\", CustomHandlers.prototype.replaceFadeIn);\n        });\n    }(window.jQuery));\n\nThis gives you a lot of flexibility. For example, if you don't like how the\nbatteries included approach treats server response data, you can drop the\ninclusion of ```eldarion-ajax-handlers.js``` and roll your own.\n\n\n## Handlers: Batteries Included\n\nThere are three data attributes looked for in the response JSON data:\n\n1. ```location```\n2. ```html```\n3. ```fragments```\n\nIf ```location``` is found in the response JSON payload, it is expected to be a URL\nand the browser will be immediately redirected to that location. If, on the other hand\nit is not present, then the processing rules below will be processed based on\nwhat attributes are defined.\n\nIf you have a ```fragments``` hash defined, it should contain a list of key/value\npairs where the keys are the selectors to content that will be replaced, and the\nvalues are the server-side rendered HTML content that will replace the elements\nthat match the selection.\n\nYou can define both ```html``` to be processed by the declaritive rules defined\nbelow and the ```fragements``` at the same time. This gives you the ability to\nfor example replace the form you submited with ```html``` content while at the\nsame time updating multiple bits of content on the page without having to\nrefresh them.\n\nThere are five different ways that you can declare an ```html``` response\nwithout a ```location``` directive be processed:\n\n1. Append\n2. Refresh\n3. Refresh Closest\n4. Replace\n5. Replace Closest\n\nHere is where it can get fun as all of the values for these processing directives are\njust CSS selectors. In addition they can be multiplexed. You can declare all of them\nat the same time if you so desire. A CSS selector can easily be written to address\nmultiple different blocks on the page at the same time.\n\nBest to just see some examples.\n\n### Append\n\nUsing ```data-append``` allows you to specify that the ```data.html``` returned in the\nserver response's JSON be appended to the elements found in the specified CSS selector:\n\n```\n<a href=\"/tasks/12342/done/\" class=\"btn ajax\" data-method=\"post\"\n                                              data-append=\".done-list\">\n    <i class=\"icon icon-check\"></i>\n    Done\n</a>\n```\n\n### Refresh\n\nUsing the ```data-refresh``` attribute lets you define what elements, if selected by the\nCSS selector specified for its value, get **_refreshed_**. Elements that are selected will\nget refreshed with the contents of the url defined in their ```data-refresh-url```\nattribute:\n\n```\n<div class=\"done-score\" data-refresh-url=\"/users/paltman/done-score/\">...</div>\n\n<div class=\"done-list\">...</div>\n\n<a href=\"/tasks/12342/done/\" class=\"btn ajax\" data-method=\"post\"\n                                              data-append=\".done-list\"\n                                              data-refresh=\".done-score\">\n    <i class=\"icon icon-check\"></i>\n    Done\n</a>\n```\n\nIn this example, the ```.done-list``` will be appended to with the ```data.html``` returns from \nthe AJAX post made as a result of clicking the button and simultaneously, the ```.done-score```\nwill refresh itself by fetching (GET) JSON from the url defined in ```data-refresh-url``` and\nreplacing itself with the contents of ```data.html``` that is returned.\n\n### Refresh Closest\n\nThis works very much in the same way as ```data-refresh``` however, the uses jQuery's ```closest```\nmethod to interpret the selector.\n\n### Replace\n\nSometimes you want to neither refresh nor append to existing elements but you want to just replace\nthe content with whatever it is that is returned from the server. This is what ```data-replace```\nis for.\n\n### Replace Closest\n\nThis works very much in the same way as ```data-replace``` however, the uses jQuery's ```closest```\nmethod to interpret the selector.\n\n```\n<div class=\"done-score\" data-refresh-url=\"/users/paltman/done-score/\">...</div>\n\n<div class=\"done-list\">...</div>\n\n<div class=\"results\"></div>\n\n<a href=\"/tasks/12342/done/\" class=\"btn ajax\" data-method=\"post\"\n                                              data-append=\".done-list\"\n                                              data-refresh=\".done-score\"\n                                              data-replace=\".results\">\n    <i class=\"icon icon-check\"></i>\n    Done\n</a>\n```\n\nIt is rare that you'll add/use all of these processing methods combined like this. Usually it will\njust be one or the other, however, I add them all here to illustrate the point that they are\nindependently interpreted and executed.\n\n\n## Commercial Support\n\nThis project, and others like it, have been built in support of many of Eldarion's\nown sites, and sites of our clients. We would love to help you on your next project\nso get in touch by dropping us a note at info@eldarion.com.\n","maintainers":[{"name":"paltman","email":"paltman@gmail.com"}],"time":{"modified":"2022-06-16T07:19:45.846Z","created":"2015-02-20T22:14:58.256Z","0.12.0":"2015-02-20T22:14:58.256Z","0.13.0":"2015-04-14T15:29:10.591Z","0.14.0":"2015-07-31T15:42:12.335Z","0.15.0":"2015-08-15T15:01:55.406Z","0.16.0":"2016-12-14T19:13:19.337Z"},"homepage":"https://github.com/eldarion/eldarion-ajax#readme","keywords":["ajax"],"repository":{"type":"git","url":"git://github.com/eldarion/eldarion-ajax.git"},"author":{"name":"Patrick Altman"},"bugs":{"url":"https://github.com/eldarion/eldarion-ajax/issues"},"license":"BSD","readmeFilename":"README.md","users":{"paltman":true}}