Изменить текст кнопки в JS/jQuery после завершения процесса в php
Я работаю над кодом jQuery/AJAX, как показано ниже, который вызывает скрипт convert.php.
jQuery(document).ready(function($)
{
$('.go-btn').click(function()
{
let target = $(this).attr('data-id'),
spanEl = $('.file-name[data-id='+ target +']');
$.ajax({
url: 'convert.php',
type: 'POST',
data: {id: target}, //change to what you want
success: function(res)
{
console.info("Tested");
},
error: function(res)
{
}
})
})
});
В скрипте конвертировать.php происходит конвертация mp4 в mp3. После завершения преобразования на консоли выводится Протестировано.
Постановка задачи:
Мне интересно, какие изменения я должен внести в код jQuery/AJAX выше, чтобы после завершения преобразования текст кнопки, принадлежащий приведенному ниже HTML-коду, изменился на Завершенный
Приведенный выше код jQuery/AJAX вызывается при нажатии кнопки. Вот фрагменты HTML-кода кнопки:
HTML-код:
<?php foreach ($programs as $key => $program) { ?>
<tr data-index = "<?php echo $key; ?>">
<td><input type = "submit" name = "go-button" value = "Go" data-id = "<?php echo $key; ?>" ></input></td>
</tr>
<?php }?>
Где вы хотите, чтобы я обновил это?
Внутри success - там же, где вы пишете «проверено» в консоли.
так ? success: function(res) { $('.go-btn').val('Completed'); },
Это сработало, спасибо за помощь @MER У меня есть один небольшой вопрос. Приведенный выше HTML-код имеет много строк, и в каждой отдельной строке есть кнопка «Перейти». После завершения процесса для отдельной строки текст Go изменяется на «Завершено» во всех строках, чего я не хочу. Текст Go должен измениться на завершенный только в той строке, к которой он принадлежит.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это просто вопрос захвата кнопки, которая была нажата:
jQuery(document).ready(function($) {
$('.go-btn').click(function() {
let target = $(this).attr('data-id'),
spanEl = $('.file-name[data-id=' + target + ']');
// Capture the element that received the event
let btn = this;
$(btn).val("Converting").prop('disabled', true).css({
'text-align': 'center',
'border-color': '#000',
'width': '120px'
});
$.ajax({
url: 'https://api.myjson.com/bins/80dex',
method: 'GET', // Change this back to POST
data: {
id: target
}, //change to what you want
success: function(res) {
$(btn).val("Completed")
},
error: function(res) {
$(btn).prop('disabled', false).val("Go").removeAttr('style');
}
})
})
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<tr data-index = "1">
<td>
<input type = "submit" name = "go-button" class = "go-btn" value = "Go" data-id = "1"></input>
</td>
</tr>
<tr data-index = "2">
<td>
<input type = "submit" name = "go-button" class = "go-btn" value = "Go" data-id = "2"></input>
</td>
</tr>
<tr data-index = "3">
<td>
<input type = "submit" name = "go-button" class = "go-btn" value = "Go" data-id = "3"></input>
</td>
</tr>Зачем ты добавил let btn = this; ?
@john Потому что была нажата конкретная кнопка. Если вы попытаетесь использовать this внутри обратного вызова, this укажет на запрос. Javascript такой странный. Вы можете узнать больше в этой статье или эта книга
Имеет смысл, и мы можем использовать как GET, так и POST
У меня есть последний вопрос. Можем ли мы каким-либо образом изменить текст с Идти на Преобразование после завершения преобразования? Я добавил в свою кодовую базу следующий скрипт, который меняет текст с Идти на Преобразование, но ничего не знает о том, что происходит в фоновом режиме. Он только меняет текст с Идти на Преобразование$("input[name='go-button']").click( function() { // Change the text of the button, and disable $(this).val("Converting").attr("disabled", "true").css({'text-align': 'center', 'border-color': '#000', 'width': '120px'}); });
@john, ты можешь сделать это в том же обработчике, я обновил ответ
Спасибо большое за вашу помощь. Я принял ваш ответ. Я дам вам знать, если у меня возникнут другие вопросы.
Другая вещь, о которой я думаю, это когда я открываю ту же веб-страницу на другом компьютере, она должна знать, что файл был завершен (выполнено преобразование mp4=>mp3). При открытии страницы на другом компьютере Текст кнопки «Перейти» снова показывает принадлежность к определенному файлу, что неверно, поскольку этот файл уже завершен.
@john, что, если бы вы позаботились об этом на стороне php, предварительно отключив кнопки? Если вы ищете обновления в реальном времени, я думаю, вы могли бы вместо этого использовать WebSockets. Трудно сказать, не зная больше о вашей архитектуре.
Почему бы просто не обновить текст кнопки с помощью jQuery с помощью
success:$('.go-btn').val('Completed');