PHP提交数据后页面重载功能失效的问题求助

Let's break down why your page reload isn't triggering and fix it step by step.

First, let's look at the key parts of your code that are supposed to handle the reload:
In your AJAX done callback, when out.status == 'form', you run:

$('.form-msg').html(out.msg);
effect_msg_form();
location.reload();

Common Issues & Fixes #

1. Confirm the code is actually reaching the reload line
   Add a console log to verify if the condition is being hit:

   if (out.status == 'form') {
       console.log("Form validation failed, attempting reload..."); // Add this
       $('.form-msg').html(out.msg);
       effect_msg_form();
       location.reload();
   }
   

   Open your browser's dev tools (F12) and check the Console tab. If you don't see this log, the issue is that out.status isn't actually equal to 'form'—double-check your controller's response JSON for typos or incorrect status values.

2. effect_msg_form() might be blocking or causing an error
   If effect_msg_form() contains asynchronous operations (like animations) or throws an error, it could prevent location.reload() from executing.

   • Fix 1: Wait for animations to finish before reloading
     Modify effect_msg_form() to accept a callback that runs after animations complete:

     function effect_msg_form(callback) {
         $('.form-msg').fadeIn('fast', function() {
             setTimeout(function() {
                 $('.form-msg').fadeOut('fast');
                 // Run the callback after the animation ends
                 if (typeof callback === 'function') {
                     callback();
                 }
             }, 3000);
         });
     }
     

     Then update your AJAX code to pass the reload as the callback:

     effect_msg_form(function() {
         location.reload();
     });
     

   • Fix 2: Test without effect_msg_form() first
     Temporarily comment out effect_msg_form(); and see if location.reload() works. If it does, the problem is in that function—debug it for errors or adjust its logic.

3. Use a more reliable reload method
   Sometimes location.reload() can be finicky due to browser caching. Try replacing it with:

   window.location.href = window.location.href;
   

   This forces a full page navigation instead of a reload, which often works more consistently.

4. Ensure e.preventDefault() is correctly placed
   Move e.preventDefault() to the very start of your submit handler to make sure the form's default submit action (which would refresh the page on its own) is blocked immediately:

   $('#form-tambah-posisi').submit(function(e) {
       e.preventDefault(); // Move this here
       var data = $(this).serialize();
       $.ajax({
           method: 'POST',
           url: '<?php echo base_url('Posisi/prosesTambah'); ?>',
           data: data
       })
       // ... rest of your code
   });
   

5. Check for invalid JSON responses
   If your controller returns malformed JSON, jQuery.parseJSON(data) will fail, and none of the code after that will run. Add a log to check the raw response:

   .done(function(data) {
       console.log("Raw response:", data); // Add this
       var out = jQuery.parseJSON(data);
       // ... rest of your code
   })
   

   If the response isn't valid JSON, fix your controller's echo json_encode($out);—make sure no other output (like debug messages or whitespace) is sent before this line, as that will break the JSON.

Quick Test to Isolate the Issue #

To narrow things down, replace your entire done callback with this minimal version:

.done(function(data) {
    var out = jQuery.parseJSON(data);
    console.log(out.status);
    if (out.status == 'form') {
        alert("About to reload!");
        location.reload();
    }
})

If you see the alert and the page reloads, the problem was in the other parts of your callback (like tampilPosisi() or effect_msg_form()). If not, the issue is either the condition not being met or a problem with the AJAX response.

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