Geek Answers Handbook

JQuery AJAX method call to javascript class

I am new to jQuery workflow and I would like to set up a javascript class that uses an internal method to create an AJAX request. When the request returns with success, the jQuery AJAX callback must invoke a method that belongs to the class itself. What code:

function IXClock() { this.m_intervalID = 0; this.startClock = function () { this.m_intervalID = setInterval(this.tictac, 500); } this.stopClock = function () { clearInterval(this.m_intervalID); } this.setClockTime = function(p_strTime) { $('#clock').html(p_strTime); } this.tictac = function () { $.ajax ({ type: 'POST', url: '/rap/rapClock.php', complete: function (data) { this.setClockTime(data); } }); } }

The class is a clock with an internal method (tictac) that asks for "what time" on the server side. After the server talks about time, the jQuery AJAX method should call the setClockTime method of the IXClock class. The invoke method will update the #clock div element in the html page.

The problem is that this.setClockTime () method is showing unknown, and javascript returns the error "this.setClockTime is not a function".

The question is: is there a way to invoka a class method from a jQuery AJAX callback?

+4
source share
4 answers

I think the problem is that this in your callback function is different from this reference to IXClock . Try:

 var thisClass = this ; this.tictac = function () { $.ajax ({ type: 'POST', url: '/rap/rapClock.php', complete: function (data) { thisClass.setClockTime(data); } }); }

Test case (added to the site where jQuery is already loaded):

 function uClass () { this.testFunction = function(input) { alert(input) ; } this.ajaxFunction = function() { var myClass = this ; $.ajax({ type: 'POST', url: '/', complete: function(data) { alert(myClass.testFunction) ; myClass.testFunction(data) ; this.testFunction(data) ; } }) ; } } var k = new uClass() ; k.ajaxFunction() ;
+10
source

This happens if your callback function goes away in a global context.

You can choose 2 ways

:

 this.tictac = function () { $.ajax ({ type: 'POST', context:this, url: '/rap/rapClock.php', complete: function (data) { this.setClockTime(data); } }); } }
+2
source

this does not apply to IXClock in your ajax callback. this always points to the current scope (see this document ). You need to do something like this:

 this.prototype.tictac = function () { var self = this; $.ajax ({ type: 'POST', url: '/rap/rapClock.php', complete: function (data) { self.setClockTime(data); } }); }

You can also use the jQuery .proxy() function for this purpose:

 this.prototype.tictac = function () { $.ajax ({ type: 'POST', url: '/rap/rapClock.php', complete: $.proxy(function (data) { this.setClockTime(data); }, this) }); }
0
source

In a result handler, this is not what you expect. (This is not an instance of IXClock)

 function IXClock() { this.m_intervalID = 0; } IXClock.prototype = { startClock: function () { this.m_intervalID = setInterval(this.tictac, 500); }, stopClock: function () { clearInterval(this.m_intervalID); }, setClockTime: function(p_strTime) { $('#clock').html(p_strTime); }, tictac: function () { var that = this; $.ajax({ type: 'POST', url: '/rap/rapClock.php', success: function (data) { // You want success here, not complete, IMO that.setClockTime(data); } }); } }

If you ask me, this ajax call does evil. It seems that it does not send any data and does not change any on the server, but it expects / receives / uses data from php, but uses the POST method. Must be

 $.get('/rap/rapClock.php', function (data) { that.setClockTime(data); });
0
source

More articles:


All Articles