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

Question

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));

@GobSmack — Nothing in the question suggests that the Ajax call is supposed to send JSON. PHP won't parse JSON by default. — Quentin
– Quentin, Commented Aug 21, 2015 at 19:17
Your addParent function expects 3 parameters, you're only passing it an Array. But that should not be causing the error. — blex
– blex, Commented Aug 21, 2015 at 19:21
@blex Thank you, wasn't the issue but I did need to fix that — Wesley Smith
– Wesley Smith, Commented Aug 21, 2015 at 19:27

Quentin · Accepted Answer · 2015-08-21 19:24:36Z

4

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:

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 .
Serialise the object to JSON and then deserialise it to strip out all the functions before you pass it to param via data:
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.
(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.

answered Aug 21, 2015 at 19:24

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

Wesley Smith Over a year ago

You're right all of the functions in my object are called again in the context of window before the Ajax even sends. I wasn't sure how to explain what I was seeing there without confusing the question. That makes perfect sense now. Thank you very much I will implement the changes you suggested.

Collectives™ on Stack Overflow

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

Update:#

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update:#

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related