Ajax Jquery run a function then with ajax inside and return success data

Question

var datatobeuse = SearchTable("user_tbl", "first_name", "fname", "last_name", "lname");

I have this above code right after document ready.Then I have below code after document ready

function SearchTable(tablename, column1, label1, column2, label2) {
    $.ajax({
        type: 'POST',
        url: '..user.php',
        data: {
            tablename: tablename,
            column1: column1,
            label1: label1,
            column2: colum2,
            label2: label2,
        },
        dataType: "json",
        success: function (data) {
//            console.log(JSON.stringify(data))
        },
        error: function (data) {

        }
    }).done(function (data) {
    });
}

How can I use the data in success? I need to have return value so that I can use var datatobeuse which is right after document ready.

I tried solution from here

Like this one :

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
                // Call this function on success
            someFunction( data );
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

function someFunction( data ) {
    // Do something with your data
}

But it is not working

Answer 1

What you should do, is embrace the asynchronous character of javascript.

Asynchronous means it takes some time to execute the function, the rest of the javascript stuff will not wait for it. Ajax is an exellent example of this.

The solution is the callback. A callback is a function that will be called when the rest of the functionnality is ready.

I'll take your example to explain.

function isSession(selector, onReady) {
  $.ajax({
    type: "POST",
    url: '/order.html',
    data: ({ issession : 1, selector: selector }),
    dataType: "html",
    success: function(data) {
      // all is finished.  Now we can call the callback
      if(typeof onReady == 'function') {
        onReady(data);
      }
    },
    error: function() {
    }
  });
}

function someFunction( data ) {
  // Do something with your data
}

// now use them both
var selector = ".links";
isSession(selector, function(data) {
  someFunction( data );
});

Reconsider why exactly you asked this question. You don't need a return value for your function.

This takes some different thinking. You wanted to know how to set the values to datatobeuse, like this:

var datatobeuse = somefunction();
// now datatobeuse is ready and we can use it.
displayOnScreen(datatobeuse);

Instead, think this way

var datatobeuse;
somefunction(function(data) {
  datatobeuse = data;
  displayOnScreen(datatobeuse);
})