Need to refresh page before changing element style - php

Question

I'm trying to customize a shop cart with jQuery ajax validation, function in my server side are running smooth so far, my real problem is after adding the item in the cart. The Item name should be changing the color to indicate that the item is already selected, but it needs to manually refresh the page to start changing the color of the item name.
Here's the picture below:
After I click the '+' button, here's the output:
As you can see in the picture I've encircle the selected item, that should be changing the color after selecting the item.
Please see the code here:
$(document).ready(function(){
$(".form-item").submit(function(e){
var form_data = $(this).serialize();
var button_content = $(this).find('button[type=submit]');
button_content.html('Adding...'); //Loading button text
$.ajax({ //make ajax request to cart_process.php
url: "cart_process.php",
type: "POST",
dataType:"json", //expect json value from server
data: form_data
}).done(function(data){ //on Ajax success
$("#cart-info").html(data.items); //total items in cart-info element
button_content.html('+'); //reset button text to original text
alert("Item added to Cart!"); //alert user
if($(".shopping-cart-box").css("display") == "block"){ //if cart box is still visible
loadinc(); //trigger to update data
}
})
e.preventDefault();
});
//Show Items in Cart
function loadinc(){
$(document).ready(function(){
$(".shopping-cart-box").show(); //display cart box
$("#shopping-cart-results" ).load( "cart_process.php", {"load_cart":"1"}); //Make ajax request using jQuery Load() & update results
});
}
loadinc();
});
And here's the HTML File
<?php
//List products from database
$results = $mysqli_conn->query("SELECT * FROM tbldata where category = 'SALAD'");
if (!$results){
printf("Error: %s\n", $mysqli_conn->error);
exit;
}
//Display fetched records as you please
$products_list = '<ul class="products-wrp">';
while($row = $results->fetch_assoc()) {
$products_list .= '
<li>
<form class="form-item">
<h4>'.
(in_array($row["name"],array_column($_SESSION["products"],'name')) ? '<span style="color:#b91e2d;">'.$row["name"].'</span>' : $row["name"])
.'</h4>
<div>Price : '.$currency.' '.$row["price"].'<div>
<div class="item-box">
<div>
Qty :
<select name="product_qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<input name="product_code" type="hidden" value="'.$row["product_code"].'">
<button type="submit">+</button>
</div>
</form>
</li>
';
}
$products_list .= '</ul></div>';
echo $products_list;
?>

Answer 1

You forgot this line:
.css('color', '#b91e2d');
Like this:
$(document).ready(function(){
$(".form-item").submit(function(e){
var title = $(this).closest('span');
var form_data = $(this).serialize();
var button_content = $(this).find('button[type=submit]');
button_content.html('Adding...'); //Loading button text
$.ajax({ //make ajax request to cart_process.php
url: "cart_process.php",
type: "POST",
dataType:"json", //expect json value from server
data: form_data
}).done(function(data){ //on Ajax success
$("#cart-info").html(data.items); //total items in cart-info element
button_content.html('+'); //reset button text to original text
alert("Item added to Cart!"); //alert user
title.css('color','#b91e2d');
if($(".shopping-cart-box").css("display") == "block"){ //if cart box is still visible
loadinc(); //trigger to update data
}
})
e.preventDefault();
});
//Show Items in Cart
function loadinc(){
$(document).ready(function(){
$(".shopping-cart-box").show(); //display cart box
$("#shopping-cart-results" ).load( "cart_process.php", {"load_cart":"1"}); //Make ajax request using jQuery Load() & update results
});
}
loadinc();
});
And also, your item should be:
$products_list .= '
<li>
<form class="form-item">
<h4><span'.
(in_array($row["name"],array_column($_SESSION["products"],'name')) ? ' style="color:#b91e2d;" : "")
. '>' . $row["name"] . '</span></h4>'...etc.

Answer 2

Thanks guys for helping.
I should need to put
window.location.reload();
after aler function.
Thanks guys. :D