Unable to update div text from ajax response sent via php

Question

Apologies for this question if something out there covers this. I searched and found many relevant posts which has allowed me to get to this point.

I have a form snippet with 1 input box and a button and a div for a status message:

<div>
    <div>
        <div>
            <input id="discount_code"name="discount_code" placeholder="  Enter discount code."></input>
        </div>
        <div>
            <a class="btn btn-xs btn-primary" id="btn-validate">Validate</a>
        </div>
    </div>
    <div id="status_msg" style="border: 1px solid black"></div>
</div>

Then I have the following bits of javascript:

1. The bit that triggers based on the click:

   $('#btn-validate').on('click', function(e) { e.preventDefault(); validateCode(11); // "11" is a php-provided ID variable });

2. The javscript with the ajax call:

   function validateCode(eventID) {
   var codeValue = $("#discount_code").val();
   if (FieldIsEmpty(codeValue)) { // outside function that exists/works fine
       $('#status_msg').html('Enter a discount code.').fadeIn(500);
       $('#status_msg').fadeOut(2500);
       //bootbox.alert("Please enter discount code to validate.");     
   } else {
       $.ajax({
           type: 'POST',
           cache: false,
           async: true,
           url: '/include/discount_validation.php',
           dataType: 'json',
           data: {
               event_id: eventID,
               discount_code: codeValue
           },
           beforeSend: function() {
               $('#status_msg').html('');
               $('#status_msg').fadeIn(0);
           },
           success: function(data) {
               $('#status_msg').html(data);
               $('#status_msg').fadeIn(0);
               //bootbox.alert(data);
           },
           error: function(data) {
               $('#status_msg').html(data);
               $('#status_msg').fadeIn(0);
               //bootbox.alert("Error validating discount code: " + JSON.stringify(discount_code));
           }
       });
   }};
   

And I have a PHP file that, suffice it to say, is working and producing the following json outputs based on the input:

            // do php database things...
header('Content-Type: application/json');

if(!isset($percent)) {
    //echo("Invalid code: '" . $dCode ."'");
    $message = "Invalid code: '" . $dCode ."'";
    echo json_encode(array('status' => 'error','message' => "$message"));
} else {
    $message = "Code: '" . $dCode . "'" . " provides a " . $percent . "% discount.";
    echo json_encode(array('status' => 'success', 'message' => "$message"));
}

In the above, I have bootbox.alert lines commented out but when they are active, the box appears and the message is as I would expect it to be.

And lastly, the first condition that triggers if the input box is empty, both fires the alert (when not commented) AND changes the text of #status_msg.

I put the border in to verify visibility and #status_msg is visible but just is not set when either success or error fires.

Answer 1

Set your data like this inside ajax().

success: function(data) {
            var result = eval(data);
            $('#status_msg').html(result.message);
            $('#status_msg').fadeIn(0);
            //bootbox.alert(data);
        },
        error: function(data) {
            var result = eval(data);
            $('#status_msg').html(result.message);
            $('#status_msg').fadeIn(0);
            //bootbox.alert("Error validating discount code: " + JSON.stringify(discount_code));
        }

AND

if(!isset($percent)) {
    //echo("Invalid code: '" . $dCode ."'");
    $message = "Invalid code: '" . $dCode ."'";
    echo json_encode(array('status' => 'error','message' => $message));
} else {
    $message = "Code: '" . $dCode . "'" . " provides a " . $percent . "% discount.";
    echo json_encode(array('status' => 'success', 'message' => $message));
}

Answer 2

check the code first discard : " from php code $message variable

if(!isset($percent)) {
    //echo("Invalid code: '" . $dCode ."'");
    $message = "Invalid code: '" . $dCode ."'";
    echo json_encode(array('status' => 'error','message' => $message));
} else {
    $message = "Code: '" . $dCode . "'" . " provides a " . $percent . "% discount.";
    echo json_encode(array('status' => 'success', 'message' => $message));
}

then use the response on font end success function :

success: function(data) {

            $('#status_msg').html(data.message);
            $('#status_msg').fadeIn(0);

        },

Answer 3

First check if you getting an object in the response in the success add

alert(JSON.stringify(data));

If it shows the object then you are good to go else check the php file where you creating the object.

If object is recieved in the success of ajax then you need to parse the json object using jQuery.parseJSON

For Eg:

response = jQuery.parseJSON(data);

Now you have a javascript object with name response.

Now use it

response['status'] or response['message'] in the success of the ajax.