ap-laravel-ajax-helper 1.0.0

package/LICENSE

@@ -0,0 +1,27 @@
+
+---
+
+### ✅ `LICENSE`
+
+```txt
+MIT License
+
+Copyright (c) 2025 AkashAp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights  
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell     
+copies of the Software, and to permit persons to whom the Software is         
+furnished to do so, subject to the following conditions:                      
+
+The above copyright notice and this permission notice shall be included in    
+all copies or substantial portions of the Software.                           
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR    
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,      
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE   
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER        
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN     
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# Laravel AJAX Helper
+
+A lightweight utility to simplify Laravel AJAX form requests with validation error handling.
+
+## 🚀 Usage
+
+### 📄 HTML Form Example
+
+```html
+<form id="loginForm">
+  <input type="email" name="email" />
+  <span class="error-email text-red-500"></span>
+
+  <input type="password" name="password" />
+  <span class="error-password text-red-500"></span>
+
+  <button id="loginBtn">Login</button>
+</form>
+```
+
+### 🧠 JavaScript Usage
+
+```js
+import laravelAjax from 'laravel-ajax-helper';
+
+laravelAjax({
+  url: '/login',
+  method: 'POST',
+  formId: 'loginForm',
+  buttonId: 'loginBtn',
+  loadingText: 'Logging in...'
+})
+  .then(response => {
+    console.log('Success:', response);
+  })
+  .catch(errors => {
+    console.log('Validation or Server Errors:', errors);
+  });
+```
+
+## 🧰 Parameters
+
+| Parameter     | Type   | Required | Description                                                          |
+| ------------- | ------ | -------- | -------------------------------------------------------------------- |
+| `url`         | string | ✅ Yes    | The Laravel route URL for the AJAX request.                          |
+| `method`      | string | ❌ No     | Request method: 'POST', 'GET', 'PUT', 'DELETE'. Default: 'POST'.     |
+| `formId`      | string | ✅ Yes    | ID of the form element (do not pass form data manually).             |
+| `buttonId`    | string | ❌ No     | ID of the button to show a loading spinner during request.           |
+| `loadingText` | string | ❌ No     | Text to show with spinner during the request. Default: 'Loading...'. |
+
+## ❗ Error Handling
+
+* Laravel validation errors (422) are automatically displayed in elements with class `.error-[field_name]`.
+
+  * **Example:** For field `email`, use `.error-email`
+* On other errors (like 500), a generic error is returned.
+
+## 📁 File Structure (Simplified)
+
+```
+laravel-ajax-helper/
+├── dist/
+│   └── index.js         # Transpiled output
+├── src/
+│   └── index.js         # Main AJAX function
+├── README.md
+├── LICENSE
+├── package.json
+```
+
+## 🪪 License
+
+This project is licensed under the [MIT License](./LICENSE).
+
+## 🙌 Contributing
+
+Pull requests are welcome! Feel free to open issues or suggest improvements.
+
+## 💬 Author
+
+Akash Ap – [@akashap](https://github.com/aakashap01)
+Built with ❤️ for Laravel developers.

package/dist/index.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = laravelAjax;
+function laravelAjax(_ref) {
+  var url = _ref.url,
+    _ref$method = _ref.method,
+    method = _ref$method === void 0 ? 'POST' : _ref$method,
+    _ref$formId = _ref.formId,
+    formId = _ref$formId === void 0 ? null : _ref$formId,
+    _ref$buttonId = _ref.buttonId,
+    buttonId = _ref$buttonId === void 0 ? null : _ref$buttonId,
+    _ref$loadingText = _ref.loadingText,
+    loadingText = _ref$loadingText === void 0 ? 'Loading...' : _ref$loadingText;
+  return new Promise(function (resolve, reject) {
+    if (!url) return reject({
+      error: 'URL is required.'
+    });
+    if (!formId) return reject({
+      error: 'formId is required.'
+    });
+    var form = document.getElementById(formId);
+    if (!form) return reject({
+      error: "Form with ID \"".concat(formId, "\" not found.")
+    });
+    var formData = new FormData(form);
+    var btn = buttonId ? document.getElementById(buttonId) : null;
+    var originalButtonText = btn ? btn.innerHTML : null;
+
+    // Disable and show loading on button
+    if (btn) {
+      btn.disabled = true;
+      btn.innerHTML = "<span class=\"spinner-border spinner-border-sm me-2\"></span>".concat(loadingText);
+    }
+
+    // Clear all validation error messages
+    document.querySelectorAll('[class^="error-"]').forEach(function (el) {
+      if (el.tagName === 'DIV' || el.tagName === 'SPAN') {
+        el.innerText = '';
+      }
+    });
+    $.ajax({
+      url: url,
+      method: method,
+      data: formData,
+      contentType: false,
+      processData: false,
+      cache: false,
+      success: function success(response) {
+        if (btn) {
+          btn.innerHTML = originalButtonText;
+          btn.disabled = false;
+        }
+        resolve(response);
+      },
+      error: function error(xhr) {
+        if (xhr.status === 422) {
+          var _xhr$responseJSON;
+          var errors = ((_xhr$responseJSON = xhr.responseJSON) === null || _xhr$responseJSON === void 0 ? void 0 : _xhr$responseJSON.errors) || {};
+          for (var field in errors) {
+            var target = document.querySelector(".error-".concat(field));
+            if (target && (target.tagName === 'DIV' || target.tagName === 'SPAN')) {
+              target.innerText = errors[field][0];
+            }
+          }
+          reject(errors);
+        } else {
+          reject({
+            error: 'Unexpected error occurred.'
+          });
+        }
+        if (btn) {
+          btn.innerHTML = originalButtonText;
+          btn.disabled = false;
+        }
+      }
+    });
+  });
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "ap-laravel-ajax-helper",
+  "version": "1.0.0",
+  "description": "A lightweight JavaScript utility for Laravel-style AJAX requests.",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "scripts": {
+    "build": "babel src --out-dir dist"
+  },
+  "author": "AkashAp",
+  "license": "MIT",
+  "keywords": [
+    "laravel",
+    "ajax",
+    "form",
+    "validation",
+    "jquery"
+  ],
+  "devDependencies": {
+    "@babel/cli": "^7.28.0",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "rollup": "^3.0.0"
+  },
+  "peerDependencies": {
+    "jquery": ">=3.0.0"
+  },
+  "files": [
+    "dist/",
+    "src/",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/src/index.js

@@ -0,0 +1,68 @@
+export default function laravelAjax({
+  url,
+  method = 'POST',
+  formId = null,
+  buttonId = null,
+  loadingText = 'Loading...',
+}) {
+  return new Promise((resolve, reject) => {
+    if (!url) return reject({ error: 'URL is required.' });
+    if (!formId) return reject({ error: 'formId is required.' });
+
+    const form = document.getElementById(formId);
+    if (!form) return reject({ error: `Form with ID "${formId}" not found.` });
+
+    const formData = new FormData(form);
+
+    const btn = buttonId ? document.getElementById(buttonId) : null;
+    const originalButtonText = btn ? btn.innerHTML : null;
+
+    // Disable and show loading on button
+    if (btn) {
+      btn.disabled = true;
+      btn.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span>${loadingText}`;
+    }
+
+    // Clear all validation error messages
+    document.querySelectorAll('[class^="error-"]').forEach((el) => {
+      if (el.tagName === 'DIV' || el.tagName === 'SPAN') {
+        el.innerText = '';
+      }
+    });
+
+    $.ajax({
+      url,
+      method,
+      data: formData,
+      contentType: false,
+      processData: false,
+      cache: false,
+      success: function (response) {
+        if (btn) {
+          btn.innerHTML = originalButtonText;
+          btn.disabled = false;
+        }
+        resolve(response);
+      },
+      error: function (xhr) {
+        if (xhr.status === 422) {
+          const errors = xhr.responseJSON?.errors || {};
+          for (const field in errors) {
+            const target = document.querySelector(`.error-${field}`);
+            if (target && (target.tagName === 'DIV' || target.tagName === 'SPAN')) {
+              target.innerText = errors[field][0];
+            }
+          }
+          reject(errors);
+        } else {
+          reject({ error: 'Unexpected error occurred.' });
+        }
+
+        if (btn) {
+          btn.innerHTML = originalButtonText;
+          btn.disabled = false;
+        }
+      },
+    });
+  });
+}