my onPause Event (efficiency)

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Jezternz
    New Member
    • Jan 2008
    • 145

    my onPause Event (efficiency)

    Not exactly an event but it has the same general purpose. Basicly it will fire the event when the user stops typing for 500 miliseconds. The reason for this, is I have an ajax form and I want the form to validate automaticly (without having to wait for the onchange event to fire). I was wondering first of all if this is a good way to do it? (simplicity please!) and secondly how can I improve this (efficiency wise) or is it fine as is:

    Example:
    JS:
    Code:
    function onPause(theobj, qfunction, qverifyifunction){
    	if(qfunction && theobj){
    		var onp_currenttimer = false;
    		var thefunction = function(){
    			if(qverifyifunction)qverifyifunction();
    			if(onp_currenttimer)clearTimeout(onp_currenttimer);
    			onp_currenttimer = setTimeout(qfunction, 500);
    		}		
    		if (theobj.attachEvent)
    			theobj.attachEvent('onkeyup',thefunction)
    		else if(theobj.addEventListener)
    			theobj.addEventListener('keyup',thefunction,false)
    		else 
    			alert('Browser is out of date, please update.');
    		
    	} else alert("function and object arguments required for onPause function.");
    }
    function offPause(theobj, thefunction){
    		if (theobj.detachEvent)
    			theobj.detachEvent('onkeyup',thefunction)
    		else if(theobj.removeEventListener)
    			theobj.removeEventListener('keyup',thefunction,false)
    		else 
    			alert('Browser is out of date, please update.');
    }
    HTML:
    [HTML]
    <html>
    <head>
    <script type="text/javascript" src="onpause.js "></script>
    <script type="text/javascript">
    <!--
    function checkit(){
    if(document.get ElementById('me ').value.length > 6){
    document.getEle mentById('submi tbutton').disab led = false;
    } else {
    document.getEle mentById('submi tbutton').disab led = true;
    }
    }
    function checking(){
    document.getEle mentById('submi tbutton').disab led = true;
    }
    -->
    </script>
    </head>
    <body onload="onPause (document.getEl ementById('me') , checkit, checking);">
    <input type="text" id="me" />
    <input type="submit" id="submitbutto n" value="Submit!" disabled="disab led">
    </body>
    </html>
    [/HTML]

    Thanks in advance, Josh


    Edit: Gah, just realised the offPause function will not work, any ideas?
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    Why not just the onkeyup event and be done with it?

    Comment

    • Jezternz
      New Member
      • Jan 2008
      • 145

      #3
      because I don't want to call on an ajax call multiple times per second, I believe this would put unnecessary pressure on low-end machines (wouldn't it?) not to mention when someone enters all the fields on a register page it would end up calling check.php 20-50 times i'm guessing as apposed to 5-10 times.

      So yeh this method I would think would save both client and server system resources and bandwidth.

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        I was looking at your code and saw that you were enabling the submit button only. What Ajax calls are made? Even if the user stops typing for half a second, if they type another character, the Ajax call would now be useless.

        Comment

        • Jezternz
          New Member
          • Jan 2008
          • 145

          #5
          that was only an example to show its use, and yes it does become useless if a user stops then starts typing after half a second, however over that time it will have called the ajax call only twice, not once for every character typed (possibly 10+ times), so not really useless.

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            What kind of validation is performed? I'm still not sure why you want to avoid onchange.

            Comment

            • Jezternz
              New Member
              • Jan 2008
              • 145

              #7
              I use ajax to call a php file that will check (one example) if the username is within certain criteria (length, alphanumeric, ect) then connects to a database and checks if the username is already in use.

              Because I want the validation to disable and enable the submit button, if I used onchange the following problem arises:
              example:
              1. submit button starts disabled.
              2. I type in my fields all correctly. Then click somewhere else on the page to fire onchange event (note that even if you click on the submit button while its disabled, it doesnt even fire the onchange event, so the user has to click of somewhere else on the page, which is a little bit of a pain)
              3. The submit button becomes enabled.
              4. I add something on the end of the last field. (making it invalid)
              5. I Click submit -I can do this, as the onchange event wont fire (making the submit button disabled) until I have already clicked it.

              Problem: Submit button can be enabled while fields have invalid data.

              Thanks, Josh

              Comment

              • acoder
                Recognized Expert MVP
                • Nov 2006
                • 16032

                #8
                Some of the validation you could do without server-side code, or are you trying to keep all validation code in one place?

                Note that client-side validation doesn't have to be foolproof. You do as much as you can to help the user avoid seeing an error on the next page.

                You can call some validation code onsubmit, but then you'd need a synchronous call (which is usually not a good idea).

                If you want to go ahead with this onpause idea anyway, one way would be to use an object that handles it. It would be attached to the onkeyup event. If the event occurs, use setTimeout to call a function after 500 milliseconds (one second might be better) and also abort any previous Ajax requests. The function would obviously make the request and if successful enable the submit button. There's no need for an offpause function.

                Comment

                • Jezternz
                  New Member
                  • Jan 2008
                  • 145

                  #9
                  yeh I like to try validate as much as I can client side, but from what I have heard for security reasons you also need to verify server-side?

                  cheers acoder for baring with me

                  Comment

                  • acoder
                    Recognized Expert MVP
                    • Nov 2006
                    • 16032

                    #10
                    Yes, of course you need to validate server-side. What I meant was that not all validation on the client-side necessarily requires server-side code, e.g. length, alphanumeric, etc. Connecting to a database to check if the username already exists would, though.

                    Comment

                    • Jezternz
                      New Member
                      • Jan 2008
                      • 145

                      #11
                      ahhh yes, valid point.

                      thanks, Josh

                      Comment

                      Working...