CodeIgniter视图页编写JS脚本及Ajax删除事件失效问题求助

Hey there! Let's break down your questions step by step since you're new to CodeIgniter—no worries, we've all been stuck on these exact issues when starting out.

There are two common, reliable ways to include JS in your views:

• Inline scripts directly in the view: Drop a <script> tag anywhere in your view, but always place it after any libraries (like jQuery) it depends on. For example:

  <!-- At the end of your <body> tag, after loading jQuery -->
  <script>
    // Your custom JS code here
  </script>
  

• Link external JS files: Use CodeIgniter’s base_url() helper to reference scripts stored in an assets folder (create this folder if you don’t have it). First, ensure base_url is set correctly in application/config/config.php, then add:

  <script src="<?= base_url('assets/js/custom-scripts.js') ?>"></script>
  

If your click event works in a main JS file but not inline in the view, here are the most likely fixes:

Issue 1: jQuery isn’t loaded before your script #

If your inline script runs before jQuery finishes loading, it’ll throw an error and fail. Wrap your code in $(document).ready() to ensure it runs only after the page (and jQuery) is fully loaded:

<!-- First load jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Then your inline script -->
<script>
  $(document).ready(function() {
    $('#test-button').click(function() {
      alert('Finally works!');
    });
  });
</script>

Issue 2: The button is dynamically generated #

If your button is added to the page after the initial load (e.g., loaded via PHP loops or other AJAX calls), direct click events won’t bind to it. Use event delegation instead:

$(document).on('click', '#test-button', function() {
  alert('Dynamic button click works!');
});

This listens for clicks on the entire document, then checks if the target matches your button selector—perfect for dynamic content.

Issue 3: jQuery conflict with other libraries #

If other JS libraries on your page use the $ symbol, it can clash with jQuery. Fix this by either:

• Replacing $ with jQuery in your code, or
• Using noConflict() to wrap your jQuery code:

  jQuery(document).ready(function($) {
    // Now you can use $ safely here
    $('#test-button').click(function() {
      alert('No more conflicts!');
    });
  });
  

Let’s build this out step by step:

Step 1: Add delete buttons in your view #

Give each button a data-id attribute to store the item’s ID (so we know which one to delete):

<!-- Example: Inside a loop of items -->
<div class="item-row">
  <p><?= $item->name ?></p>
  <button class="delete-btn" data-id="<?= $item->id ?>">Delete</button>
</div>

Step 2: Write the AJAX script #

Wrap this in $(document).ready() and place it after jQuery loads:

$(document).ready(function() {
  $('.delete-btn').click(function(e) {
    e.preventDefault(); // Prevent any default button behavior
    const itemId = $(this).data('id');
    
    // Confirm before deleting
    if (confirm('Are you sure you want to delete this item?')) {
      $.ajax({
        url: '<?= base_url('items/delete') ?>', // Replace with your controller/method
        type: 'POST',
        data: {
          id: itemId,
          // Include CSRF token if CodeIgniter's CSRF protection is enabled
          '<?= $this->security->get_csrf_token_name() ?>': '<?= $this->security->get_csrf_hash() ?>'
        },
        success: function(response) {
          const res = JSON.parse(response);
          if (res.success) {
            // Remove the item from the page
            $(this).closest('.item-row').remove();
            alert('Item deleted successfully!');
          } else {
            alert('Failed to delete the item.');
          }
        },
        error: function(xhr, status, error) {
          console.error('AJAX Error:', error);
          alert('Something went wrong. Please try again.');
        }
      });
    }
  });
});

Step 3: Create the controller method #

In your controller (e.g., Items.php), add a delete method to handle the request:

public function delete() {
  // Get the item ID from the POST request
  $itemId = $this->input->post('id');
  
  // Call your model to delete the item
  $deleteSuccess = $this->item_model->delete_item($itemId);
  
  // Return JSON response
  echo json_encode(['success' => $deleteSuccess]);
  exit; // Stop further execution
}

Step 4: Add the delete method in your model #

In your model (e.g., Item_model.php), write the code to delete from the database:

public function delete_item($id) {
  // Delete from your table where ID matches
  return $this->db->delete('your_items_table', ['id' => $id]);
}

A quick note: Make sure CSRF protection is configured correctly in config.php if you’re using it—this prevents malicious requests.

内容的提问来源于stack exchange，提问作者Ahmed Gaber