Can not send a POST-JSON-Request with JavaScript

Question

i try to send a POST-JSON-Request with jQuery 1.9.

I always get the following error in Console.

TypeError: this.products is undefined. this.products.push(oneProduct);

here is my code

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" charset="utf-8" src="resources/js/model/Product.js"></script> 
<script>
    function getdetails(){

        var p = new Product(15,11.5,"Pizza Test","P");
        var z = new Product(68,1.5,"Zutate Test","Z");

        p.addOneProduct(z);

        var request = $.ajax({
            type: "POST",
            url: "yb_test_post.php",
            dataType: "json",
            data: p
        });

        request.done(function(msg) {
            $("#msg").html( " Post parameter are: <br/>"+msg );
        });

        request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
        });
    }
</script>

and Product.js

   function Product(id, price, name, type){
    this.id = id;
    this.price = +price;
    this.totalPrice = +price;
    this.name = name;
    this.type = type;
    this.products = [];

    this.addOneProduct = function(oneProduct){
        this.products.push(oneProduct);
        this.totalPrice= this.totalPrice+oneProduct.price;
    };
  }

What am I doing wrong?

Kenneth · Accepted Answer · 2013-04-19 14:09:10Z

4

You should alter your product.js The problem is that you're losing the reference to this.

This should do the trick:

function Product(id, price, name, type){
    this.id = id;
    this.price = +price;
    this.totalPrice = +price;
    this.name = name;
    this.type = type;
    this.products = [];
    var self = this;

    this.addOneProduct = function(oneProduct){
        self.products.push(oneProduct);
        self.totalPrice= self.totalPrice+oneProduct.price;
    };
  }

EDIT: When you call the method addOneProduct, the this-reference is correctly resolved. The problem is when actually try to call the service and set p as the data. Upon serializing the object, JS actually calls into the method and at that point the reference is incorrect. What you need to do is stringify the object before assigning it to the data:

var request = $.ajax({
            type: "POST",
            url: "yb_test_post.php",
            dataType: "json",
            data: JSON.stringify(p)
        });

edited Apr 19, 2013 at 14:09

answered Apr 19, 2013 at 13:57

Kenneth

28.8k7 gold badges65 silver badges85 bronze badges

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

8 Comments

Ian Over a year ago

How do you lose the reference to this? When you call it like p., it doesn't lose the reference

user1167253 Over a year ago

I have tried but now I get another error TypeError: oneProduct is undefined self.totalPrice= self.totalPrice+oneProduct.price;

Ian Over a year ago

The addOneProduct is a method bound to this, so as long as you call the function as a method, this shouldn't be lost. - jsfiddle.net/Kq6Jw . It's different if you did var a = p.addOneProduct; a();

Kenneth Over a year ago

You're right, I didn't see that. My apologies for the oversight

Ian Over a year ago

@user1167253 Your code works fine - jsfiddle.net/Kq6Jw/1 . Are you sure you're not using this code somewhere else too? Or are you sure the error is referring to the line p.addOneProduct(z);?

|

Collectives™ on Stack Overflow

Can not send a POST-JSON-Request with JavaScript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related