изменить текст кнопки в js / ajax после mp4 => преобразования mp3 в php - PullRequest
Новая
       32

изменить текст кнопки в js / ajax после mp4 => преобразования mp3 в php

0 голосов
/ 10 июня 2019

Я работаю над строками HTML-таблицы (которых на данный момент две) , как показано ниже, в которых при нажатии кнопки:

=> Вызывается код JS / jQuery (где Go текст меняется на Преобразование )
=> , а затем convert.php скрипт через AJAX, где происходит конвертирование mp4 в mp3 .

html / php код: 

  <?php  foreach ($programs as $key => $program) {  ?> 
       <tr data-index="<?php echo $key; ?>">
          <td><input type="submit"  id="go-btn" name="go-button" value="Go" data-id="<?php echo $key; ?>" ></input></td>
       </tr>
    <?php }?>

convert.php: 

 $f = $mp4_files[$_POST['id']];
 $parts = pathinfo($f); 
 switch ($parts['extension'])
 {  
     case 'mp4' :
         $filePath = $src_dir . DS . $f;
         system('C:\ffmpeg\bin\ffmpeg.exe -i ' . $filePath . ' -map 0:2 -ac 1 ' . $destination_dir . DS . $parts['filename'] . '.mp3', $result);    
         print_r("Hello World");
         break;                  
 }

JS / jQuery код: 

$("input[name='go-button']").click( function() {

  // Change the text of the button, and disable
  $(this).val("Converting").attr("disabled", "true");

});

Как только кнопка нажата из html / php Code выше, текст изменяется с Go на Преобразование в пользовательском интерфейсе, потому что я добавил код JS / jQuery в свою кодовую базу, но этот код JS / jQuery, который я добавил, только изменилсятолько текст. На самом деле он не знает, что преобразование происходит в фоновом режиме .

Формулировка проблемы:

Мне интересно, какая модификация мне нужнавыполните в приведенном выше коде JS / jQuery , чтобы пользовательский интерфейс действительно знал, что преобразование происходит в фоновом режиме.

Возможно, нам нужно добавить make install какое-то соединение между JS / jQuery и код php выше, но я не уверен, как мы можем это сделать.

Ответы [ 2 ]

2 голосов
/ 14 июня 2019

Во-первых, давайте исправим HTML.Вам не нужны атрибуты name или id для вашей кнопки, и они не будут уникальными, потому что вы пишете их в цикле.Просто замените их на class="converter".Для тега <input> не требуется закрывающая кнопка </input>.

Тип submit имеет поведение по умолчанию (которое не нужно сочетать с запросом ajax).Вы можете использовать e.preventDefault(); как this или изменить тег на что-то, что не вызывает отправку формы.

Непроверенные коды:

js 

$(document).ready(function () {
    $("input.converter").click(function (e) {        
        e.preventDefault();
        let btn = $(this);
        btn.val("Converting").attr("disabled", "true");
        $.ajax({
            cache:    false,
            type:     "POST",
            dataType: "json",
            data:     {id: btn.data('id')},
            url:      "convert.php",
            success:  function(response) {
                btn.val(response.message).attr("disabled", response.message == "Converted" ? "false" : "true");
            },
            error: function (jqXHR, status, err) {
                console.log("Request failed: " + status);
            },
            complete: function (jqXHR, status) {
                console.log("Done. No matter the outcome");
            }
        });
        return false;
    });
});

php 

if (empty($mp4_files[$_POST['id']])) {
    exit(json_encode(['message' => 'Failed']);
} 
$f = $mp4_files[$_POST['id']];
$parts = pathinfo($f); 
switch ($parts['extension'])
{  
    case 'mp4' :
        $filePath = $src_dir . DS . $f;
        system('C:\ffmpeg\bin\ffmpeg.exe -i ' . $filePath . ' -map 0:2 -ac 1 ' . $destination_dir . DS . $parts['filename'] . '.mp3', $result);    
        exit(json_encode(['message' => 'Converted']);
} 
exit(json_encode(['message' => 'Invalid File Type']);

Вот небольшая демонстрация (проверена локально на работу):

main.php 

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $("button").click(function (e) {        
        e.preventDefault();
        let btn = $(this);
        btn.html("Converting...").attr("disabled", "true");
        $.ajax({
            cache:    false,
            type:     "POST",
            dataType: "json",
            data:     {id: btn.data('id')},
            url:      "convert.php",
            success:  function(response) {
                btn.html(response.message)
                   .attr("disabled", response.message != "Bad"); // re-enables if Bad
            }
        });
    });
});
</script>
</head>
<body>
<?php
for ($i = 0; $i < 3; ++$i) {
    echo "<div>{$i}: <button data-id=\"{$i}\">Convert</button></div>";
}
?>
</body>
</html>

convert.php 

<?php
$lookup = [
    'Good',
    'Bad'
];
sleep(1);
echo json_encode(['message' => $lookup[$_POST['id']] ?? 'Error']);

Как это работает:

------------------------------------------- включено -> отключено ...... -> отключено

  • Кнопка # 1 Прогрессирование текста: Преобразовать -> Преобразование ... -> Хорошо
  • Кнопка # 2 Последовательность текста: Преобразовать -> Преобразование ... -> Плохо (включено)
  • Кнопка # 3 Последовательность текста: Преобразовать -> Преобразование ... -> Ошибка
0 голосов
/ 11 июня 2019

Попробуйте изменить это: 

$.ajax({
            url: 'convert.php',
            type: 'POST',
            data: {id: target}, //change to what you want
            success: function(res)
            {   
            },
            error: function(res)
            {
            }
        })

На это: 

$.ajax({
        url: 'convert.php',
        type: 'POST',
        data: {id: target}, //change to what you want
        success: function(res)
        {   
//You can add $(".go-btn").html('completed'); to here, but I prefer the other way.
        },
        error: function(res)
        {
// This is unnecessary if you are not gonna make it do anything if error occurs.
        }
    }) 
.done(function(data) {
$('.go-btn').html('Completed!');
//This fires when AJAX call suceeds the process. As a side note, "data" is what your .php code outputs, so you can do whatever you want to do with it.
});

А также посмотрите мои комментарии.Надеюсь, это поможет.

...