How can I send an object via Ajax from within a Javascript Class?

My question title may not be phrased well, sorry.

I want to create a Javascript class to simplify sending information to a php page.

I'm using the method described in this answer to create my class

This is what I have so far:

var ParseObject = Class.extend({
  init: function(classname, id){
    // required properties  
    this.classname=classname;
    this.objects=[];
    this.fields=[];
    // optional properties
    if(id && id != '') this.id='';
    //this.command = command;
    //this.callback='';
    //this.parent=[];
    //this.children=[];
    //this.relation='';
  },
  set: function(field, value) {
      if(field == 'classname') this.classname=value;
      else if(field == 'callback') this.callback=value;
      else if(field == 'command') this.command=value;
      else this.fields.push(field, value);
  },
  addChild: function(obj){
      this.children ? this.children.push(obj) : this.children= [obj];
  },
  addParent: function(linkedFieldName, parentClassName, parentId){
      this.parent=[linkedFieldName, parentClassName, parentId];
  },
  addObject: function(obj){
      this.objects.push(obj);
  },
  isRelatedBy: function(relation){
      this.relation=relation;
  },
  send: function(){
        var obj = this;
        $.ajax({
              type: "POST",
              dataType: "json",
              url: "php/parseFunctions.php",
              data: {data:obj},
              success: function(response) { 
                  // do stuff 
              },
              error: function(response) {
                  // do stuff 
              }
        });
  }

});

And here's how Im trying to use the class:

var testObject = new ParseObject('TestObject');
testObject.set('callback','testResopnse');
testObject.set('command','save');
testObject.set('title','New Title');
testObject.set('description','New Description');
testObject.set('stuff',['one','two','three']);
testObject.addParent(['parent', 'MeComment', 'kRh5xcpkhz']);
testObject.send();

Everything works as expected until I get to testObject.send();

What I expect is for the below object to get sent to my PHP page:

But instead, what I get is "Uncaught RangeError: Maximum call stack size exceeded"

Why does this happen, and how can I achieve the desired result?


Update:#

Per Quentin's suggestion, this got me sorted

var obj =$.parseJSON(JSON.stringify(this));

Answers


When you pass an object to data:, jQuery will call param on it.

That function includes this code:

 // If value is a function, invoke it and return its value
 value = jQuery.isFunction(value) ? value() : (value == null ? "" : value);

That ends up calling all the functions in the object (including the constructor) in the context of window. I don't have the tuits to figure out all the effects of that, but it clearly isn't desirable and, based on the error message, leads to infinite recursion.

You have several options here:

  1. Write an explicit function that extracts the data you care about from the object and presents as a simple data structure consisting only of the data types you can serialise with .
  2. Serialise the object to JSON and then deserialise it to strip out all the functions before you pass it to param via data:
  3. Serialise the object to JSON, pass that as a string to data:, set the request contentType: "application/json" and change the PHP to expect a JSON formatted request instead of a form formatted request.
  4. (I don't know if this will work) change the way you construct the class to use Object.defineProperty() and mark all the functions so they are not enumerable. I suspect this approach would fail because the object is, itself a function.

Need Your Help

logic change url get to post method jquery

javascript php jquery forms post

I am trying to convert a GET URL to a POST URL in Jquery, I need logical help.

IE 10 + KnockoutJS = HierarchyRequestError?

javascript internet-explorer knockout.js

I've simplified my problem as much as possible. It only happens in Internet Explorer (9 and 10 confirmed). I have a page rendered with this:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.