CODEWITHSUNDEEP
phpjqueryjsonajax
K Ahir
K Ahir

Reputation: 395

JSON parsed Messages do not display on page using Ajax

Below I have mentioned question related script from .JS & .PHP pages to make question as much shorter and cleaner as possible.

If I submit form after entering correct email and secret code on form page, it inserts data in database table. If I submit form after entering incorrect email and/or secret code on form page, it doesn't inserts data in database table due to server side validation script I have written. So script part is working properly.

I am able to alert success / error messages on .js page when I use alert(data);. But these messages do not display on page when I try to print them for visitor. Below is sample message I am getting in alert box.

{"status":"OK","message":"Inserted successfully"}

What should I do to display these messages on page? Please let me know.

Client Side Page (contact.js)

$.ajax({
url: "./contact_p.php",
type: "POST",
data: {
    emailid: emailid,
        secretcode: secretcode
},
cache: false,

success: function() {
//alert(data);
// Success message
$responsetext=JSON.parse(data);    

if($responseText.staus=='OK')
{
    $('#success').html("<div class='alert alert-success'>");
    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
    .append("</button>");
    $('#success > .alert-success')
    .append("<strong> " + $responseText.message + " </strong>");
    $('#success > .alert-success')
    .append('</div>');
}
else if($responseText.status=='ERR')
{
    // Fail message
    $('#success').html("<div class='alert alert-danger'>");
    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
    .append("</button>");
    $('#success > .alert-danger').append("<strong> " + $responseText.message + " ");
    $('#success > .alert-danger').append('</div>');
}
},

Server Side page (contact_p.php)

if( empty($str_r_email) || validateEmail($str_r_email)==false )
{
    $response['status']='ERR';
    $response['message']= "Invalid Email ID!";
    echo json_encode($response); 
    return ;
}
if( empty($str_r_secretcode) || $_SESSION['image_secret_code'] !=    $str_r_secretcode )
{
    $response['status']='ERR';
    $response['message']= "Invalid Secrete Code!";
    echo json_encode($response);
    return ;
}

$str_insert = "INSERT INTO t_contact (emailid,idate,ipaddress) VALUES('".$str_emailid."','".date("Y-m-d H:i:s")."','".$_SERVER['REMOTE_ADDR']."')";
RunQuery($str_insert);
$response['status']='OK';
$response['message']='Inserted successfully';
echo json_encode($response);
return ;

Upvotes: 0

Views: 117

Answers (3)

Gwendal
Gwendal

Reputation: 1273

If your PHP returns a Content-Type: application/json header then AJAX automatically gives a JSON object in your success function (your forgot to write data parameter in success, don't know if it's a typo or not).

If you have no Content-Type: application/json header, then add dataType: "JSON" in your ajax call, like so :

$.ajax({
url: "./contact_p.php",
type: "POST",
dataType: "JSON",
data: {
    emailid: emailid,
        secretcode: secretcode
},
cache: false,

success: function(data) {
//alert(data);
// Success message
var $responsetext=data;    

if($responseText.staus=='OK')
{
    $('#success').html("<div class='alert alert-success'>");
    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
    .append("</button>");
    $('#success > .alert-success')
    .append("<strong> " + $responseText.message + " </strong>");
    $('#success > .alert-success')
    .append('</div>');
}
else if($responseText.status=='ERR')
{
    // Fail message
    $('#success').html("<div class='alert alert-danger'>");
    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
    .append("</button>");
    $('#success > .alert-danger').append("<strong> " + $responseText.message + " ");
    $('#success > .alert-danger').append('</div>');
}

Upvotes: 1

Matt Magallo
Matt Magallo

Reputation: 326

Dude the variable $responsetext=JSON.parse(data); is in PHP it should have been var responsetext=JSON.parse(data);

Upvotes: 1

Mr. Engineer
Mr. Engineer

Reputation: 3515

You dont need to parse json. Just try this code for your success function.

success: function(res) {
if(res.staus=='OK')
{
    $('#success').html("<div class='alert alert-success'>");
    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
    .append("</button>");
    $('#success > .alert-success')
    .append("<strong> " + res.message + " </strong>");
    $('#success > .alert-success')
    .append('</div>');
}
else if(res.status=='ERR')
{
    // Fail message
    $('#success').html("<div class='alert alert-danger'>");
    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
    .append("</button>");
    $('#success > .alert-danger').append("<strong> " + res.message + " ");
    $('#success > .alert-danger').append('</div>');
}
}

Upvotes: 1

Related Questions