Page 1 of 1

AJAX Response text in different id's

Posted: Mon Nov 07, 2011 3:00 am
by social_experiment
I have the following AJAX that displays a message after data was added to the database

Code: Select all

function getData() {
 if (xHRObject.readyState == 4 && xHRObject.status == 200)
 {
    var serverText = xHRObject.responseText;
    
    try
    {
        if (serverText != undefined || serverText != null)
        {
            document.getElementById('box').innerHTML = serverText;
        }
    }
    catch (exception)
   {
       alert(exception.message);
   }
 }
 //
 if (xHRObject.readyState == 1)
 {
     document.getElementById('box').innerHTML = 'Loading...';
 }
}
// 
function sendRequest(data)
{
    var JSONObjeect = new Object();
    JSONObject.info = data;
    JSONstring = JSON.stringify(JSONObject);
    xHRObject.open("GET", "display.php?value" + JSONstring, true);
    /*
    -- Ex. 1
    if i let the function accept another argument and add it like this
    xHRObject.onreadystatchange = getData(element);
    */
    xHRObject.onreadystatechange = getData;
    xHRObject.send(null);
}
//
It is called in the html as follows

Code: Select all

<input type="submit" name="submitBtn" value="Add" onclick="sendRequest(getValue('aVal2', 'hd2')); return false;" />
getValue() returns the values of two input fields

The problem i am facing is that i have 4 input fields, with a div (with id 'box') below the form. Each time the data is added to the database the message correctly displays but it is displays below the form and i would like it to display below each input box. I've modified getData() to accept an argument in the form of an id for the specific div element; after this the script sortoff works but it seems the readystate is 'stuck' at 1 because only 'Loading...' is displayed, even if the data is correctly added into the database.