JavaScript Standards (JSS)

This document outlines the JavaScript standards and conventions used in the project. Following these standards ensures consistent and maintainable JavaScript code across the application.

AJAX Form Handling

We use data attributes to define JavaScript behaviors for forms and other elements. This approach keeps our HTML clean and separates behavior from structure.

1. data-jsc="ajax-form" for onsubmit event

Use this attribute on form elements to handle form submissions via AJAX:

<form action="/api/users" method="POST" data-jsc="ajax-form">
    <!-- Form fields -->
    <button type="submit">Submit</button>
</form>

This will:

• Prevent the default form submission
• Serialize the form data
• Send an AJAX request to the form's action URL
• Handle the response appropriately

2. data-jsc="ajax-form-onChange" for onchange event

Use this attribute on form elements that should be submitted when any field changes:

<form action="/api/filter-results" method="GET" data-jsc="ajax-form-onChange">
    <select name="category">
        <option value="">All Categories</option>
        <option value="1">Category 1</option>
        <option value="2">Category 2</option>
    </select>
    <!-- Other filter fields -->
</form>

This will:

• Detect changes to any form field
• Automatically submit the form via AJAX when a change occurs
• Update the UI with the response

3. data-jsc="ajax-request" for onclick event

Use this attribute on clickable elements (like buttons or links) to trigger AJAX requests:

<button 
    data-jsc="ajax-request" 
    data-url="/api/like-post/123" 
    data-method="POST"
>
    Like
</button>

This will:

• Prevent the default click action
• Send an AJAX request to the specified URL with the specified method
• Handle the response appropriately

Additional Attributes

You can use additional data attributes to customize the behavior:

• data-confirm="Are you sure?" - Show a confirmation dialog before proceeding
• data-method="PUT" - Specify the HTTP method (default is GET for links, form method for forms)
• data-redirect="/success-page" - Redirect to a specific URL after successful submission
• data-target="#result-container" - Update a specific element with the response

NOTE:

When implementing these behaviors, ensure that:

• All AJAX requests include CSRF tokens for Laravel
• Error responses are properly handled and displayed to the user
• Loading states are indicated to provide feedback during requests
• Success and error messages are displayed appropriately

Vue.js Components

For more complex interactive elements, we use Vue.js components. When creating Vue components:

1. Use single-file components (.vue files)
2. Follow the Vue.js style guide
3. Use props for passing data to components
4. Emit events for communicating with parent components
5. Use Vuex for state management when appropriate

Example Vue component:

<template>
  <div class="user-card">
    <h3>{{ user.name }}</h3>
    <p>{{ user.email }}</p>
    <button @click="$emit('edit', user.id)">Edit</button>
  </div>
</template>

<script>
export default {
  name: 'UserCard',
  props: {
    user: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.user-card {
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

JavaScript Best Practices

1. Use ES6+ features when possible
2. Avoid global variables
3. Use const and let instead of var
4. Use arrow functions for callbacks
5. Use async/await for asynchronous operations
6. Add appropriate error handling for all asynchronous operations
7. Use destructuring for cleaner code
8. Comment complex logic
9. Use meaningful variable and function names
10. Keep functions small and focused on a single responsibility