www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to Bind Ajax to Parent Object

  1. #1
    Join Date
    Oct 2013
    Posts
    17

    How to Bind Ajax to Parent Object

    I am new to jQuery and Javascript. I am creating a general object to navigate database tables (NavDb). It works perfectly if I create 1 instance. When I run multiple instances it sometime fails. I traced the problem to how I use 'this'. One routine that initializes/handles ajax requests fails. A form can have any number of selectors (autocomplete or drop-downs). The routine recursively performs ajax requests until all the selectors have been initialized. The 'this' variable refers to the ajax object when entering the 'success:' function. I need a reference to the parent object so I created a $this on line 2. The problem is it creates a closure and messes up the second instance (I believe that is what is happening). How do I get a reference to the parent object inside the success function? Can I bind the ajax request to the parent object? I need something like this:
    Code:
    var $this = this.parent;
    Hopefully I explained this clearly.

    Code:
      NavDb.prototype.ajaxSelData = function () {
            var $this = this;
            if (this.curSelector >= this.selectors.length) {
                $this = null;
                return;
            }
            else {
                var sql = $this.selectors[$this.curSelector].sql;
                $.ajax({
                    url: 'php/select.php',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        'sql': sql
                    },
                    success: function (data) {
                        if (data.success) {
                            if (data.v.length > 0) {
                                $this.selectors[$this.curSelector].data = data;
                                if ($this.selectors[$this.curSelector].type == "autoComp") {
                                    $this.initAC();
                                };
                                if ($this.selectors[$this.curSelector].type == "dropDown") {
                                    $this.initDD();
                                };
                            }
                        } else {
                            alert(data.error);
                        }
                        $this.curSelector++;
                        $this.ajaxSelData();
                     }
                });
            };
        };

  2. #2
    Join Date
    Nov 2013
    Location
    London, United Kingdom
    Posts
    15
    The main issue with this code is that curSelector is modified within the callback function. So, if two callback functions will be executed not in the order the request was called (the "second" response arrived earlier then the "first" one) then the callback logic will be applied not to the element it is should. It is better to save the current element in to the local variable and use counter only to check whether all the elements are processed.

  3. #3
    Join Date
    Oct 2013
    Posts
    17
    I clicked reply before I posted the fix. The fix was to include a context: in the ajax request and set it to 'this'.

    $.ajax({
    url: 'php/select.php',
    type: 'POST',
    context: this, // Only needed 'this' not this.parentNode.
    dataType: 'json',
    data: {
    'sql': sql
    }
    }).done(function (data) {
    if (data.success) {
    if (data.v.length > 0) {
    this.selectors[this.curSelector].data = data;
    if (this.selectors[this.curSelector].type == "autoComp") {
    this.initAC(this.curSelector);
    };
    if (this.selectors[this.curSelector].type == "dropDown") {
    this.initDD(this.curSelector);
    };
    }
    }
    this.curSelector++;
    this.getSelData();
    }).fail(function (XHR, textStatus, errorThrown) {
    $("#status").html(getErrorText(XHR.responseText));
    });

  4. #4
    Join Date
    Oct 2013
    Posts
    17
    Let me try this again. I have an array with information about selectors that need to be initialized. I initialize them sequentially. The next one does not start until the current one in completes. Hence the need for a recursive function. I do this on purpose to not overload the server. The fix to the problem was to use the context: property and set it to 'this'. Got rid of $this. Seems to solve problem with limited testing.



    Code:
                    $.ajax({
                        url: 'php/select.php',
                        type: 'POST',
                        context: this,    // Only needed 'this' not this.parentNode.
                        dataType: 'json',
                        data: {
                            'sql': sql
                        }
                    }).done(function (data) {
                        if (data.success) {
                            if (data.v.length > 0) {
                                this.selectors[this.curSelector].data = data;
                                if (this.selectors[this.curSelector].type == "autoComp") {
                                    this.initAC(this.curSelector);
                                };
                                if (this.selectors[this.curSelector].type == "dropDown") {
                                    this.initDD(this.curSelector);
                                };
                            }
                        }
                        this.curSelector++;
                        this.getSelData();
                    }).fail(function (XHR, textStatus, errorThrown) {
                        $("#status").html(getErrorText(XHR.responseText));
                    });

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles