SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    document.onkeypress not working if content generated using AJAX

    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?


  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rhgiant View Post
    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.

    Code javascript:
    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
        ...
    };
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rhgiant View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    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;
    }

    Code:
    <div id="myform-container">
    
    <!-- start ajax "live" part (that is "formHTMLReturnedFromServer") -->
    <form name="myform">
    
    ...
    
    </form>
    <!-- end ajax "live" part -->
    </div>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.



    Code JavaScript:
    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.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rhgiant View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :/

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rhgiant View Post
    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:

    Code javascript:
     
    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;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •