i have the following javascript function with some jquery in it. When I call the createAppointmentConfirm function, it tries to call the SendMail(id) function but throws an error:

"Microsoft JScript runtime error: Function expected"

And Firefox debugger throws an error:

SendMail is not a function [Break On This Error] SendMail(data.Message);

Here is the code. Thank you for your help.

function createAppointmentConfirm(data) {
    if (data.Error) {
        alert(data.Message);
    } else {
        if ($('#sendMail').attr('checked') == 'checked') {
            SendMail(data.Message);
        }
        RefreshAppointmentList();
    }
}
function SendMail(id) {
    $.ajax({
        url: $('#sendMail').attr('title'),
        data: { id: id },
        type: "POST",
        beforeSend: function () {
            $('#sendingMail').dialog({ modal: true });
        },
        success: function (data) {
            if (data.Error) {
                alert(data.Message);
            }
            $('#sendingMail').dialog("close");
        },
        error: function () {
            alert("Error sending mail");
            $('#sendingMail').dialog("close");
        }
    });
}

i have the following javascript function with some jquery in it. When I call the createAppointmentConfirm function, it tries to call the SendMail(id) function but throws an error:

"Microsoft JScript runtime error: Function expected"

And Firefox debugger throws an error:

SendMail is not a function [Break On This Error] SendMail(data.Message);

Here is the code. Thank you for your help.

function createAppointmentConfirm(data) {
    if (data.Error) {
        alert(data.Message);
    } else {
        if ($('#sendMail').attr('checked') == 'checked') {
            SendMail(data.Message);
        }
        RefreshAppointmentList();
    }
}
function SendMail(id) {
    $.ajax({
        url: $('#sendMail').attr('title'),
        data: { id: id },
        type: "POST",
        beforeSend: function () {
            $('#sendingMail').dialog({ modal: true });
        },
        success: function (data) {
            if (data.Error) {
                alert(data.Message);
            }
            $('#sendingMail').dialog("close");
        },
        error: function () {
            alert("Error sending mail");
            $('#sendingMail').dialog("close");
        }
    });
}

• javascript
• jquery
• ajax
• function

• 1 Is it possible to set up a jsFiddle for this? – jabclab Commented Dec 30, 2011 at 16:54
• 1 You might get this, if you miss a closing bracket anywhere in your js.. Can you check your entire JS for any missing bracket.. or try posting the entire js – Selvakumar Arumugam Commented Dec 30, 2011 at 17:05
• Where does both these functions lie on the page? Or they are part of included js files? – ShankarSangoli Commented Dec 30, 2011 at 17:10

1 Answer 1

Explanation

Oh boy, I love these kind of questions, mostly because I get to do some research and example code! :)

So, first off, let's explain what's going on with your code.

There is nothing technically wrong with your code, it's just that you've got either a naming conflict or the functions you're trying to call are outside of the scope that are calling them. It could also be that you're linking two separate javascript files, and one of them aren't linked in at runtime properly, maybe because of a spelling error.

Here are some articles about the issues:

• Function not defined but...

Here's a debugging guide, and to be more precise, take a look down the bottom under the heading Runtime error messages subheading xyz is not defined

xyz is not defined
This error occurs when your JavaScript code references a variable or object that does not exist. For example, you get the error with the following. (Note that the assigned variable is Test, whereas the variable used with the alert method is Text.)

var Test="This is a test; alert (Text);

Another mon mistake is to use the wrong capitalization when referring to variables and objects. This code results in an error, even though you have spelled the variable name correctly:

var Test="This is a test; alert (test);

Or, as they fail to mention: you might've declared a function and a variable, both with the same name.

Solution

The following examples in JSFiddle will trigger errors/run the code when you press the "go" submit button in the HTML panel.

The solution is pretty much up to you. You didn't post the entirety of the code, so I can't really help you spot the exact place.

If I'd take a guess, I'd say you've declared a variable somewhere with the name SendMail, and the script assumes you're referring to that one.

I've created an example where a naming conflict occurs in JSFiddle.

Naming conflict example.

function SendMail(iId) {
    //Send the mail information to a server page that will pass it along
    //For this example, we'll pretend it returned an object

    var oReturned = {
        "Error": null,
        "Message": "Mail has been sent."
    };
    SendDebugMessages(oReturned.Message);
}


function SendDebugMessage(msg){
    $("#debug").prepend("<div>"+msg+"</div>");
}

Here, I'm trying to call the SendDebugMessage() function,
but I was a bit careless when I called it, and added an s so it became SendDebugMessages().
Whops.

It can also happen with objects and variables as well. You just won't know where it's ing from.

Of course, all you need to do to resolve it, is change it back to the correct function name

Here's an example that I think represents your problem, a function and a variable sharing the same name.

var SendDebugMessage = "something";

function SendDebugMessage(msg){
    $("#debug").prepend("<div>"+msg+"</div>");
}

Kind of a straightforward fix: change the name on one of them.

Here's a working example, without any errors..