Question

I am setting the innerHTML variable of a div with contents from an ajax request:

new Ajax.Request('/search/ajax/allakas/?ext_id='+extid,
  {
    method:'get',
    onSuccess: function(transport){
      var response = transport.responseText || "no response text";
      $('admincovers_content').innerHTML=response;
    },
    onFailure: function(){ alert('Something went wrong...') }
  });

The response text cotains a form:

    <form id="akas-admin" method="post" action="/search/ajax/modifyakas/">
        <input type="text" name="formfield" value="i am a form field"/>
    </form>

Then I call a functiont that should submit that form:

$('akas-admin').request({
  onComplete: function(transport){ 
      //alert('Form data saved! '+transport.responseText)
        $('admincovers_content').innerHTML=transport.responseText;
      }
});

The problem is $('akas-admin) returns null , I tried to put the form with this id in the original document, which works.

Question: Can I somehow “revalidate” the dom or access elements that have been inserted with innerHTML?

Edit Info: document.getElementById("akas-admin").submit() works just fine, problem is i don’t want to reload the whole page but post the form over ajax and get the response text in a callback function.

Edit:

Based on the answers provided, i replaced my function that does the request with the following observer:

Event.observe(document.body, 'click', function(event) {
  var e = Event.element(event);
  if ('aka-savelink' == e.identify()) {
      alert('savelink clicked!');
      if (el = e.findElement('#akas-admin')) {
        alert('found form to submit it has id: '+el.identify());
        el.request({
            onComplete: function(transport){ 
            alert('Form data saved! '+transport.responseText)
                $('admincovers_content').innerHTML=transport.responseText;
            }
        });
      }
  }
});

problem is that i get as far as alert('savelink clicked!'); . findelement doesnt return the form. i tried to place the save link above and under the form. both doesnt work.
i also think this approach is a bit clumsy and i am doing it wrong. could anyone point me in the right direction?

Answer 1

So $('akas-admin') returns null but document.getElementById("akas-admin") does not. The $ function is mostly just a wrapper for document.getElementById so it’s unusual for this to break down. Have you tried using Element.extend(document.getElementById('akas-admin'))?

Do you have any other libraries loaded? Can you recreate the problem in jsFiddle?