ajax $.get callback reported as undefined

Question

I have defined a div within which a form with default input values is appended based on MySQL table data returned by PHP via an ajax $.get call.

The div looks like:

<div id="esfContainer1">
</div> <!--end esfContainer1 div-->

The div is absolutely positioned relative to the body tag.

The script associated to the form validation broke when it was included on the main page where the call to the form was being made, so I moved it to the PHP output $formContent.

Here is the form validation and submit script included in the PHP output:

<script type="text/javascript">

var senderName     = $("#sendName");
var senderEmail    = $("#fromemailAddress");
var recipientEmail = $("#toemailAddress");
var emailError     = $("#esemailerrorDiv");

senderName.blur(checkName);
senderEmail.blur(checkSEmail);
recipientEmail.blur(checkREmail);

function checkName() {
if (senderName.val() == "YOUR NAME") {
        $("#esemailerrorText").html("Please provide your name");
        $(emailError).removeClass("esemailError");
        $(emailError).addClass("esemailErrorNow");
        $(emailError).fadeIn("fast","linear");
        $(emailError).delay(2000).fadeOut("slow","linear");
        return false;
    } else {
        return true;
    }
};

function checkSEmail() {
    var a      = senderEmail.val();
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

    if (filter.test(a)) {
        return true;
    } else {
        $("#esemailerrorText").html("Please enter a valid email address");
        $(emailError).removeClass("esemailError");
        $(emailError).addClass("esemailErrorNow");
        $(emailError).fadeIn("fast","linear");
        $(emailError).delay(2000).fadeOut("slow","linear");
        return false;
    }
};

function checkREmail() {
    var a      = recipientEmail.val();
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

    if (filter.test(a)) {
        return true;
    } else {
        $("#esemailerrorText").html("Your friend\'s email is invalid");
        $(emailError).removeClass("esemailError");
        $(emailError).addClass("esemailErrorNow");
        $(emailError).fadeIn("fast","linear");
        $(emailError).delay(2000).fadeOut("slow","linear");
        return false;
    }
};

$("#emailForm").submit (function() {
    if (checkName() && checkSEmail() && checkREmail()) {

        var emailerData = $("#emailForm").serialize();
        $.get("style.php",emailerData,processEmailer).error("ouch");

        function processEmailer(data) {
            if (data=="fail") {
                return false;
            } else if (data=="pass") {
                $("#c1Wrapper").fadeOut("slow","linear");
                $("#confirmation").fadeIn("slow","linear");
                $("#esfContainer1").delay(2000).fadeOut("slow","linear");
                $("#backgroundOpacity").delay(2000).fadeOut("slow","linear");
                return false;
            }
        };
    return false;
    };
    return false;
});

I have splatter-bombed the above submit function with "return false;" because the submit function has been simply opening the processing PHP script rather than executing the $.get. Watching the submit function with Firebug reports that processEmailer is undefined.

I am very new to this. I was assuming that because the ajax callback is being defined within the submit function (and that the processEmailer function is defined directly below the ajax call) that there wouldn't be a problem with definition.

Thanks in advance for any help.

possible duplicate of [Javascript function cannot be found](http://stackoverflow.com/questions/15573202/javascript-function-cannot-be-found) — Bergi, Aug 06 '13 at 11:46

score 0 · Accepted Answer · edited May 23 '17 at 11:49

You've been trapped by function statements. Function declarations (which would be hoisted) are not allowed inside blocks (if/else/for bodies) and if they are appear there, behaviour is not defined. Firefox defines them conditionally, and in your case after you've used it in the $.get call - where it was undefined then - like in var functionName = function() {} vs function functionName() {}.

To solve this, simple put it outside the if-block (or even outside the whole callback). Btw, .error("ouch") won't work, you need to pass a function.

$("#emailForm").submit (function() {
    if (checkName() && checkSEmail() && checkREmail()) {
        var emailerData = $("#emailForm").serialize();
        $.get("style.php",emailerData).done(processEmailer).fail(function() {
            console.log("ouch");
        });
    }
    return false;

    // now a proper function declaration, will be hoisted:
    function processEmailer(data) {
        if (data=="fail") {
            return false;
        } else if (data=="pass") {
            $("#c1Wrapper").fadeOut("slow","linear");
            $("#confirmation").fadeIn("slow","linear");
            $("#esfContainer1").delay(2000).fadeOut("slow","linear");
            $("#backgroundOpacity").delay(2000).fadeOut("slow","linear");
            return false;
        }
    }
});

I was reading [this article about hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) and based on that this is supposed to work right. http://jsfiddle.net/arunpjohny/2aZvL/ — Arun P Johny, Mar 27 '13 at 03:45
No, hoisting only works for function *declarations* - which you had not as the function was not in the top level of the code. See http://kangax.github.com/nfe/#function-declarations-in-blocks and the section below for how that is handled by FF — Bergi, Mar 27 '13 at 13:14
I was surprised by the speed and clarity of the response. Thanks very much. Your suggestion solved the problem exactly in the way you described. I also appreciated the informative link. — jaredthemiller, Mar 27 '13 at 15:26

ajax $.get callback reported as undefined

1 Answers1