How do I get value from Ajax function for jquery onclick function?

Question

I have a button that when I click on it , it will get data from my database , and display it on my text area based on the id.

JQuery

$('#verifyBtn').on("click", function() {
   var exeOutput = checkOutput();
   $("outputArea").html(exeOutput);
});

function checkOutput(){
    var exNo = parseInt($('#selectExercise').val());
    dataString = "exNo=" + exNo;
    $("#result").empty();
    getOutput(dataString, true);
}

function  getOutput(dataStr, flag) {
  $.ajax({
      url: "/FYP/WebExerciseByOutput",
      data: dataStr,
      success: function (data) {
         return data;
      },
      error : function (xhr,textStatus,errorThrown){
          console.log("Something is wrong with ajax call."+ xhr);
      }
  });
}

Through my servlet for getting from my database.

Servlet

exercisesModel outputModel = null;
try {
    DBConnection db = new DBConnection();
    outputModel  = db.getExerciseById(request.getParameter("exNo"));
} catch (Exception e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
}
response.getWriter().append(outputModel.getExpOutput());

EDIT: Upon clicking, i think there is data but my text area is not displaying it.

Zakaria Acharki · Accepted Answer · 2017-08-15T15:57:44.627

0

Since you're making an Asynchronous call you can't return an immediate response using return data;, but instead you could pass the selector then assign the result to your output element when the success callback is called:

<script>
    $('#verifyBtn').on("click", function() {
        checkOutput("outputArea");
    });

    function checkOutput(output_selector){
        var exNo = parseInt($('#selectExercise').val());
        dataString = "exNo=" + exNo;
        $("#result").empty();

        getOutput(dataString, true, output_selector);
    }

    function getOutput(dataStr, flag, output_selector) {
        $.ajax({
            url: "/FYP/WebExerciseByOutput",
            data: dataStr,
            success: function (data) {
                $(output_selector).html( data );
            },
            error : function (xhr,textStatus,errorThrown){
                console.log("Something is wrong with ajax call."+ xhr);
            }
        });
    }
</script>

NOTE : The passed flag parameter isn't used.

Hope this helps.

edited Aug 15 '17 at 15:57

answered Aug 15 '17 at 15:23

Zakaria Acharki

66,747
15
75
101

flag able to remove? my textarea not displaying the data ... – Tim C. Aug 15 '17 at 15:36
Not sure what you mean but since you didn't use it, sure you could remove it.. have you tried the suggested solution ? – Zakaria Acharki Aug 15 '17 at 15:40
i tried and its not working,trying to understand the added link to the post – Tim C. Aug 15 '17 at 15:50
Ok good luck, the example should work, try to add an _alert()_ inside success callback to see if it will be triggered. – Zakaria Acharki Aug 15 '17 at 15:58
Oh it works now the outputarea is missing a # – Tim C. Aug 15 '17 at 23:49

score -1 · Answer 2 · answered Aug 15 '17 at 15:18

This block here:

 function checkOutput(){
 var exNo = parseInt($('#selectExercise').val());
    dataString = "exNo=" + exNo;
    $("#result").empty();
    getOutput(dataString, true);

  }

try adding a return to the getOutput line

 function checkOutput(){
 var exNo = parseInt($('#selectExercise').val());
    dataString = "exNo=" + exNo;
    $("#result").empty();
    return getOutput(dataString, true);

  }

score -1 · Answer 3 · answered Aug 15 '17 at 15:18

By value i guess you mean the result of the call. You can find that in the parameter of the success handler.

success: function (data) {
    //This is your result from server.
    console.log(data);
    return data;
}

Take a look at your JS console to see the results.

How do I get value from Ajax function for jquery onclick function?

3 Answers3