document.onkeypress not working if content generated using AJAX

[rhgiant]

Hello,

I've been saerching this for a while now, and tried to solve the problem before posting here.

A part of my page is the result of an XMLHttpRequest.

This part should react to onkeypress. But, obviously, it does not.

I know that with jQuery you would use livequery, but I want to learn plain JS so I'd like someone to point me toward some ressources that would help me?

[paul_wilkins]

I know that with jQuery you would use livequery, but I want to learn plain JS so I'd like someone to point me toward some ressources that would help me?

You can set an event handler on the document itself, or on the container in which the page content is stored.

var container = document.getElementById('container');
container.onkeypress = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (targ.nodeType === 3) {
        // fix Opera bug of targeting text instead of element
        targ = targ.parentNode;
    }
    // do stuff from here, such as ...
    if (targ.nodeName !== 'INPUT') {
        return;
    }
    // do onkeypress stuff with the input field
    ...
};

[rhgiant]

Hey Paul, thanks a lot for the help

Great idea.

But what if the problem occurs with a onsubmit() event? The form is submitted, processed, reloaded using AJAX. Next form submission can hardly be AJAX again, can it?

[paul_wilkins]

But what if the problem occurs with a onsubmit() event? The form is submitted, processed, reloaded using AJAX. Next form submission can hardly be AJAX again, can it?

Why not? You might have to demonstrate the problem with some test code.

[rhgiant]

document.forms["myform"].onsubmit = function() {
//send data to server using ajax
//get HTML back: the whole form is returned
document.getElementById('myform-container').innerHTML = formHTMLReturnedFromServer;
}

<div id="myform-container">

<!-- start ajax "live" part (that is "formHTMLReturnedFromServer") -->
<form name="myform">

...

</form>
<!-- end ajax "live" part -->
</div>

[paul_wilkins]

The div that contains the form isn't replaced, nor are any of the parents of that div, so any of those elements are suitable candidates on which to hang an event from which to wait for your onkeypress event to occur within the form.

[rhgiant]

Thanks for your reply. The key events are now working fine thanks to your advice.

My second post was focusing on how to implement your technique with the onsubmit() event.

document.forms["myform"].onsubmit = function() {
//send data to server using ajax
//get HTML back: the whole form is returned
document.getElementById('myform-container').innerHTML = formHTMLReturnedFromServer;
}

I can't tie it to a parent div, can I? I've tried with no success.

[paul_wilkins]

I can't tie it to a parent div, can I? I've tried with no success.

You can do that. Alternatively, when the form gets replaced by other content, you can reassign the onsubmit event at that time to the form.

[rhgiant]

It's embarassing... I've tried several times to what you told me, but I couldn't come up with anything satisfying. Neither assigning the onsubmit event to the parent div (can I submit a div?), neither the reassign approach.

Sorry about that :/

[paul_wilkins]

It's embarassing... I've tried several times to what you told me, but I couldn't come up with anything satisfying. Neither assigning the onsubmit event to the parent div (can I submit a div?), neither the reassign approach.

Sorry about that :/

When you replace the form, the onsubmit event that was assigned to the old form no longer exists, so you need to assign a new onsubmit event for the new form.

The following test code shows how that can be done:

 
function handleFormSubmit() {
    //send data to server using ajax
    //get HTML back: the whole form is returned
    var formHTMLReturnedFromServer = '\
        <form name="myform">\
        <p>Form generated at ' + Date() + '</p>\
        <input type="submit"></form>';
 
    document.getElementById('myform-container').innerHTML = formHTMLReturnedFromServer;
    document.forms["myform"].onsubmit = handleFormSubmit;
    return false;
}
document.forms["myform"].onsubmit = handleFormSubmit;

[rhgiant]

Brilliant!