How to use ajax function response in another function

Question

Here is the two javascript functions:

function testAjax() {
    $word = $('#word').val();
    return $.ajax({
        url: "http://test.movies.9pstudio.com:8080/wordchain/wordsearch",
        type: 'POST',
        data: {
            word: word
        },
    });
}

function validation() {
    var reply = testAjax();
    var x = document.getElementById("word").value;
    alert(reply);
    if (reply.equals("word not exist")) {
        document.getElementById("error").innerHTML = reply;
    } else {
        document.getElementById("word1").innerHTML = reply;
        send.push(result);
    }
    document.getElementById("word").value = "";
}

@ElmoVanKielmo That's why i pointed out, it's only word not $word. — Dhaval Marthak
– Dhaval Marthak, Commented Mar 11, 2014 at 8:53

Eduard Iskandarov · Accepted Answer · 2014-03-11 08:56:21Z

1

Use jQuery ajax callback

function validation() {
    var reply = testAjax();
    reply.done(function(data) {
        var x = document.getElementById("word").value;
        alert(data);
        ...
    })
}

answered Mar 11, 2014 at 8:56

Eduard Iskandarov

8626 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ElmoVanKielmo Over a year ago

Ok. But we don't know which version of jQuery OP is using. It will work with recent ones. But from my experience old library version live long in big projects.

Eduard Iskandarov Over a year ago

done, fail, always are alternative to deprecated success, error, complete methods.

ElmoVanKielmo Over a year ago

It's perfectly clear to me. I only say that this code works in jQuery >= 1.5

Prakash Bhagat · Accepted Answer · 2014-03-11 09:00:08Z

1

Generic Function:

function ajax(url, data, type, successCallBack, failureCallBack) {
  var that = this;
  // ajax request to server
  $.ajax({
    url: url,
    type: type,
    data: data
  }).done(function(data) {  
    successCallBack(data);
  }).fail(function(data) {
    failureCallBack(data);
  });
};

You may use this generic function to call anywhere in your application as:

function textAjax(){
  ajax('test.json','GET',{'word':word},function(reply){
  var x = document.getElementById("word").value;
  alert(reply);
  if (reply.equals("word not exist")) {
      document.getElementById("error").innerHTML = reply;
  } else {
      document.getElementById("word1").innerHTML = reply;
      send.push(result);
  }
  document.getElementById("word").value = "";
},function(data){
// write code for failure handler
});

answered Mar 11, 2014 at 9:00

Prakash Bhagat

1,46616 silver badges30 bronze badges

5 Comments

ElmoVanKielmo Over a year ago

We don't know which version of jQuery OP is using. It will work with recent ones. But from my experience old library version live long in big projects. The rest is just my personal opinion about this jQuery feature: I don't like this kind of spaghetti syntax and from OOP view this looks like done() returns object with fail() method. For me this is weird and harder to read than old dict based syntax. But I understand this is their (jQuery devs) design and from this point of view your code is OK.

Prakash Bhagat Over a year ago

Thanks for appreciating :)

SatyaPandu Over a year ago

@PrakashBhagat when i call my service url("test.movies.9pstudio.com:8080/wordchain/wordsearch")

Prakash Bhagat Over a year ago

In fact, You may use any url you want, in your case it's test.movies.9pstudio.com:8080/wordchain/wordsearch

SatyaPandu Over a year ago

it gives an error is Uncaught ReferenceError: textAjax is not defined

ElmoVanKielmo · Accepted Answer · 2014-03-11 08:56:53Z

0

You should implement either success or complete handler as https://api.jquery.com/jQuery.ajax/ says.

Example:

function testAjax() {
  word = $('#word').val();
  return $.ajax({
    url: "http://test.movies.9pstudio.com:8080/wordchain/wordsearch",
    type: 'POST',
    data: {
      word: word
    },
    success: function(data){
      // Do something with response data here
    }
  });
}

answered Mar 11, 2014 at 8:56

ElmoVanKielmo

11.4k2 gold badges35 silver badges51 bronze badges

Comments

user2680139 · Accepted Answer · 2014-03-11 08:58:54Z

0

Use callback parameter in first function

function testAjax(callback) {
  $.ajax({
    url:...
    success: function(data) {
      callback(data); 
    }
  });
}

answered Mar 11, 2014 at 8:58

user2680139

Comments

Mr_Green · Accepted Answer · 2014-03-11 09:06:17Z

0

I think you are trying to use success callback function here as shown below:

function testAjax() {
    //this is not php so you need to declare a variable using "var" keyword
    var word = $('#word').val();  
    $.ajax({
        url: "http://test.movies.9pstudio.com:8080/wordchain/wordsearch",
        type: 'POST',
        data: {
            word: word
        },
        success: validation.bind(this)
    });
}

function validation(response) {
    var reply = response;//testAjax();
    var x = document.getElementById("word").value;
    alert(reply);
    if (reply === "word not exist") {
        document.getElementById("error").innerHTML = reply;
    } else {
        document.getElementById("word1").innerHTML = reply;
        //send.push(result);  //where did you declare send variable?
    }
    document.getElementById("word").value = "";
}

edited Mar 11, 2014 at 9:06

answered Mar 11, 2014 at 8:56

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

15 Comments

SatyaPandu Over a year ago

i use a button to call function ,after click the button testAjax() is executed .....but still not working...

SatyaPandu Over a year ago

Mr_Green Over a year ago

@SatyaPandu please check in console for any errors.

Mr_Green Over a year ago

@SatyaPandu keep the console in chrome open and keep break points in both the functions and then do the click action again.

SatyaPandu Over a year ago

error is Uncaught ReferenceError: textAjax is not defined

|

Collectives™ on Stack Overflow

How to use ajax function response in another function

5 Answers 5

3 Comments

5 Comments

Comments

Comments

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

5 Comments

Comments

Comments

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related