my function can't pass it's parameter value javascript

Question

Ive been struggling to pass my parameters from a functions but I just really can't figure out where did I go wrong. I have a function that have a parameters that I want to pass to my postData to display datas in my jQgrid. Here's my function code with parameters:

function getTID(hdrID){
  var selected = $('#editTallyHdr').val();  
  var hdrID = '';
  var hdrNo = '';

  var nameFlag=0;
  var par_ams = {
    "SessionID": $.cookie("SessionID"),
    "dataType": "data"
  };
  $.ajax({
    type: 'GET',
    url: 'processjson.php?' + $.param({path:'getData/tallyHdr',json:JSON.stringify(par_ams)}),
    dataType: primeSettings.ajaxDataType,
    success: function(data) {
      if ('error' in data)
      {
        showMessage('ERROR: ' + data["error"]["msg"]);
      }
      else{            
        $.each(data['result']['main']['rowdata'], function(rowIndex, rowDataValue) {
          $.each(rowDataValue, function(columnIndex, rowArrayValue) {
            var fldName = data['result']['main']['metadata']['fields'][columnIndex].name;
            if (fldName == 'transaction_id'){
              hdrID = rowArrayValue; 
            }
            if (fldName == 'transaction_num'){   
              hdrNo = rowArrayValue; 
              if(selected == hdrNo){
                nameFlag =1;
              };        
            }
          });   
        }); 
      }
    }
  }); 
  return (hdrID);
}

and here is my jQgrid code where I call that function to get it's parameter:

$("#tblPlank").jqGrid({
        url: '',                            
        datatype: 'local',
        jsonReader : {
          .
          .
          .
serializeGridData: function(postData) {

      var ctr =0;
      var filt=[];
      var c=[];      

      var jsonParams = {
      'SessionID':  $.cookie("SessionID"),
      'dataType': 'data',
      'transaction_id':getTID(hdrID),
      'filters': c,
      'lines':plank_data,      
      'recordLimit': postData.rows,
      'recordOffset': postData.rows * (postData.page - 1),
      'rowDataAsObjects': false,
      'queryRowCount': true,
      'sort_fields': postData.sidx
      };  
.
.// some code here
.
. 
      return 'json=' + JSON.stringify(jsonParams);
    },
    loadError: function(xhr, msg, e) { 
      showMessage('HTTP error: ' + JSON.stringify(msg) + '.');
    },
    colNames:[...], 
    colModel:[      
     ........................
    ],  
    .
    .
    .
    caption: "Tally Transaction Details/Lines"

I also have another code where I want to get that parameter. Here's the last code:

var par_ams = {
    "SessionID": $.cookie("SessionID"),
    "dataType": "data",
    "transaction_id": getTID(hdrTID) 
}                                              
$('#tblPlank').setGridParam({
    url:'processjson.php?path=' + encodeURI('getData/tallyLnDtl') + '&json=' + encodeURI(JSON.stringify(par_ams)), 
    datatype: primeSettings.ajaxDataType,  
});
$('#tblPlank').trigger('reloadGrid');

Those codes below that function getTID(hdrID) cant retrieve the parameter, it shows empty. This maybe simple to anyone, but I really need help on this.. been working with this for quite long hours.

You cannot return a value from that function, as it's making an async ajax request. — Dogbert
– Dogbert, Commented Jul 18, 2011 at 19:04
You mean I cannot return the ID from this function getTID(hdrID)? Why is that so? Do you have any idea how to get the ID? — jayAnn
– jayAnn, Commented Jul 18, 2011 at 19:07

jfriend00 · Accepted Answer · 2011-07-18 19:14:35Z

1

This is a very common misunderstanding. I've probably answered 15 of these questions in the last two weeks alone. An ajax call is an asynchronous call. That means that when you make the ajax call, it just STARTs the request. Then, while that request goes in the background, your code immediately keeps executing. That means that your function getTID() returns before the ajax call has even completed and it's value is not yet known. Thus, there is no way to return the response value from the ajax function when you return from getTID() as it is simply not known yet.

To work with asynchronous function calls (like ajax calls), you have to change your programming style to something that works asynchronously. In this case, the response to your ajax call is ONLY known in the success handler for the ajax all. So, you have to restructure your code to continue on with the execution of your processing and the handling of the ajax response from the success handler. If you have only a little bit of work to do, then you can put it all in the success handler. If you have a lot of work to do, then you can put all the rest of that work in a function call and call it from the success handler.

answered Jul 18, 2011 at 19:14

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

1 Comment

jayAnn Over a year ago

If you have a lot of work to do, then you can put all the rest of that work in a function call and call it from the success handle

. So, does it mean that i can still use my function getTID(hdrTID), but I just have to call it inside the success handler? Sorry if i really cant understand. I never really know about this.

Johan · Accepted Answer · 2011-07-18 19:21:25Z

1

The problem is that you're doing an ajax-request (asynchronous request). Then the function does not wait for an answer to arrive, but just continues and returns hdrID (which isn't set at the time). After that a response comes in, and the success-method is called, which sets hdrID to the appropiate value.

The common way to solve this is to execute a specific function with the desired values when the success-method is executed. It's too much code to look into, but it could go something like this:

function fetchContent(continueFunction) {
      $.ajax(params).success(function(reply) {
           // retrieve desired params from reply
           continueFunction(retrievedParameters);
      }
}

edited Jul 18, 2011 at 19:21

answered Jul 18, 2011 at 19:11

Johan

3,2121 gold badge26 silver badges19 bronze badges

1 Comment

jayAnn Over a year ago

thanks for the answer but I really don't understand how to use the code you gave me. Your first paragraph is correct because that's what i noticed when I alert the ID. I tried using it,

function fetchContent(continueFunction) {       $.ajax(params).success(function(reply) {            // retrieve desired params from reply            getID(hdrID);       )} }

, but it gives me an error params is not a function. How should i use that for my code?

shelman · Accepted Answer · 2011-07-18 19:23:48Z

What you could do is define getTID to take in a callback to execute once it has the id, for instance

function getTID(hdrID, callback) {
    //ajax stuff....
    success: function (data) {
        // Error checks, etc 
        hdrID = //something dependent on data
        callback(hdrID); // THIS IS THE IMPORTANT PART

}

the callback will execute after the request has returned, when it is safe to use the data returned from the ajax request that will be needed in the callback. You could wrap all of the code that needs the return value of the request in the callback, for example

getTID(hdrID, function (ID) {
    var params = {
        "SessionID": $.cookie("SessionID"),
        "dataType": "data",
        "transaction_id": ID //USE ID 
    }                                              
    $('#tblPlank').setGridParam({
        url:'processjson.php?path=' + encodeURI('getData/tallyLnDtl') + '&json=' +     encodeURI(JSON.stringify(par_ams)), 
        datatype: primeSettings.ajaxDataType,   
    });
    $('#tblPlank').trigger('reloadGrid'); 
    };
});

Collectives™ on Stack Overflow

my function can't pass it's parameter value javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related