CODEWITHSUNDEEP
jquery
Subodh Bisht
Subodh Bisht

Reputation: 899

How to return more than one value to jQuery.Ajax success function

I'm trying to return more than one value to jqueryAjax success but failed to do so. this what I have done so far......

 String emp = request.getParameter("ID");
    ArrayList<String> al = new ArrayList();
    al=ur.editLeave(emp);
    String cl = al.get(0);
    out.print(cl);
    out.print(al.get(1));
    out.print(al.get(2));

from this jsp page I try to return 3 values.

$.ajax({
    type: "GET",
    data: 'ID=' + idel,
    async: false,
    url: "ForleaveMaster.jsp?Eleave=l",
    success: function(cl, ml, ot) {
        alert(cl, ml, ot);
        $('input[id=ELM_CL]').val($.trim(cl));
        $('input[id=ELM_ML]').val($.trim(cl));
        $('input[id=ELM_OT]').val($.trim(cl));
    },
    error: function() {}
});

Please help me out.

Upvotes: 3

Views: 11508

Answers (4)

Matija
Matija

Reputation: 17902

As we all already know, the best way to help somebody in programming is to show them example. So here is my part of it.

PHP FILE and response

<?php

require_once('../../../wp-load.php');

$cs_confID = $_POST['cs_confID'];

$cs_date = $_POST['cs_date'];

$cs_obj = get_conf_id_for_insert($cs_date, $cs_confID);

$json_cs = array();    

if(count($cs_obj) == 1)    
{
    $json_cs = array('cs_id'=>$cs_obj[0]->cs_id,'cs_date'=>$cs_obj[0]->cs_date); //Make array of files    
    echo json_encode($json_cs); //Encode json    
}    

else    
{    
    echo '<p style="color:red">Status:Error. Please contact our support for further help!</p>';    
}
?>

HTML and Jquery

$.ajax({ url: '../wp-content/themes/rirads-2012-child-theme/insert_conference_schedules.php',

data: {cs_date:$("#c_date").val(),cs_confID: $("#conf").val()},
beforeSend: function(){ $("#loaderAjax").show(); },
type: 'post',
success: function(output) 
{
$("#loaderAjax").hide();
var obj = jQuery.parseJSON(output); //decode JSON response

$("#cs_id").val(obj.cs_id); //Fill the value of current cs_id into input field cs_id

$("#cs_date").val(obj.cs_date); //Fill the value of current cs_date into input field cs_date

//code goes on...

Hope it will help you.. :)

Upvotes: 1

mishik
mishik

Reputation: 10003

Everything you return is passed as a first argument to your function.

$.ajax({
    type: "GET",
    data: 'ID=' + idel,
    async: false,
    url: "ForleaveMaster.jsp?Eleave=l",
    success: function(data) {
        var array_data = String(data).split("\n");
        var cl = array_data[0],
            mt = array_data[1],
            ot = array_data[2];
        alert(cl,ml,ot);
        $('input[id=ELM_CL]').val($.trim(cl));
        $('input[id=ELM_ML]').val($.trim(cl));
        $('input[id=ELM_OT]').val($.trim(cl));
    },
    error: function() {                        
    }
});

Upvotes: 5

user1864610
user1864610

Reputation:

Your approach definitely won't work: you can only return one 'item'. The trick is to put all your values in that item. Encode your response as a JSON string (sorry - can't help with that in JSP) but it should look like a bit like this:

{"cl":"1", "dl":"2", "cl":"3"}

Then modify your AJAX function:

$.ajax({
        type: "GET",
        data: 'ID=' + idel,
        dataType:'json'
        async: false,
        url: "ForleaveMaster.jsp?Eleave=l",
        success: function(data) {
            alert(data.cl,data.ml,data.ot);
            $('input[id=ELM_CL]').val($.trim(data.cl));
            $('input[id=ELM_ML]').val($.trim(data.ml));
            $('input[id=ELM_OT]').val($.trim(data.ot));
        },
        error: function() {                        
        }
    });

I'd leave async set to true or your browser will freeze while the server responds. Using Json has the advantage that you can add additional data or change the order without breaking your Javascript.

Upvotes: 2

JanR
JanR

Reputation: 6132

I am assuming you want to set the values as form inputs? In that case replace your success with:

 success: function(cl,ml,ot) { alert(cl,ml,ot);
       $('input[id=ELM_CL]').val($.trim(cl));
       $('input[id=ELM_ML]').val($.trim(ml));
       $('input[id=ELM_OT]').val($.trim(ot));
  },

You were setting all the fields to the same cl value.

Upvotes: 0

Related Questions