change button text in JS/jQuery upon process completion in php

Question

I am working on jQuery/AJAX code as shown below which calls convert.php script.

   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.log("Tested");
            },
            error: function(res)
            {

            }
        })
    })  
   });

In convert.php script conversion of mp4 into mp3 is happening. Once the conversion is complete, on console Tested is printed.

Problem Statement:

I am wondering what changes I should make in jQuery/AJAX code above so that once the conversion is complete, the button text belonging to the HTML code below gets change to Completed

The above jQuery/AJAX code is called on button click. Here is the snippets of HTML code belonging to the button:

HTML Code:

  <?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 }?>

Why not just update the button text with jQuery with success: $('.go-btn').val('Completed'); — MER
– MER, Commented Jun 13, 2019 at 18:54
Within success - same place as you are writing "tested" to the console. — MER
– MER, Commented Jun 13, 2019 at 18:57
like this ? success: function(res) { $('.go-btn').val('Completed'); }, — john
– john, Commented Jun 13, 2019 at 18:58
It worked, thanks for the help @MER I have one small question. The above HTML code has many rows and each single row has Go button. Once the process is complete for individual row, Go text gets changed to Completed in all rows which is not I want. Go text should get changed to completed only to the row which its belong to. — john
– john, Commented Jun 13, 2019 at 19:10

msg · Accepted Answer · 2019-06-13 20:44:58Z

1

It's just a matter of capturing the button that was clicked:

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>

edited Jun 13, 2019 at 20:44

answered Jun 13, 2019 at 19:17

msg

8,2463 gold badges17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

john Over a year ago

Why did you add let btn = this; ?

msg Over a year ago

@john Because it's the specific button that was clicked. If you tried to use this inside the callback, this would point to the request. Javascript is weird like that. You can learn more in this article or this book

john Over a year ago

Make sense and we can use both GET and POST

msg Over a year ago

@john you can do it in the same handler, I updated the answer

msg Over a year ago

@john what if you took care of that in the php side by disabling the buttons beforehand? If you are looking for realtime updates, I'm thinking you might use WebSockets instead. Hard to say without knowing more about your architecture.

|

Collectives™ on Stack Overflow

change button text in JS/jQuery upon process completion in php

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related