JQuery: Hook and change ajax request

Question

Hi,

I'm new the JQuery. I am using a closed framework, that allows me to add code, but not to change some of the behavior. In order to add functionality, I need to hook into a specific Ajax request and either redirect it to my URL (so i can change the data there and be a proxy), or change the parameters of the request at the client side.

Is this possible with JQuery? And if so, how?

The original event is fired after a text input box is being updated.

Thanks

---

Update:

After further inspection, it seems the textbox is manipulated using the JQuery Autocomplete plugin. I am trying to translate the words returned from this ajax request. Basically the user enters text in one language, and i want to translate that to english (the translation itself isn't the problem) so the autocomplete will use the english words, and then i want to translate from english to the original language, to be displayed in the text box and the hovering div.

Answer 1

I don't think there is a simple solution to what you're trying to do since the XMLHTTPRequest object is pretty closed down for security reasons.

If you're lucky the part that does the AJAX request is broken out into a function that you can overwrite or override using the prototype object.

If not, you're probably better off hooking the change event of the textbox.

In jQuery:

$('#textboxid').unbind();
$('#textboxid').change(function () {
    $.ajax({
         url: 'http://yourwebservice',
         data: {}, //the data to send to your webservice
         success: function (data) {
             //do your magic
         };
    })
});

Answer 2

Use the google translate jquery plugin. I've used it very successfully for translating text in the past: http://code.google.com/p/jquery-translate/

Answer 3

I have used the jQuery autocomplete plug-in to do something similar, although not in a scenario where I am dealing with a "closed framework".

You will be able to easily accomplish what you want by using the .setOptions() method on the autocomplete object after it has been initialized. So your code will go something like this (untested! pseudocode!):

$(autoCompletedField).setOptions({
   formatItem: function(resultsRow, resultPosition, totalResults, inputWord) {
      // translate your menu items to be displayed in the drop down menu here
      // perhaps extend jQuery to handle $.translate(inputWord) ?
      return "<li>"+translatedWord+"</li>";
   }
}).result(function(event,selectedItem){
   // optionally do something more when the user selects one of those items here
   // translate the selectedItem back to another language? i dont know.
   return translatedItem;
});

check out the options: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

Answer 4

You could look at implementing your code in a "beforeSend" of the AJAX request?

Answer 5

Have you taken a look at the observer pattern in javascript? I have created an example on my blog. This might help you.

http://www.versomas.com/dannyg/post/Observer-pattern-in-Javascript.aspx