json data not being displayed in result div

Question

I am using a form tutorial that shows how to handle errors and return to the page via json. I can see in chrome that the json response is being sent but it is not being displayed in the result div. That is blank. In chrome in the element tab I can see that the information is being inserted just not displayed. If someone could show me why this is happening I would be grateful. Thanks

source showing as entered

<div id="brtv-result" style="display: none; " class="success error">You must enter a service level</div>

jquery

$.ajax({
      type: "POST",
      url: "boxrtrvtemp.php",
      cache: false,
      data: send,
      dataType: "json",
      success: function(msg) {
          $("#brtv-result").removeClass('error');
          $("#brtv-result").removeClass('success');
          $("#brtv-result").addClass(msg.status);
          $("#brtv-result").html(msg.message);
     },
      error:function(){
         $("#brtv-result").removeClass('success');
         $("#brtv-result").addClass('error');
         $("#brtv-result").html("There was an error submitting the form. Please try again.");
     }
   });

the php

<?php

//response array with status code and message
$response_array = array();

//validate the post form

//check the name field
if(empty($authorised)){

    //set the response
    $response_array['status'] = 'error';
    $response_array['message'] = 'Name cannot be blank';

//check the email field
} elseif(empty($serivce)) {

    //set the response
    $response_array['status'] = 'error';
    $response_array['message'] = 'You must enter a service level';

//check the message field
} elseif($department=="Choose Department") {

    //set the response
    $response_array['status'] = 'error';
    $response_array['message'] = 'You must select a department';

//form validated. send email
} elseif($address=="Choose Address") {

    //set the response
    $response_array['status'] = 'error';
    $response_array['message'] = 'You must select a retrieveal address';

//form validated. send email
} elseif(empty($boxnumber)) {

    //set the response
    $response_array['status'] = 'error';
    $response_array['message'] = 'You must enter a box for retrieveal';

//form validated. send email
}else {

    //set the response
    $response_array['status'] = 'success';
    $response_array['message'] = 'All items retrieved successfully';

}

//send the response back
echo json_encode($response_array);

?>

score 3 · Accepted Answer · answered Sep 14 '11 at 11:05

3

That's because you have to show the div i think because it starts out hidden:

$.ajax({
      type: "POST",
      url: "boxrtrvtemp.php",
      cache: false,
      data: send,
      dataType: "json",
      success: function(msg) {
          $("#brtv-result").removeClass('error');
          $("#brtv-result").removeClass('success');
          $("#brtv-result").addClass(msg.status);
          $("#brtv-result").html(msg.message);
          $("#brtv-result").show()//show it
     },
      error:function(){
         $("#brtv-result").removeClass('success');
         $("#brtv-result").addClass('error');
         $("#brtv-result").html("There was an error submitting the form. Please try again.");
          $("#brtv-result").show()//show it
     }
   });

answered Sep 14 '11 at 11:05

Nicola Peluchetti

76,206
31
145
192

Can you tell me, is the error in the php supposed to be return in the success or error part of the ajax. If the status == error then for some reason the result is coming through the success function and causing the form to reset. Thanks – bollo Sep 14 '11 at 11:47
The function that you tie to "error" is triggered only when there is an error in the call itself: for example, the url you are calling doesn't respond. To check if the php returned an error you should check `if( msg.status === 'error')` – Nicola Peluchetti Sep 14 '11 at 12:27

score 1 · Answer 2 · answered Sep 14 '11 at 11:07

1

Your div is set to style="display: none; "

answered Sep 14 '11 at 11:07

Herbert

5,698
2
26
34

What about when the HTML element is already displayed when the page is loaded? I can change the displayed text in the HTML element in the "error" function. – Kingsolmn Oct 05 '11 at 07:19
@Kingsolmn: I'm sorry. Could you clarify what you're talking about? – Herbert Oct 05 '11 at 08:06
What I am looking for is this: I have a page with a table displayed, and I can modify a element by adding a single element or changing the contents of that element with jQuery. The problem I am having is adding in more elements. – Kingsolmn Oct 06 '11 at 04:18
It sounds like you have a completely different problem. [Add table row in jQuery](http://stackoverflow.com/questions/171027/add-table-row-in-jquery) may be relevant. Also see: [How to dynamically add rows very quickly using jQuery](http://www.mindfiresolutions.com/How-to-dynamically-add-rows-very-quickly-using-jQuery-159.php). If that doesn't help, consider posting a question where we can examine your code. :-) – Herbert Oct 06 '11 at 13:40
Thanks for the links, for some reason I can't make my brain think in JavaScript; guess I'm too used to OOP. – Kingsolmn Oct 06 '11 at 18:20

json data not being displayed in result div

2 Answers2