Question

I have an ajax function outputs results of +1 and -1, in javascript, I want to get the +1 response to use in colorbox.
This is the ajax function:

function my_ajax_obj_lightbox() {
    global $post;

    if ( !empty( $_POST['obj_id'] ) ) {

        $obj = new My_Obj( $_POST['obj_id'] );

        if ( $obj instanceof My_Obj ) {
            my_objs_ajax_response_string( 1, $obj->html() );
        }
    }

    my_objs_ajax_response_string( -1,  'Invalid request' );
}
add_filter( 'wp_ajax_obj_lightbox', 'my_ajax_obj_lightbox' );

Now , in javascript, I want to say something like this:

var response = ......; 
    if ( response[0] >= 1 ) {
            j.fn.colorbox({
            html: response[1],
            maxWidth: '90%',
            maxHeight: '90%'
            });
            }

How to define the var response and get ajax response as value ?

Answer 1

It sounds like you just need help setting up the AJAX request, and parsing the response into a JavaScript object…

Let’s say you have a PHP file that returns a response in JSON format:

<?php
    header('Content-type: application/json');
?>
[1, "<h2><?php echo $_POST['title'] ?></h2>"]

To retrieve this using AJAX, you can do something like this:

<script>

  // Create the AJAX request object.
  var request = new XMLHttpRequest();

  // Define a function to handle the response.
  request.onreadystatechange = function() {

    // If the response is ready
    if (request.readyState == 4 && 
      request.status == 200) {

      // Transform the response into a JavaScript object.
      var response = eval(request.responseText);
      /*
      "response" is now a JavaScript array containing two values.
      */

      console.log(response[0]);
      /*
      1
      */

      console.log(response[1]);
      /*
      <h2>Hello World</h2>
      */

      // Write the contents of the response to an element on the page.
      if (response[0] >= 1) {
        var div = document.createElement("div");
        div.innerHTML = response[1];
        document.body.appendChild(div);
      }
    }
  };

  // Define some variables that we want to send to the server.
  var params = "foo=bar&baz=qux&title=" + encodeURIComponent("Hello World");

  // Post the data, and load the response asynchronously.
  request.open("POST", "/ajax-response.php", true);
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.send(params);
</script>

If you’re using jQuery, here’s the equivalent code:

<script>
  $.post("/ajax-response.php", {
      foo: "bar",
      baz: "qux",
      title: "Hello World"
    },
    function(response) {
      if (response[0] >= 1) {
        $("body").append(response[1]);
      }
    }
  );
</script>

Documentation for jQuery post:
http://api.jquery.com/jQuery.post/