CODEWITHSUNDEEP
javascriptajaxjson
Tanoro
Tanoro

Reputation: 869

Why does this function not return JSON string?

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.

Upvotes: 0

Views: 391

Answers (6)

Aravindan R
Aravindan R

Reputation: 3084

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();    
}

Upvotes: 3

onteria_
onteria_

Reputation: 70537

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);
    }
}

Upvotes: 3

Quentin
Quentin

Reputation: 943691

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

You have to do the work inside that event handler.

Upvotes: 1

Alex Wayne
Alex Wayne

Reputation: 187074

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.

Upvotes: 0

Alnitak
Alnitak

Reputation: 339856

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.

Upvotes: 0

Joel Martinez
Joel Martinez

Reputation: 47769

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

Upvotes: 0

Related Questions