Несколько вызовов ajax на каждый вызов обновляют переменную - PullRequest
Новая
       7

Несколько вызовов ajax на каждый вызов обновляют переменную

0 голосов
/ 06 июля 2018

На моей странице у меня есть сценарий ajax, который содержит цепочку вызовов ajax, вложенных в функцию успеха друг друга, чтобы выполнялся следующий. Например - 

            $.ajax({
                data: {
                    action: 'polly_pros',
                    pollytext: text
                },
                type: 'post',
                url: polpro.ajax_url,
                cache: false,
                success: function(data) {
                    $('#player')[0].pause();
                    $('#player')[0].load();
                    var aud_dur = $('#aud_dur').val();
              // NEXT AJAX CALL                  
                    $.ajax({
                        data: {

В моей форме мой скрытый ввод - 

<input type="hidden" name="aud_dur" id="aud_dur" value="" />

На своей странице, чтобы обновлять скрытый ввод аудиофайла при его загрузке, я использую - 

var Aud = $('#player');
var aud_dur = $('#aud_dur');
Aud[0].addEventListener('loadeddata', function() {
    aud_dur.val($('#player')[0].duration);
});

В моем php-скрипте я пытаюсь получить значение следующим образом - 

$aud_dur = $_POST['aud_dur'];

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

Есть предложения?

EDIT

В моем коде ajax есть несколько вызовов, которые выполняются после успешного выполнения предыдущего.

ajax-вызов polly_pros создает аудиофайл, и следующий ajax-вызов предполагает получить оттуда длительность аудио, которую я также вводю в скрытый ввод.

Я могу получить длительность, если файл уже существует, но при создании файла динамически (как мне нужно сделать), я не могу получить значение продолжительности.

Это мой полный AJAX-код (несвязанные переменные удалены для упрощения) --- 

jQuery(document).on('click', '#make-vid', function(e) {
    e.preventDefault();
    var aud_dur;
    var pollytext = $('#pollytext').val();
    var path = $('#path').val();
    var post_id = $('#post_id').val();
    // AJAX CALL
    $.ajax({
        url: vformpro.ajax_url,
        data: {
            action: 'vform_pros',
            post_id: post_id,
        },
        type: 'POST',
        success: function(data) {
            console.log(data);
            var audio = $("#player");
            var post_id = $("#post_id").val();
            var aud_dur = $("#aud_dur").val();
            var tune_dur = $("#tune_dur").val();

            // AJAX CALL
            $.ajax({
                data: {
                    action: 'polly_pros',
                    post_id: post_id
                },
                type: 'post',
                url: polpro.ajax_url,
                cache: false,
                success: function(data) {
                    console.log(data);
                    $('#player')[0].pause();
                    $('#player')[0].load(function() {

                        // HERE I AM TRYING TO GET THE AUDIO DURATION UPON SUCCESS OF THIS AJAX CALL SO // THAT I CAN PASS IT TO THE FOLLOWING AJAX CALL

                        var Aud = $('#player');
                        var aud_dur = $('#aud_dur');
                        Aud[0].addEventListener('loadeddata', function() {
                            aud_dur.val($('#player')[0].duration);
                            console.log(aud_dur);
                        });

                    });
                    // AJAX CALL
                    $.ajax({
                        data: {
                            action: 'mvid_pros',
                            post_id: post_id,
                            aud_dur: aud_dur,
                            tune_dur: tune_dur
                        },
                        type: 'post',
                        url: mvidpro.ajax_url,
                        cache: false,
                        success: function(data) {
                            console.log(data);
                            $("#video-preview")[0].pause();
                            $("#video-preview")[0].load();
                        },
                        error: function() {
                            $('.load-text').text('Error on making Video.');
                        }
                    });
                },
                error: function(data) {
                    console.log(data);
                },
            });
        }
    });
});

UPDATE

Вот ссылка на полный код (WIP), чтобы лучше понять мой вопрос.

Ответы [ 3 ]

0 голосов
/ 17 августа 2018

У вас есть проблема с вашим кодом, правильно проведите рефакторинг вашего кода, и все будет в порядке:

P.S .: Я не смог запустить код, поэтому, пожалуйста, убедитесь, что вы правильно поместили переменные, чтобы код работал правильно. 

jQuery(document).on('click', '#make-vid', function(e) {
    e.preventDefault();
    var pollytext = $('#pollytext').val();
    var path = $('#path').val();
    var post_id = $('#post_id').val();
    var onAudioDataLoaded = function() {
        var aud_duration = $('#player')[0].duration;
        var tune_duration = $("#tune_dur").val();
        $('#aud_dur').val(duration);

        // AJAX CALL
        $.ajax({
            data: {
                action: 'mvid_pros',
                post_id: post_id,
                aud_dur: aud_duration,
                tune_dur: tune_duration
            },
            type: 'post',
            url: mvidpro.ajax_url,
            cache: false,
            success: onMvidProsSuccess,
            error: onMvidProsError
        });
    };
    var onMvidProsSuccess = function(data) {
        console.log(data);
        $("#video-preview")[0].pause();
        $("#video-preview")[0].load();
    };
    var onMvidProsError = function() {
        $('.load-text').text('Error on making Video.');
    };
    var onPolyProsError = function(data) {
        console.log(data);
    };
    var onPolyProsSuccess = function(data) {
        console.log(data);

        $('#player')[0].pause();
        $('#player')[0].load(function() {

            // HERE I AM TRYING TO GET THE AUDIO DURATION UPON SUCCESS OF THIS AJAX CALL SO // THAT I CAN PASS IT TO THE FOLLOWING AJAX CALL

            var Aud = $('#player');
            Aud[0].addEventListener('loadeddata', onAudioDataLoaded);
        });
    };
    var onFormPostSuccess = function(data) {
        console.log(data);
        // AJAX CALL
        $.ajax({
            data: {
                action: 'polly_pros',
                post_id: post_id
            },
            type: 'post',
            url: polpro.ajax_url,
            cache: false,
            success: onPolyProsSuccess,
            error: onPolyProsError
        });
    };
    // AJAX CALL
    $.ajax({
        url: vformpro.ajax_url,
        data: {
            action: 'vform_pros',
            post_id: post_id,
        },
        type: 'POST',
        success: onFormPostSuccess
    });
});
0 голосов
/ 22 августа 2018

(обновленный ответ)

Я все еще считаю, что основная проблема, вероятно, связана с $('#player')[0].load(function() {...}), который есть у вас, как в этом коде.

Я имею в виду, что если элемент с id из player является элементом audio, то function, предоставленный вами для load() метода этого элемента audio, никогда не будет вызван. И обратите внимание, что $(selector).load() отличается от $(selector)[0].load() & mdash; «селектор» может быть '#my_id', '.my_class' и т. д.

Но в любом случае, пожалуйста, попробуйте этот код, который является оптимизированной версией полной версии вашего кода.

Возможно, вы не сможете просто сравнить свой код с оптимизированной версией; однако вам не должно быть слишком сложно определить основные изменения, например, я использовал один form_data объект вместо многочисленных переменных, где form_data хранит данные формы, которые вы отправляете в свой PHP-скрипт.

И в оптимизированном коде вы найдете этот код, который выполняет третий AJAX-запрос (с действием mvid_pros): 

function mvidPros() {
  var aud_dur = $('#player')[0].duration;
  console.log(aud_dur);

  // Set the value of the #aud_dur field.
  $("#aud_dur").val(aud_dur);

  // Initialize the data for the 'mvid_pros' AJAX call.
  var form_data = {
    action: 'mvid_pros',
    post_id: $("#post_id").val()
  };

  // Add input values to the data.
  form_data.songlink = $("#songlink").val();
  ...
  form_data.aud_dur = aud_dur;
  form_data.tune_dur = $("#tune_dur").val();
  ...

  $.ajax({
    'data': form_data,
    type: 'post',
    url: mvidpro.ajax_url,
    cache: false,
    //async:false,
    success: function(data) {
      console.log(data);
      ...
    },
    error: function() {
      $('.load-text').text('Error on making Video.');
    }
  });
}

А вот код, который вызывает вышеуказанную функцию: 

$('#player')[0].pause();
$('#player').one('loadeddata', mvidPros);
$('#player')[0].load();
0 голосов
/ 17 августа 2018

Вам необходимо включить ваше значение aud_dur в ваши данные на сервере. Метод отправки формы не вызывается, вы выполняете ajax-запрос. 

$.ajax({
    data: {
        action: 'polly_pros',
        pollytext: text,
        aud_dur : $('#aud_dur').val()
    },
.....

Измените ваш объект данных таким, чтобы он включался в ваши значения постов, и вы должны видеть, что он отправляется на ваш сервер. Вы можете проверить, что на самом деле отправлено, проверив сетевой запрос в консоли разработчика вашего браузера.

По вашему обновленному вопросу ваш следующий Ajax-вызов выполняется до того, как будет присвоено ваше значение aud_dur. Поместите свой Ajax-вызов в обработчик событий после назначения переменной aud_dur 

jQuery(document).on('click', '#make-vid', function(e) {
    e.preventDefault();
    var aud_dur;
    var pollytext = $('#pollytext').val();
    var path = $('#path').val();
    var post_id = $('#post_id').val();
    // AJAX CALL
    $.ajax({
        url: vformpro.ajax_url,
        data: {
            action: 'vform_pros',
            post_id: post_id,
        },
        type: 'POST',
        success: function(data) {
            console.log(data);
            var audio = $("#player");
            var post_id = $("#post_id").val();
            var aud_dur = $("#aud_dur").val();
            var tune_dur = $("#tune_dur").val();

            // AJAX CALL
            $.ajax({
                data: {
                    action: 'polly_pros',
                    post_id: post_id
                },
                type: 'post',
                url: polpro.ajax_url,
                cache: false,
                success: function(data) {
                    console.log(data);
                    $('#player')[0].pause();
                    $('#player')[0].load(function() {

                        // HERE I AM TRYING TO GET THE AUDIO DURATION UPON SUCCESS OF THIS AJAX CALL SO // THAT I CAN PASS IT TO THE FOLLOWING AJAX CALL

                        var Aud = $('#player');
                        var aud_dur = $('#aud_dur');
                        Aud[0].addEventListener('loadeddata', function() {
                            aud_dur.val($('#player')[0].duration);
                            console.log(aud_dur);
                            // AJAX CALL **MOVED**
                            $.ajax({
                                data: {
                                    action: 'mvid_pros',
                                    post_id: post_id,
                                    aud_dur: $('#aud_dur').val(),
                                    tune_dur: tune_dur
                                },
                                type: 'post',
                                url: mvidpro.ajax_url,
                                cache: false,
                                success: function(data) {
                                    console.log(data);
                                    $("#video-preview")[0].pause();
                                    $("#video-preview")[0].load();
                                },
                                error: function() {
                                    $('.load-text').text('Error on making Video.');
                                }
                            });
                        });

                    });


                },
                error: function(data) {
                    console.log(data);
                },
            });
        }
    });
});
...