CODEWITHSUNDEEP
javascriptphpjsonajax
Bireon
Bireon

Reputation: 189

Display popup alert after Ajax response

I have a JSON request using post method using ajax within this code

$(document).ready(function() {
  $(document).on('submit', '#registration_check', function() {
    var data = $(this).serialize();
    $.ajax({
      type: 'POST',
      url: 'apidomain.com',
      data: data,
      success: function(data) {

        $("#registration_check").fadeOut(500).hide(function() {
          $(".result_1").fadeIn(500).show(function() {
            $(".result_1").html(data);
          });
        });
      }
    });
    return false;
  });
});

the response will return 3 fields like name, email, phone on this element:

<div id="result_1"></div>

it's working nice so far, but want I plan to do is I want to display the alert or popup message if the ajax response found some of return value null. For example:

  1. If JSON response return: name: jhon, email: [email protected], phone: 123456789 user will redirect to the other page (done so far)

  2. But if JSON response return name: jane, email: [email protected], phone:

The popup or alert will appeared, within text phone number empty.

Upvotes: 0

Views: 2904

Answers (3)

Zain Farooq
Zain Farooq

Reputation: 2964

You can make an associative array of your values in php file and echo it in the json format like 

echo json_encode($array);

Then you will receive this in your ajax response like this

  var objs = JSON.parse(data);

Then you can parse the values by keys like name, email and phone as you defined in associative array in your php file

console.log(objs.name);
console.log(objs.email);
console.log(objs.phone);

This is how you can parse the values individually. You can also apply conditions by your own way

Upvotes: 1

varun agarwal
varun agarwal

Reputation: 1509

If your data is a JSON object then you can do:

success: function(data) {
  for (var i in data) {
    if (!data[i]) {
      alert(/* MESSAGE HERE */)
      return;
    }
  }

  // Your regular code here
}

Upvotes: 1

CodiMech25
CodiMech25

Reputation: 436

First thing that comes to my mind: Do you need the JSON response in the document element or is it, that you dont know how to work with jQuery Ajax?

Anyway, this solution should help you in both cases:

$(document).ready(function()
{   
    $(document).on('submit', '#registration_check', function()
    {       
        var data = $(this).serialize();
        $.ajax({
        type : 'POST',
        url  : 'apidomain.com',
        data : data,
        dataType: 'json', // tell jQuery, that the response data will be a JSON - it will be parsed automatically
        success :  function(data)
                   {
                        // now you have a parsed JSON object in the 'data' var

                        var show_alert = false;

                        if (data.phone === null || !data.phone.length) {
                            show_alert = true;
                        }

                        if (data.email === null || !data.email.length) {
                            show_alert = true;
                        }

                        if (show_alert) {
                            alert('here is the alert :)');
                        }

                        $("#registration_check").fadeOut(500).hide(function()
                        {
                            $(".result_1").fadeIn(500).show(function()
                            {
                                $(".result_1").html(JSON.stringify(data));
                            });
                        });

                   }
        });
        return false;
    });
});

Upvotes: 0

Related Questions