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?
