{"id":16934400,"url":"https://github.com/jamiepine/easyajax-jquery-plugin","last_synced_at":"2025-07-19T04:31:19.954Z","repository":{"id":97678910,"uuid":"118372090","full_name":"jamiepine/EasyAJAX-jQuery-Plugin","owner":"jamiepine","description":"An incredibly useful jQuery plugin to implement AJAX loading / form submission into any website or app. EasyAJAX uses HTML markup and tags to activate an AJAX link / form.","archived":true,"fork":false,"pushed_at":"2018-01-22T10:13:05.000Z","size":17,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T04:23:17.941Z","etag":null,"topics":["ajax","csrf","jquery","jquery-ajax","jquery-plugin","laravel"],"latest_commit_sha":null,"homepage":null,"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/jamiepine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-21T20:41:28.000Z","updated_at":"2024-11-17T06:13:19.000Z","dependencies_parsed_at":"2023-05-05T18:15:03.406Z","dependency_job_id":null,"html_url":"https://github.com/jamiepine/EasyAJAX-jQuery-Plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jamiepine/EasyAJAX-jQuery-Plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamiepine%2FEasyAJAX-jQuery-Plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamiepine%2FEasyAJAX-jQuery-Plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamiepine%2FEasyAJAX-jQuery-Plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamiepine%2FEasyAJAX-jQuery-Plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamiepine","download_url":"https://codeload.github.com/jamiepine/EasyAJAX-jQuery-Plugin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamiepine%2FEasyAJAX-jQuery-Plugin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265888885,"owners_count":23844524,"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","csrf","jquery","jquery-ajax","jquery-plugin","laravel"],"created_at":"2024-10-13T20:52:01.281Z","updated_at":"2025-07-19T04:31:19.949Z","avatar_url":"https://github.com/jamiepine.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n# EasyAJAX jQuery Plugin\n\nAn incredibly useful jQuery plugin to implement AJAX loading / form submission into any website or app, with full support for CSRF tokens. EasyAJAX uses HTML markup and tags to add AJAX to any link / form. \n\nCheck out the **[demo](#)** to see it in action!\n### Installation\nMake sure you have the latest version of jQuery installed and called before this plugin. Insert the following into your `\u003chead\u003e` tag, just like any other jQuery script.\n```html\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/jquery.easyajax.min.js\"\u003e\u003c/script\u003e\n```\n### Activate a link\nTo turn a enable AJAX on a html element use the `ajax-enable` as shown below:\n\n```html\n\u003ca href=\"#\" ajax-enable id=\"about\"\u003eAbout Me\u003c/a\u003e\n\u003c!-- or --\u003e\n\u003cspan ajax-enable class=\"dropdown_carat\"\u003e\u003c/a\u003e\n```\nThis tag can be used on any element, but remember it will make the entire element clickable, so be careful about using it on large elements. \n\n**Note**: For `\u003ca\u003e` tags the HREF value will be disabled so long as Javascript is on, but it's always best practice to include a working link to the content you're linking to if AJAX fails for whatever reason.\n\nWe do need some more parameters in order to actually make the link clickable. \n\n### Parameters\nHere's a list of all the supported parameters and their purpose:\n\n\n| Parameter | Action | Accepts Value |\n|-----|-----|-----|\n| `ajax-enable` | Enables EasyAJAX plugin on element |*No*\n| `ajax-action` |  The URL of the POST action | *Yes*\n| `ajax-success` | Action for success event |*Yes*\n| `ajax-container` | Instructs where to place HTML results |*Yes*\n| `[ajax-container-default]` |  If no `ajax-container` is specified, use this once on the default DIV for results on this page | *No*\n| `csrf-token` |  Field for CSRF token | *Yes*\n\n\n\nWe'll go through each of these individually below, but first here's a little about how forms are handled.\n\n### Forms\nYou need not worry about mapping any variables to your form elements manually. EasyAJAX automatically gathers the necessary form data and sends it to the URL you specified through the `ajax-action` variable.\n\nThe data is stored as a jQuery object, if you're not familiar with those, think of them like an array... that can have arrays within arrays. **Arrayception**.\n\nArrays have two elements, a **key** and a **value**.\n\n    {key: value, key: value, key: value}\n\nHere's an example of how our data is saved:\n\n    {\n    ajaxAction: \"/path/to/php\",\n    ajaxSuccess: \"msg\",\n    _token: \"Kq7bNXtT4MfxIYg9xsxPIYoK03aqwnk0HktH2eeR\"\n    formElements: {\n\t\t\t\t   \"nameField\": \"Jamie Pine\",\n\t\t\t\t   \"ageField\": 22,\n\t\t\t\t   \"isAwesomeField\": true,\n\t\t\t\t  }\n    }\nAs you can see the `formElements` **key** has a **value** that is an array. Obviously regular links will not have a `formElements` field so this conveniently won't show up unless you're using a form. \n\n### CSRF Tokens\n\nThe `_token` value is the CSRF token. If you don't know what a CSRF token is, this probably won't matter to you, but I recommend you look it up. It's a pretty important security measure needed when submitting POST requests. The name **_token** lines up with PHP framework Laravel's expectations for what the CSRF token should be called, so if you're using that this'll work a treat. If you need to change the name, I'll implement an option to do that soon, for now just find change it in the the plugin JS file.\n\n### Actions\nUsing the `ajax-action` tag, choose from a set of preset actions or create your own through jQuery.\n\nUsage: `ajax-action=\"load\"`\n\n\n| Parameter | Action |\n|-----|-----|\n| `load` | Inserts server response as HTML inside the  `ajax-container` HTML tag (eg. div, main, #container)\n| `msg` |  Displays an inline alert box at the `ajax-container` \n| `custom` | Create your own success action (see below) \n\n**Custom Actions**\n\nCreate a custom action by pasting this script just before your `\u003c/body\u003e` tag.\n```javascript\najaxCustomAction(id) {\n\n}\n```\n**Results Containers**\nThere are several ways to specify a container to append the server response to, whether you're displaying a success message or loading in an entire page through AJAX. \n\nThe first way is to specify the `ajax-container` directly on the link like so:\n```html\n\u003ca href=\"#\" ajax-enable ajax-container=\"#main\" id=\"about\"\u003eAbout Me\u003c/a\u003e\n```\nThe second way \n\n**PHP Examples**\n\n**PHP Examples**\n    \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamiepine%2Feasyajax-jquery-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamiepine%2Feasyajax-jquery-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamiepine%2Feasyajax-jquery-plugin/lists"}