I am trying to achieve a way to make calls to an AJAXMethod() and
return the response without using an onSuccess: callerMethod() logic.

In the following piece of code,

var jsonObjects;
function AJAXcallerMethod()
    var jsonObj = AJAXMethod();

function AJAXMethod()
   new Ajax.Request(url, {
                method: 'get',
                onSuccess: function(transport){
                        jsonObjects = transport.responseText.evalJSON();
    return jsonObjects;

this will not work as the AJAX calls are asynchronous, that the
jsonObjects is returned, probably,  even before the call is actually
made and the value jsonObjects is updated later!

One way to avoid this problem is to have multiple methods, for example

function AJAXcallerMethod()

function AJAXMethod(url)
  new Ajax.Request(url, {
                method: 'get',
                onFailure: function() {
                     alert("could not make the AJAX call");

function AJAXprocessMethod(transport) {
  var jsonObjects = transport.responseText.evalJSON();

  // do whatever you want to with the jsonObjects array

However, I cannot have three methods for one AJAX call and also I have
one standard method, that I wrote to essentially RE-USE,  to
automatically update the corresponding table and form fields based on
the keys passed form the server-side on the page without a page
refresh using prototype.

In this method updateFormAndTableWithJSONresponse(...) that I call
from the AJAXcallerMethod(), the method is able to successfully update
form and tables as per my requirement, however, I want to monitor this
method and continue when this method ends, because any of the custom
AJAXcallerMethod() that calls this method has logic that needs to be
run ONLY after this method is finished, but I am not sure how I
achieve this, that is wait until this method is finished and continue
with the custom javascript code?

I have heard something similar to AJAX responders that can help me
here, but again, there will be three methods for each call, instead I
want to re-use this method and also continue with my custom javascript
code ONLY after the method call ends. How can I use AJAX responder to
achieve this?

function updateFormAndTableWithJSONresponse(formId, actionName,
actionMethod, refTableId, throwErrorIfNotFound)
        var contextPath = document.forms[0].contextPath.value;

        if(contextPath == null || contextPath == '')
                alert('could not find the hidden contextPath property in the 
                return false;

        var url = contextPath + '/' + actionName + ".do?method=" +
actionMethod + "&";

        // collect all the field values associated with this form whose id is
        // and attach it to do a get(), isn't there a way to attach all form
fields in post
        // automatically like we do in a normal HTTPRequest doPost()?
        url = url + Form.serialize($(formId));
        // I mean we may be imposing a limitation of 3kb in doGet()

        // Create the XMLHttpRequest object and send it via the Ajax.Request
prototype.js method
        new Ajax.Request(url, {
                method: 'get',
                onSuccess: function(transport){
                        var jsonObjects = transport.responseText.evalJSON();

                        // If it is not an array (default return tyep), it must 
be an
individual jsonObject
                        // that contains error message
                        if(jsonObjects == null) // also check for type as object
                                        alert('could not get a JSON response ');

                        if(jsonObjects.length === undefined)
                                if(!(jsonObjects['errorMessage'] === undefined))
                                        var errMsgDiv = $('errMsg');
                                        errMsgDiv.style.display = 'block';
                                        errMsgDiv.innerHTML = 
                                var jsonObjIndex = 0;

                                // use reference table to update contentTable 
only when refTableId
is not null
                                if(refTableId != null && refTableId != '')
                                        // tableRowContent is an array where 
each row represents the
table row in the form
                                        // of a jsonObjects
                                        var tableRowContent = 
                                        // If you do not want to send a table, 
it is fine too
                                        if(!(tableRowContent === undefined))
refTableId, 'contentTableId', throwErrorIfNotFound);
                                                jsonObjIndex = 1; // because 
the first jsonObject is a

                                // update individual elements in the form using 
the keys passed
                                // usually you can keep all of the keys of 
individual objects
                                // put inthe same jsonObject
                                // as in jsonObj.put("shares", "300.234");
                                // jsonObj.put("trancheVestDate", "10/20/2001");
                                for(; jsonObjIndex < jsonObjects.length ; 
        return true;

// does not handle multiple yet!!!
function updateFormWithJSONObjContent(jsonObjContent,
        for(var nameKey in jsonObjContent)
                // search the element whose name attribute value is nameKey
                // follow the convention with element id = name + 'Id'
                inputElement = $(nameKey + 'Id');

                // handle the case where you cannot find the field in the table 
                // whose name='key' that is being passed from the action class 
                // tableRow jsonObject
                if(inputElement == null || inputElement.length == 0)
                                alert('could not find an element with id=' + 
nameKey + 'Id' + '
to be updated');
                        continue;       // continue with the next key

                // update the value with the correct value to be updated!
                inputElement.value = jsonObjContent[nameKey];
        return true;

function updateContentTableWithJSONObjContent(tableRowContent,
refTableId, contentTableId, throwErrorIfNotFound)
        // avoid showing just the header when no rows are passed!
        if(tableRowContent.size() == 0)
                alert('no rows content passed');
                return false;

        // Maintain many hidden tables with just one header and one dummy row
        // that has all validations such as onchange="validateDecimal
        // style and default attributes set such as disabled="disabled", this
        // be the model that will be cloned and added to the contentTable

        // Access the hidden table, get the first row in tbody
        // make copies of it with values sent from the tableRowContent array

        // copy the static header first, convention: the reference table MUST
have <tHead .../> defined
        var hiddenTableTHead = $(refTableId).tHead;

        // I donot want to work on the original hidden table
        // i.e., adding new rows would add to the reference of
        // the original hidden table tBody

        // Hide the content table as per prototype and then remove visibility
        $(contentTableId).hide().setStyle({visibility: ''});

        // clear the complete contentTable content, due to previous table
        for(var i = $(contentTableId).tBodies[0].rows.length - 1; i >= 0 ;

        // handle special scenarios with no table bodies and table header
        if($(contentTableId).tBodies.length == 0)
                        alert('cannot find the TBODY for the content table with 
id:' +

                $(contentTableId).tBodies[0] = document.createElement('TBODY');

        if($(contentTableId).tHead == null)
                        alert('cannot find the THEAD for the content table with 
id:' +

                $(contentTableId).tHead = document.createElement('THEAD');

        // get the reference to the contentTable Body
        var contentTableTBody = $(contentTableId).tBodies[0]; //
        // hiddenTableTBody.innerHTML = $('table1Id').tBodies[0].innerHTML;
        // Object.extend(hiddenTableTBody, $('table1Id').tBodies[0]);

        // Throws an exception that the rows are not copied (is this shallow
        //  and innerHTML would return object using Object.clone()
        // Object.clone($('table1Id').tBodies[0]);

        // get a copy of the reference table TBody row which contains
everything you want,
        // textboxes, checkboxes,... with name='shares',... and so on..
        // this is unfortunate that we are still sticking to name=''
convention in each row
        // however, this makes sense in our application because we need
        var hiddenTableDummyTR = document.createElement('TR');
        hiddenTableDummyTR = $(refTableId).tBodies[0].rows[0];  // A reference
row must always exist!!!

        if(hiddenTableDummyTR == null)
                        alert('cannot find the reference row in the reference 
table with
id:' + refTableId);

                return false;

        // setting a property that only has a getter error when using
        // Object.extend(hiddenTableDummyTD, $('table1Id').tBodies[0].rows

        // remove all rows from the cloned copy of hiddenTableTBody
        // hiddenTableTBody.innerHTML = '';
        // where as this code seems to throw exception
        // for(var i = 0; i < hiddenTableTBody.rows.length; i++)
        // {
        //       hiddenTableTBody.deleteRow();
        // }

        // Update the header of the content table with the header of the
reference table
        $('contentTableId').tHead.innerHTML = $(refTableId).tHead.innerHTML;

        // Update body
        // now add new rows with new content
        var tableRowJSONObj;
        var contentTableTBodyTR;
        for(var i = 0 ; i < tableRowContent.size(); i++)
                tableRowJSONObj = tableRowContent[i]; // an array of JSONObjects
would return a JSONObject
                if(tableRowJSONObj != null)
                        // create a new row in the hiddenTableTBody

                        // copy the innerHTML to get the elements with default 
values and
                        contentTableTBody.rows[i].innerHTML = 

                        // get the reference contentTableTBodyTR to point to 
the row in the
                        contentTableTBodyTR = contentTableTBody.rows[i];

                        // search for the element whose name attribute is equal 
                        // and get only one of them.. currently this does not 
                        // elements whose name is same in the SAME ROW

                        var inputElement;
                        // the keys in the tableRow JSONObject are 'name' 
attributes of
                        // table row that you will be updating
                        for(var nameKey in tableRowJSONObj)
                                // search the element whose 'name=' attribute 
value is nameKey
                                inputElement = 
contentTableTBodyTR.select('[name="' + nameKey +

                                // handle the case where you cannot find the 
field in the table
row TR
                                // whose name='key' that is being passed from 
the action class in
                                // tableRow jsonObject
                                if(inputElement == null || inputElement.length 
== 0)
                                                alert('cannot find the element 
with name:' + nameKey + ' in
the reference row');


                                inputElement[0].value = 

        // use prototype's custom $('table1Id').show() and $
('table1Id').hide() methods
        // however, show() and hide() methods won't work when visibility is
set to 'hidden'

        // then apply the appear effect on the table
        $('contentTableId').appear({duration: 1.0});

        return true;
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to