Скрипт Javascript / ajax работает, только если точка отладки установлена ​​в инструментах разработчика

Я столкнулся со следующей проблемой и не могу ее понять. Мы разрабатываем сайт на Codeigniter 3. Для загрузки файлов на сайт использую Dropzone.js

Я хочу добиться следующего: Во время загрузки у пользователя есть возможность отменить процесс загрузки. addRemoveLinks: true

В то же время я сохраняю параметры файла (идентификатор, имя, размер и т. д.) В свою базу данных. При нажатии кнопки отмены загрузки загрузка останавливается, но к этому времени параметры видео уже были сохранены в базе данных. На сайте миниатюры видео загружаются на основе строк базы данных, поэтому при отмене загрузки я хочу удалить связанную строку из db.

Проблема в том, что мой код работает только в том случае, если я установил точку отладки в инструментах разработчика Chrome, но время обработки кода все еще довольно велико.

Без точки отладки строка db не удаляется.

Вот код из моего 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>

По какой-то причине без точки отладки в $ ajax код не удаляется из db. Какие-либо предложения?

Редактировать: @Alex, вот функции загрузки и удаления

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 части обзора

<!-- 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>

вызовите функцию вставки базы данных внутри события успеха: dropzonejs.com/#event-success

Vickel 09.08.2018 18:45

показать как функцию удаления, так и функцию загрузки, а также соответствующие области представления (вы показываете только js)

Alex 10.08.2018 00:40

Я их добавил.

Csisanyi 10.08.2018 16:17
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
125
1

Ответы 1

Возможно, ваш запрос на удаление происходит в момент, когда другая обработка (например, загрузка файлов) каким-то образом блокирует его, и что, добавляя точку останова, вы задерживаете вызов ajax до тех пор, пока эта обработка не будет завершена - вот почему вы только тогда видите, как это работает.

Перед отправкой запроса на удаление убедитесь, что запись в базу данных завершена и находится в состоянии удалить запись.

Другие вопросы по теме