Why does this function not return JSON string?

Question

function addphoto()
{
    var ajaxRequest = initAjax();
    if (ajaxRequest == false)
    {
        return false;
    }

    // Return Ajax result when the state changes later
    ajaxRequest.onreadystatechange = function()
    {
        if(ajaxRequest.readyState == 4)
        {
            alert(ajaxRequest.responseText);
            return ajaxRequest.responseText;
        }
    }

    // Capture form elements
    var values = {
        "category" : encodeURIComponent(document.addphoto.category.options[document.addphoto.category.selectedIndex].value),
        "photo_title" : encodeURIComponent(document.addphoto.photo_title.value),
        "photo_descrip" : encodeURIComponent(document.addphoto.photo_descrip.value)
    }

    var queryString = '?', i = 0;
    for (var key in values)
    {
        if (i != 0)
        {
            queryString += '&'
        }
        queryString += key + '=' + values[key];
        i++;
    }

    // Execute Ajax
    ajaxRequest.open("POST", "ajaxcheckform.php" + queryString, true);
    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajaxRequest.setRequestHeader("Content-length", queryString.length);
    ajaxRequest.setRequestHeader("Connection", "close");
    ajaxRequest.send(null);
}

function ajaxCheckform(formname)
{
    var response = addphoto(); // <--This is undefined and not sure why
    var responseObj = JSON.parse(response);

    if (responseObj.success == 1)
    {
        // Successful form!
        alert(responseObj.success_text);
    }
    else
    {
        // Error!
        alert(responseObj.error);
    }
}

I'm sure I must be making some basic error somewhere, but I'm having trouble locating it. In this script, ajaxCheckform() is a function that executes one of several similar functions. Above, I included addphoto(), which is one of several functions I'll need that look like this.

On a side note, I'd love to know I can call upon a function dynamically. The addphoto() function will be only one such function being called up at that moment and I'm trying to find a way to pass formname as the function I need. I've searched Stackoverflow and Google. I've found nothing that works.

Note, I'm aware of jQuery, but I'm not there yet. I need this function to work first.

var response = addphoto(); is undefined because addphoto() reached the end of the function without being given anything to return, so it returned undefined. — Robert
– Robert, Commented May 12, 2011 at 18:42
addphoto() does not return anything, so that's why response gets set to undefined — Bemmu
– Bemmu, Commented May 12, 2011 at 18:43
Is JSON being returned in the http response? User firebug to check. — enamrik
– enamrik, Commented May 12, 2011 at 18:45

Aravindan R · Accepted Answer · 2011-05-12 19:24:32Z

3

It is not addphoto() thats undefined but response is undefined. ajaxRequest is asynchronous and the addphoto() function will return before the request completes.

try this

function addphoto() {...

    // Return Ajax result when the state changes later
    ajaxRequest.onreadystatechange = function()
    {
        if(ajaxRequest.readyState == 4)
        {
            alert(ajaxRequest.responseText);            
            var responseObj = JSON.parse(ajaxRequest.responseText);

            if (responseObj.success == 1) {
                 // Successful form!
                 alert(responseObj.success_text);
            }
           else {
               // Error!
               alert(responseObj.error);
           }        
        }    
    }
....
}

function ajaxCheckform(formname) {
    addphoto();    
}

edited May 12, 2011 at 19:24

answered May 12, 2011 at 18:43

Aravindan R

3,0841 gold badge30 silver badges45 bronze badges

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

Comments

onteria_ · Accepted Answer · 2011-05-12 18:44:13Z

3

That's because response is set to the return of addphoto(), which is nothing. What you want to do is have ajaxCheckForm get called when the AJAX call is completed:

// Return Ajax result when the state changes later
ajaxRequest.onreadystatechange = function()
{
    if(ajaxRequest.readyState == 4)
    {
        ajaxCheckform(ajaxRequest.responseText);
    }
}

Then your ajaxCheckform will work with that data:

function ajaxCheckform(responseText)
{
    var responseObj = JSON.parse(responseText);

    if (responseObj.success == 1)
    {
        // Successful form!
        alert(responseObj.success_text);
    }
    else
    {
        // Error!
        alert(responseObj.error);
    }
}

answered May 12, 2011 at 18:44

onteria_

70.9k7 gold badges73 silver badges64 bronze badges

Comments

Quentin · Accepted Answer · 2011-05-12 18:44:00Z

1

You can't return from an event handler (which onreadystatechange is).

You have to do the work inside that event handler.

answered May 12, 2011 at 18:44

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Joel Martinez · Accepted Answer · 2011-05-12 18:42:37Z

0

addphoto() does not return anything (or rather, returns inconsistently) ... the onreadystatechange event's handler is returning the value, but there is no caller that will receive that json string.

I'd highly suggest that you abstract these details away with something like jquery ... just follow the docs for suggested usage and this code will be much simpler

answered May 12, 2011 at 18:42

Joel Martinez

47.9k26 gold badges136 silver badges186 bronze badges

Comments

Alnitak · Accepted Answer · 2011-05-12 18:43:15Z

0

You're sending a GET style parameter list to a POST method.

You need to send that string in the body of your HTTP request.

answered May 12, 2011 at 18:43

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Comments

Alex Wayne · Accepted Answer · 2011-05-12 18:43:33Z

0

var response = addphoto(); // <--This is undefined and not sure why

The addphoto() function never has a return statement in it, so it returns undefined. And the ajaxRequest is asynchrous and wont return immediately.

answered May 12, 2011 at 18:43

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Collectives™ on Stack Overflow

Why does this function not return JSON string?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related