Question

So I have this text input in a form, and I want to update a div as the user types text in the text input.

 <p><label for="movie_name">Film: </label> <input type="text" name="movie_name" class="required" onkeydown="changediv2(this.value)" /></p>

 <p><div id="ajax_update"></div></p>

My js method:

function changediv2(str) {
$('#ajax_update').html(geturl('http://url/search/movie?query='+str));
}

If I type in a browser http://url/search/movie?query=someString, I get some html displayed.
But when I call it via this ajax call, nothing happens…

My geturl method:

function geturl(addr) {
 var r = $.ajax({
  type: 'GET',
  url: addr,
  async: false
 }).responseText;
 return r;
}

I cannot see what is wrong in there…

Please help me! 🙂

Answer 1

Chances are, your function returns before the ajax response is received by the client. I would suggest getting rid of the async option and performing the inject within $.ajax‘s success callback, e.g.:

function changediv2(addr, str) {
    $.ajax({
      type: 'GET',
      url: addr + str,
      success: function(response) { $('#ajax_update').html(response) }
    });
}