Using domready for AJAX calls

Question

Is there a way to know that the elements are on a document before I try to access them with JQuery?

Code Snippet:

var s = new AjaxCall(someurl);

s.oncomplete = function(response) {
    var container = $('container_id');
    container.innerHTML = response;
    var ul = $('some_id'); }

The response is some HTML returned by the Ajax call.

This response updates the contents of a div and then I access an element that was created by the innerHTML (the ul in the code).

If the response is large, I believe there would be times that some elements would not be rendered when I will try to access them. Does domready work for AJAX calls, and could this solve my problem?

Answer 1

If you were using jQuery, your success function for the request would be:

$.ajax({
  url: "test.html",
  cache: false,
  success: function(resp){
    var ul = $("#containerID").html(resp).find("#ElementInRespID");
    //do something with ul
  }
});

This will put the result in the container, find the element you want in there and set the ul variable to it.

Answer 2

You seem to have forgotten to use #, as it should be $('#some_id');, and not $('some_id');. I suggest instead to just use document.getElmenetById. It reads more clearly and is much more efficient than contextual-based ID matching.

var some_id = document.getElmenetById("some_id");

Regarding your question of the element "not being available," don't worry. The innerHTML setter performs a synchronous operation. If a tag with a matching ID is parsed from that, then the corresponding element will be available immediately after setting the innerHTML.