CODEWITHSUNDEEP
javascriptjqueryajax
Bernie Perez
Bernie Perez

Reputation:

Use jQuery to replace XMLHttpRequest

I am quite new to JavaScript libraries. I wanted to replace my current code with jQuery. My current code looks like this:

var req;

function createRequest() {
   var key = document.getElementById("key");
   var keypressed = document.getElementById("keypressed");
   keypressed.value = key.value;
   var url = "/My_Servlet/response?key=" + escape(key.value);
   if (window.XMLHttpRequest) {
      req = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
   }
   req.open("Get", url, true);
   req.onreadystatechange = callback;
   req.send(null);
}

function callback() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var decimal = document.getElementById('decimal');
         decimal.value = req.responseText;
      }
   }
   clear();
}

I wanted to replace my code with something a little friendlier like jQuery's

$.get(url, callback);

However it doesn't call my callback function.

Also I would like to call a function called createRequest continuously. Does jQuery have a nice way of doing that? ­­­­­­­­­­­­­­­­­­­­­­­

Upvotes: 14

Views: 30527

Answers (6)

Bernie Perez
Bernie Perez

Reputation: 12573

In the end I guess it was added the type. This seems to work for me.

  function convertToDecimal(){ 
    var key = document.getElementById("key"); 
    var keypressed = document.getElementById("keypressed"); 
    keypressed.value = key.value; 
    var url = "/My_Servlet/response?key="+ escape(key.value);
    jQuery.get(url, {}, function(data){
       callback(data);}
       , "text" );
  }

  function callback(data){
    var decimal = document.getElementById('decimal');
    decimal.value = data;
    clear();
  }

Thanks Everyone for the help. I'll vote you up.

Upvotes: 0

Jim
Jim

Reputation: 73936

Take out the readyState and status checks. jQuery only calls your callback upon success. Your callback is supplied the arguments (data, textStatus), so you should use data instead of req.responseText.

window.setTimeout() as suggested by another answer won't do what you want - that only waits and then calls your function once. You need to use window.setInterval() instead, which will call your function periodically until you cancel it.

So, in summary:

var interval = 500; /* Milliseconds between requests. */
window.setInterval(function() {
    var val = $("#key").val();
    $("#keypressed").val(val);
    $.get("/My_Servlet/response", { "key": val }, function(data, textStatus) {
        $("#decimal").val(data);
    });
}), interval);

Upvotes: 3

John Millikin
John Millikin

Reputation: 200746

There's no need to set the GET parameters on the URL, jQuery will set them automatically. Try this code:

var key = document.getElementById("key");
[...]
var url = "/My_Servlet/response";
$.get (url, {'key': key}, function (responseText)
{
    var decimal = document.getElementById ('decimal'); 
    decimal.value = responseText;
});

Upvotes: 2

Lasar
Lasar

Reputation: 5437

$.get(url, {}, callback);

should do the trick. Your callback could be simplified like this:

function callback(content){
    $('#decimal').val(content);
}

Or even shorter:

$.get(url, {}, function(content){
    $('#decimal').val(content);
});

And all in all I think this should work:

function createRequest() {
    var keyValue = $('#key').val();
    $('#keypressed').val(keyValue);
    var url = "/My_Servlet/response";
    $.get(url, {key: keyValue}, function(content){
        $('#decimal').val(content);
    });
}

Upvotes: 19

ceejayoz
ceejayoz

Reputation: 179994

According to the docs, jQuery.get's arguments are url, data, callback, not url, callback.

A call to JavaScript's setTimeout function at the end of your callback function should suffice to get this to continually execute.

Upvotes: 2

Wes P
Wes P

Reputation: 9850

I don't think jQuery implements a timeout function, but plain old javascript does it rather nicely :)

Upvotes: 2

Related Questions