Change the color of a button using Jquery Ajax (Color received from external PHP file)

Question

This is my HTML code

<form class="addtowatchlistform" action="logo/insertwatchlist.php" method="POST">

    <input type="hidden" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'"/>
    <button id="addtowatchlistbutton" type="submit" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'" data-tooltip="'.$addremove.' TO YOUR WATCHLIST" class="material-icons" style="color:'.$watchlisticoncolor.'">add_box</button>

</form>

   // Same form as above
<form class="addtowatchlistform" action="logo/insertwatchlist.php" method="POST">

    <input type="hidden" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'"/>
    <button id="addtowatchlistbutton" type="submit" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'" data-tooltip="'.$addremove.' TO YOUR WATCHLIST" class="material-icons" style="color:'.$watchlisticoncolor.'">add_box</button>

</form>

Jquery Code:

<script>
$(".addtowatchlistform").submit(function(e) {
  var data = $(this).serialize();
  var url = $(this).attr("action");
  $.post(url, data, function() {
    try {
        data = JSON.parse(data);
        $("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);
    } catch (e) {
        console.log("json encoding failed");
        return false;
    }
});
  return false;
});
</script>

PHP file insertwatchlist.php file

$response = new \stdClass();
$response->watchlisticoncolor = "red";
die(json_encode($response));

Output of PHP file insertwatchlist.php file

{"watchlisticoncolor":"red"}

Expected Result:

1.)When someone clicks on add_box button, it submits the form without reloading the page (This one works fine)

2.) insertwatchlist.php sends this code: {"watchlisticoncolor":"red"} and, the Jquery code place them in place of: $watchlisticoncolor variable, in the real time without reloading the page. (This one do not work),

Console tab do not show anything. Here is the screenshot of network tab, when someone clicks on the button http://prntscr.com/fxwt16

Answer 1

Please use background-color instead of color. color property will be used when you want to change color of fonts.

FROM

$("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);

TO

$("button#addtowatchlistbutton").css('background-color',data.watchlisticoncolor);

also add data in your ajax function.

$.post(url, data, function(data) {

Let me know if it not works.

$(".addtowatchlistform").submit(function(e) {
  e.preventDefault();
  var data = $(this).serialize();
  var url = $(this).attr("action");
  $.ajax({
      url: url,
      type: 'post',
      dataType: 'json',
      beforeSend: function() {
        $('#add_to_wishlist').css('color','red');
      },
      success: function(data) {
      }   
   });
});

$('#add_to_wishlist2').click(function(e){
  e.preventDefault();
  $(this).css('background-color','red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add_to_wishlist" style="color:yellow;">Change Color</button>


<button id="add_to_wishlist2">Change Background Color</button>

Answer 2

Try this you have to catch data return from your ajax request in function params

<script>
$(".addtowatchlistform").submit(function(e) {
  var data = $(this).serialize();
  var url = $(this).attr("action");
  var form = $(this); // Add this line
  $.post(url, data, function(data) { //<---------add data here
    try {
        data = JSON.parse(data);
        $(form).children("button").css('color',data.watchlisticoncolor); //Update this line
    } catch (e) {
        console.log("json encoding failed");
        return false;
    }
});
  return false;
});
</script>

Answer 3

Updated:

On further checking I found its not the css proper. Its your jquery post function problem.

You are missing data in the function. Use below; Let me know if it fix your issue.

 $.post(url, data, function(data) {
    try {
        data = JSON.parse(data);
        $("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);
    } catch (e) {
        console.log("json encoding failed");
        return false;
    }

---

color property used for text color. Use background-color instead of color

For Background Color

 $("button#addtowatchlistbutton").css('background-color',data.watchlisticoncolor);

For Text Color

$("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);