只有在开发人员工具中设置了调试点时，Javascript / ajax脚本才有效

Question

I'm facing the following problem and can't seem to figure it out. We are developing a site with Codeigniter 3. For uploading files to the site I use Dropzone.js

I want to achieve the following: During the upload the user has the chance to cancel the upload process. addRemoveLinks: true

Now at the same time, I'm saving file parameters(id, name, size etc...) to my database. When the cancel upload button is clicked, the upload is stopped, but by that time, the video parameters had already been saved to the database. On the site, video thumbnails are loaded based on the database rows, so when cancelling the upload, I want to delete the associated row from db.

The problem is, that my code only works if I set a debugging point in Chrome developer tools but the processing time of the code is still pretty long.

Without the debugging point, the db row is not deleted.

Here is the code from my footer.php

<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- JS file -->
<script src="<?php echo asset_url(); ?>js/autocomplete/jquery.easy-autocomplete.min.js"></script> 

<!-- CSS file -->
<link rel="stylesheet" href="<?php echo asset_url(); ?>js/autocomplete/easy-autocomplete.css"> 

<!-- Tables -->
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>

<!-- Upload -->
<script src="<?php echo asset_url(); ?>js/dropzone.js"></script>

<script>
Dropzone.options.dropzonejsform = {
    maxFilesize: 20000,
    addRemoveLinks: true,
    dictCancelUpload: "<p style =\"font-size:115%; display:block\">Cancel upload<p>",
    dictRemoveFile: "",
    dictDefaultMessage: "<h3>Drag'n'drop files <br> or <button type='button' class='btn btn-outline-success' value='Upload'>click here</button> to upload</h3>",
    init: function() {

        this.on("removedfile", function(file) {
            var name = file.name;
            $.ajax({
                cache: false,
                url: './delete2/' + name,
                type: "GET",
                success: function(html) {
                    location.reload();
                }
            });

        });

        this.on("queuecomplete", function() {
            location.reload();
        });
    }
}

</script>

For some reason, without the debugging point at $ajax, the code doesn't delete from db. Any suggestions?

Edit: @Alex, here are the upload and delete functions

public function delete_video2($video_name){

    $this->db->where('video_name', $video_name);
    $this->db->delete('videos');        

}

// Add Video
public function add_video()
{

    $this->load->helper('url');

    //allowed file types
    $arr_file_types = ['video/mp4', 'video/avi', 'video/mov', 'video/3gp', 'video/mpeg'];

    // Target Path
    $target_dir = "./assets/upload/";
    // Assigining Random Name
    $File_Name          = $_FILES["file"]["name"];          // Get file name
    $File_Size          = $_FILES["file"]["size"];          // Get file name
    $File_Ext           = substr($File_Name, strrpos($File_Name, '.')); // Get file extention
    $Random_Number      = rand(0, 9999999999);                          // Random number to be added to name.
    $NewFileName        = $Random_Number.$File_Ext;                     // New file name

    // Uploading name to dataase

    move_uploaded_file($_FILES['file']['tmp_name'], $target_dir.$NewFileName);
    // echo "true";
    // die();

    $user = $this->ion_auth->user()->row();
    $id = $user->id;

    $data = array(
        'reference_id' => $File_Ext,
        'user_id' => $id,
        'video_name' => $File_Name,
        'video_url' => $NewFileName,
        'video_size' => $File_Size,
    );

    return $this->db->insert('videos', $data);

}

Relevenat parts of the view

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-outline-upload" style="font-size:20px;" data-toggle="modal" data-target="#myModal">
  <i class="fa fa-plus-square"></i> Upload New Video
</button>

<!-- Upload Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog-index" style="max-width:350px">
    <div class="modal-content">

      <!--Dropzone upload form-->
      <?php $attributes = array('id' => 'dropzonejsform', 'class' => 'dropzone', 'enctype' => 'multipart/form-data' ); ?>
      <?php echo form_open("upload", $attributes);?>
      <?php echo form_close();?>

    </div>
  </div>
</div>

Answer 1

It's possible that your request to delete is happening at a point where other processing (such as the upload of files) blocks it in some way, and that by adding your breakpoint you delay the ajax call until after this processing has finished - which is why you only see it working then.

Make sure that the database has finished being written to etc. and is in a state to delete the entry before making the delete request.