Ajaxの成功関数内のJquery on Clickイベントハンドラのボタンのテキストを変更する方法

Question

私は通常、自分自身のために物事を把握しますが、これは私に本当に難しい時間を与えています。私はそれがクリックされた後、データベースからPHPによって作成されたテーブル内のボタンのテキスト値を変更する必要があります。ここ

 <td id="order_num"><?php echo $order -> order_num; ?></td> 
     <td><?php echo $order -> data; ?></td> 
     <td><?php echo $order -> data; ?></td> 
     <td><?php echo $order -> data; ?></td> 
     <td><?php echo $order -> data; ?></td> 
     <td><?php echo $order -> data; ?></td> 
     <td><?php echo $order -> data; ?></td> 
     <td><?php echo $order -> data; ?></td> 

     <!-- **** this is the button. ******** -->   
     <td><button type="submit" class="accept_order" id ="row_<?php echo $order -> order_num; ?>" 
     data-row_id = "row_<?php echo $order -> order_num; ?>" data-current_user = "<?php echo $user_id; ?>" 
     data-order_num = "<?php echo $order -> order_num; ?>">Accept</button> 

AJAX呼び出し

$（ドキュメント）.ready（関数（）{ $（ 'お店 '）。' クリック'（上の大混乱であります'ボタン'、機能（E）{

 var button = $(this).find('button'); //trying to put the value of the current button in a variable to pass to the ajax function.           
     var current_user = $(this).closest('.shop').find('.accept_order').data('current_user'); 
     console.log(current_user); 
     var row_id = $(this).closest('.shop').find('.accept_order').data('row_id'); 


     var accepted_order = $(this).closest('.shop').find('.accept_order').data('order_num'); 
     console.log(accepted_order); 
     e.preventDefault(); 

     $.ajax('url', { 
      type: "POST", 

      data: { order_id: accepted_order, user_id: current_user }, 
      success: function(msg){ 
       console.log(msg); 
       console.log(this); 
       //change the text of the button to something like "accepted" 

       ***************this is where I have problems *********************** 
       $(this).html('accepted'); or 
       $(this).closest('.shop').find('button').html(msg); or 
       button.text(msg); 



      }, 
      error: function(){ 
       $(this).closest('.shop').find('.accept_order').html("failure"); 
      } 
     }); 


    }); 
}); 

</script> 

私は$（ 'ボタン'）を使用していたHTML（MSG）;。 が、それはすべてのボタンを変更し、私はOBにスコープを失うように思え。成功関数の内部では、どんなアイデアや助けも大歓迎です。前もって感謝します。

Answer 1

私は信じていますあなたの問題の出所を見つけましたが、わかりません。そして問題はthisキーワードから来たので、ajax関数のthisはボタンノードオブジェクトではなくajaxオブジェクトに直接送られます。したがって、bind関数を成功とエラーの関数で使用して、thisをボタンに向けることができます。ここに変更があります：

と他のものajax関数のurlは上記のように変数ではありません。

$.ajax(url, { 
     type: "POST", 
     data: { order_id: accepted_order, user_id: current_user }, 
     success: function(msg){ 
      console.log(msg); 
      console.log(this); 
      //change the text of the button to something like "accepted" 

      ***************this is where I have problems *********************** 
      $(this).html('accepted'); or 
      $(this).closest('.shop').find('button').html(msg); or 
      button.text(msg); 



     }.bind(this), 
     error: function(){ 
      $(this).closest('.shop').find('.accept_order').html("failure"); 
     }.bind(this) 
    }); 

あなたが尋ねたことについてデモがないので、解決策がわかりません。

私はうまくいきます。

Answer 2

たぶん、あなたはボタン

$.ajax('url', { 
     type: "POST", 

     data: { order_id: accepted_order, user_id: current_user }, 
     success: function(msg){ 
      console.log(msg); 
      console.log(this); 
      //change the text of the button to something like "accepted" 

      ***************this is where I have problems *********************** 
      $("button.accept_order").html(msg); 



     }, 
     error: function(){ 
      $(this).closest('.shop').find('.accept_order').html("failure"); 
     } 
    }); 

以上を選択するために、クラスを使用することができます。..

var button = $(this); 

とあなたのAJAX呼び出しの内部だけで使用します。

button.html(msg);