Trouble with mootools AJAX after using Jquery Ajax

Question

I have a little question about Ajax calls in Mootools. I wrote a handler script and a listener script in Jquery using AJAX but i cant figure out how to convert it so it works with mootools instead of Ajax.

The function is called using a html link tag with onclick='changePage($page, $total)' This is the original JQuery Ajax call. it gets returned in the Ajax file as an array. The variable gets returned as followed:

$data = array();
$data['result'] = '1';
$data['html'] = $this->result; //Returns Pagination bar with current selected page.
$data['html2'] = $this->result2; //Returns a block of HTML (result of Solr request styled with bootstrap

JQuery version of the script

function changePage(page, total) {
      $.ajax({
            url: '/public/ajax.php?do=getPageView',
            type: 'POST',
            dataType: 'json',
            data: {
                page: page,
                total: total,

                //type : type
            },
            success: function(data) {
                //console.log(data.result);
                if (data.result == 1) {
                    $('#placeHolder').html(data.html);
                    $('#vrouwen').html(data.html2);
                } else if (data.status == 2) {
                    //do nothing :) - nothing has been input
                } else {
                    alert("Fout!!\n" + textStatus + "\n" + errorThrown);
                }
            },
            error: function error(jqXHR, textStatus, errorThrown) {
                alert("Fout!!\n"
                        + textStatus + "\n" + errorThrown);
            }

        });  
   };

My presumed Mootools version of the script

   function changePage(page, total) {
          var ajax = new Request({
               async: false,
                url: '/public/ajax.php?do=getPageView',
                method: 'POST',
                dataType: 'json',
                data: {
                    'page': page,
                    'total': total,

                    //type : type
                },
                onSuccess: function(data) {
                    //console.log(data.result);
                    if (data.result == 1) {
                        $('placeHolder').set('html', data.html);
                        $('vrouwen').set('html', data.html2);
                    } else if (data.status == 2) {
                        //do nothing :) - nothing has been input
                    } else {
                        //alert("Fout!!\n" + textStatus + "\n" + errorThrown);
                    }
                }


            });
                    ajax.send();  
       };

In the view i have a div named placeholder, thats where the pagination bar goes. And html2 gets inserted into the div with id='vrouwen'.

Hope you guys can help me out on this one.

--EDIT--- Figured it out after brainstorming with a few fellow programmers. posting the findings here for all to see.

The difference lies in the way Jquery and Mootools handle returned values.

Apperantly JQuery handles returned values as JSON objects when you set dataType: 'json'. Mootools does not do this so i added to the onSuccess function the following:

 onSuccess: function(data) {

                    data = JSON.decode(data);
                    //console.log(data.html2);
                    if (data.result == 1) {
                        $('placeHolder').set('html', data.html);
                        $('vrouwen').set('html', data.html2);
                    } else if (data.status == 2) {
                        //do nothing :) - nothing has been input
                    } else {
                        //alert("Fout!!\n" + textStatus + "\n" + errorThrown);
                    }
                }

Now it properly replaces the Divs.

Answer 1

Mootool Request is An XMLHttpRequest Wrapper

onSuccess attached Method is Fired when the Request is completed successfully.

The arguments returned to the attached Handler are responseText & responseXML

responseText - (string) The returned text from the request. responseXML - (mixed) The response XML from the request.

Request.JSON - Wrapped Request with automated receiving of JavaScript Objects in JSON Format. Means it is made for json requests and when it receives data it converts it to json object.

Here onSuccess Fired when the request completes. This overrides the signature of the Request success event.

The arguments returned to the attached Handler are responseJSON & responseText

responseJSON - (object) The JSON response object from the remote request. responseText - (string) The JSON response as string.