Question

I am working with some controls that are written using microsoft ajax tool kit. I want to trigger an event in these controls using jQuery. I was hoping that it should be as simple as triggering any event from jQuery but it does not seem to be working. Here is sample code..

Ajax Control

/// <reference name="MicrosoftAjax.js"/>

Type.registerNamespace("MyNameSpace");

MyNameSpace.AjaxUserControl = function(element) {
  MyNameSpace.AjaxUserControl.initializeBase(this, [element]);
}

MyNameSpace.AjaxUserControl.prototype = {
  initialize: function() {
  MyNameSpace.AjaxUserControl.callBaseMethod(this, 'initialize');
  }
},

dispose: function() {

  MyNameSpace.AjaxUserControl.callBaseMethod(this, 'dispose');
},

_onChange: function(evt) {
  alert('On Change event.');
  },
}
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Jquery Code:

var myJqueryControl = (function ($, AjaxControl) {
  $(document).ready(function(){
  var ajaxEventProxy = Function.createDelegate(AjaxControl, AjaxControl._onChange);
  $("#JqueryCommandButton").click(ajaxEventProxy);
} (jQuery,MyNameSpace.AjaxUserControl));

Its not working, when the button is clicked i cannot see alert message inside onchange. Would appreciate any guidance on how to make it work.

Thanks
CSC

Answer 1

It would work much easier if you followed the JQuery widget pattern. Because an AJAX control wraps around an element, much like the widget does, you can more easily integrate the two, by writing some setup with the init method:

_init: function() {
    //store a control reference within the widget
    this._control = $find(this.element.attr("id"));
}

Then, in your widget, you can refer to the control via the this._control.

If you can’t switch models, the way to resolve this is not refer to the type directly, but the instance… instead of passing in the reference MyNameSpace.AjaxUserControl to the constructor, pass in an instance, then you can do:

instance._onchange();

To invoke the event.