Can't access Elements previously created by innerHTML with Javascript/Prototype

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?

What about `document.getElementById("akas-admin").submit()`? — Shadow The GPT Wizard, Dec 23 '10 at 12:22
@Shadow Wizard - that works fine! but id like to submit usint ajax and get the response text in a callback. seems to be a prototype problem. — The Surrican, Dec 23 '10 at 12:24
@Joe you said you wanted to submit the form, so can't see any reason why not doing it with pure JavaScript.. unless you want something else? — Shadow The GPT Wizard, Dec 23 '10 at 12:34
@Shadow Wizard i don't want to leave/reload the current page but have the response text of the sumbmission request in javascript. — The Surrican, Dec 23 '10 at 12:43
@Joe oh sorry, thought you meant "real" submission. Not familiar with `prototype.js` but as last resort you can switch to jQuery, where I do know that such things work. — Shadow The GPT Wizard, Dec 23 '10 at 12:49
When do you call that function that submits your form? Make sure it's called right after Ajax request completed. Also adding a setTimeout might help — Serkan Yersen, Dec 23 '10 at 14:11
it should be called when a user clicks a link to submit it. i think about creating the form in javascript and just passing the data using json... — The Surrican, Dec 23 '10 at 14:44

score 1 · Accepted Answer · answered Dec 31 '10 at 19:17

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?

answered Dec 31 '10 at 19:17

clockworkgeek

37,650
9
89
127

this looks very, very promising! gonna try that out! – The Surrican Dec 31 '10 at 21:02

score 0 · Answer 2 · answered Dec 23 '10 at 12:47

0

Try using live; since your form is added after the DOM has loaded. Try this:

$("#akas-admin").live('request',function(){ //Do your stuff here })

Hope this helps.

answered Dec 23 '10 at 12:47

bitblt

217
1
3
8

looks promising! but this is jquery. is there anything similar in prototype? – The Surrican Dec 23 '10 at 13:00
this post answers your question: http://stackoverflow.com/questions/1479782/prototype-equivalent-for-jquery-live-function – bitblt Dec 23 '10 at 13:02
thanks! i tried to do it but cant get it working. i posted my code into the answer, could you have a look at it? – The Surrican Dec 23 '10 at 13:50

score -1 · Answer 3 · answered Dec 31 '10 at 17:59

-1

When you hear hoof beats, think horses not zebras. Do you actually have an element with the id 'admincovers_content'?

answered Dec 31 '10 at 17:59

Michael Lorton

43,060
26
103
144

2

OP says `$('akas-admin')` returns null, which breaks the script before even trying to retrieve 'admincovers_content'. – clockworkgeek Dec 31 '10 at 19:21

Can't access Elements previously created by innerHTML with Javascript/Prototype

3 Answers3

Linked