jQuery Class return undefined

Question

I try to create a simple ajax request class in jQuery. The problem I have here is that in the process function I can get the response from variable response . I return response but outside the request it is undefined .. I tried with global variables of some sorts, didn't work out. So now I try to get help from here.

The app.js

var AjaxRequest = Class.extend({

    init: function(url) {
        this.url = url;
    },

    process: function() {

        var response;

        $.get("http://test.dec/ajax.php", function(data) {
            var obj = jQuery.parseJSON( data);
            response = obj;

            console.log(response); // Get correct output

            return response;
        });

    }

});

$('#test').on('click', function() {
    var request = new AjaxRequest('ajax.php');

    console.log(request.process()); // Get undefined
});

The PHP ajax.php

<?php

$json = json_encode(['test' => 'test123']);
echo $json;

?>

That is correct @StephenSarcsamKamenar, that is why I am here to be pointed in right direction! Thanks mate — KrisInception, Mar 29 '15 at 04:52

score 0 · Accepted Answer · edited May 23 '17 at 12:06

The problem is that ajax requests are asynchronous. What you want to do maybe is pass in a callback to process so when it completes, it will call the function to continue.

Here is an example:

var AjaxRequest = Class.extend({

    init: function(url) {
        this.url = url;
    },

    process: function(callback) {

        var response;

        $.get("http://test.dec/ajax.php", function(data) {
            var obj = jQuery.parseJSON( data);
            response = obj;

            console.log(response); // Get correct output

            callback(response);
        });

    }

});

$('#test').on('click', function() {
    var request = new AjaxRequest('ajax.php');

    request.process(function(data) { console.log(data); });
});

Please have a read through this on how asynchronus calls work.

That worked like a charm, didn't have a clue about this. Will for sure read more about asynchronous. Cheers mate (Y) — KrisInception, Mar 29 '15 at 04:52

Fajar Yusuf · Answer 2 · 2015-03-29T15:13:02.463

0

please Try this:

$.ajax({
            url: 'your url',
            global: false,
            type: 'POST',
            data: {},
            async: false,
            success: function() {}
        });

edited Mar 29 '15 at 15:13

answered Mar 29 '15 at 04:51

Fajar Yusuf

54
3

I would work on your grammar a bit. "asynchronouz" is not a word. – Mar 29 '15 at 05:00
oh sorry, what i mean is "async" – Fajar Yusuf Mar 29 '15 at 05:02
Saying "Your ajax cannot async" is also not proper english. – Mar 29 '15 at 14:32
so what? so what your problem? my english or your code? – Fajar Yusuf Mar 29 '15 at 15:12
My problem is two things. #1, you don't show the poster how to return data from the function like he asked (I see no return statement anywhere in your code), and #2, I still see atrocious grammar. Sentences start with capital letters. – Mar 29 '15 at 15:16
Trouble with you? i just try for answering.. so if i right or not, i just learn.. Sorry before. – Fajar Yusuf Mar 29 '15 at 15:27

jQuery Class return undefined

2 Answers2