CODEWITHSUNDEEP
javascriptjqueryajax
wishful thinking
wishful thinking

Reputation: 25

Function Statements no name error

I have the following code:

<script type="text/javascript">
    $(document).on("click", "#leftconversation", function(){
        var self = this;
        var cid = $(this).attr('class'); // getting the user id here
        var request = $.ajax({
            url: "conversation.php",
            type: "POST",
            data: { cid: cid },
            beforeSend: function(){
                self.html("Loading please wait...");
            }
        });

        //WHEN SUCCESS
        request.success(function( data ) {
            $("#right").html(data); // replace the right div with echoed content from php file
        });
    });
</script>

However, my console keeps giving me the error: “SyntaxError: Function statements must have a name.” I can't seem to fix the issue and that’s why the AJAX code isn’t running. Where’s this error coming from?

As per what Todd said, i changed the code to following:

  <script type="text/javascript">
            $(document).on("click", "#leftconversation", function(){
                var self = this;
    var cid = $(this).attr('class'); //you are getting the user id here
     var request = $.ajax({
                        url: "conversation.php",
                        type: "POST",
                        data: { cid: cid },
                        beforeSend: function(){
                            self.html("Loading please wait...");
                        },
                   success: function(data) { 
                   $("#right").html(data);

                   },
                   error: function(request, err){ console.log('An Error Occured' + err); }
                 });






});
</script>

It fixed the first error, but now its telling me TypeError: undefined is not a function (evaluating 'self.html("Loading please wait...")')

This is fixed, should have used var self = $(this); instead

Upvotes: 0

Views: 521

Answers (3)

Todd
Todd

Reputation: 5454

as per my comment

$(document).on("click", "#leftconversation", function(){
    var $self = $(this);
    var cid = $(this).attr('class'); // getting the user id here
    var request = $.ajax({
        url: "conversation.php",
        type: "POST",
        data: { cid: cid },
        beforeSend: function(){
            $self.html("Loading please wait...");
        }
    });

    //WHEN SUCCESS
    request.success(function( data ) {
        $("#right").html(data); // replace the right div with echoed content from php file
    });
});

Upvotes: 1

icktoofay
icktoofay

Reputation: 129011

Your code, as you have posted it, is correct. The error must be coming from elsewhere. That said, wherever the error is, here’s what to look for:

As you likely know, functions can be defined like this:

function greet(name) { /* ... */ }

This works in a statement context. Functions can also be used in an expression context:

[1, 2, 3].forEach(function(item) { alert(item); });

In an expression context, we can omit the name, as we did above, or we can include a name:

[1, 2, 3].forEach(function foo(item) { alert(item); });

However, what we cannot do is have a standalone function declaration without a name. This is an error:

function(name) { /* ... */ }

That is what your (now first) problem was.

“undefined is not a function”

Your updated code has a different problem. When you set self = this, this is a DOM element, not a jQuery object. You later try to use self.html, but DOM elements do not have a html property. If you wish to use jQuery methods, you must convert the element into a jQuery object, either at the point of assignment (self = $(this)) or at the point of use $(self).html.

Upvotes: 1

six fingered man
six fingered man

Reputation: 2500

You can fix your issue without having to use a variable. Just set the context: property of the $.ajax call.

var request = $.ajax({
    url: "conversation.php",
    type: "POST",
    data: { cid: this.className }, // Quicker way to get the class.

    context: $(this), // The context in the callback will be the jQuery object.

    beforeSend: function() {
    //   v-- This is now a jQuery object.
        this.html("Loading please wait...");
    }
});

Upvotes: 1

Related Questions