Jquery Set Interval Help

[stevo356]

Hi,

I have a problem with setInterval (jquery). It works great, but I wan't the element to stop refreshing when a textarea is selected (so that users can insert text).

Here is the refresh code I'm using currently.

$(document).ready(function() { 
   $("#container").load("php/functions.php?page=wall");
 
   refreshId = setInterval(function() {
      $("#container").load("php/functions.php?page=wall&r="+Math.random());
 
   
   }, 1000);
});

How could I alter this, for example, to make the interval stop whilst the the text area is in focus/being typed in? At the moment, I've had to make the textarea change the URL onclick - which is very unstable.

Many Thanks

[pritaeas]

Try using focus() and blur() on your textarea. In focus you can clear the interval, in blur set it again.

[stevo356]

Hi,

Thanks for the reply!

I've tried a few things with focus, but it keeps telling me "refreshId is undefined"

Why might this be? Is there a specific way I need to type it?

Thanks

[pritaeas]

Try defining it as a var outside the ready function.

[stevo356]

That seems to work brilliantly.

onfocus="clearInterval(refreshId);"

What would I do for the onblur scenario? setInterval?

Thanks

[pritaeas]

Yes. Just set it again.

[stevo356]

Thank you for your help,

working perfectly now. Just one small query - when using firefox, onkeyup calls a function, but doesn't understand this line:

var getEvent=getEvent=(event.which) ? event.which : event.keyCode;

This works fine in all other browsers, except firefox.

What am I doing wrong?

Thanks

[Airshow]

Stevo,

You should be able to do all that setinterval stuff inside $(document).ready(...) without any global variables, like this:

$(document).ready(function() { 
    var container = $("#container");
    var refreshId;
    function loadwall() {
        container.load("php/functions.php?page=wall&r="+Math.random());
    }
    container.bind('onfocus', function() {
        clearInterval(refreshId);
    });
    container.bind('onblur', function() {
       refreshId = setInterval(loadwall, 1000);
    });
    loadwall();//Immediate, initial load ...
    container.trigger('blur');//... then repeatedly at 1000ms intervals.
});

This is efficient in that $("#container") is created only once and there are no repeated lines of code.

As for onkeyup , you need something like this to cover the ground (both IE and FF are awkward in different respects):

whatever.onkeyup = function(event) {
    event = event || window.event;
    var code = event.which || event.keyCode || event.charCode;
    ...
};

Airshow

[stevo356]

I've put the code below in place, and it still doesn't seem to want to operate.

I get errors saying "wall" is null basically. Can't seem to get my head round this.

Sorry for the continued questions - I'm just eager!

Thanks a lot.

<script>
document.getElementById("wall").onkeydown=function(e,str){
	str=document.getElementById("wall").value;
    e = event || window.event;
    var code = e.which || e.keyCode || e.charCode;
	if(code=="13"){
		if(window.event.shiftKey){
			document.getElementById("comment").value=document.getElementById("comment").value+"\n";
		} else {
			wallSendComment(str);
			document.getElementById("wall").value='';
			document.getElementById("wall").focus();
			document.getElementById("wall").defaultValue;
			return false;
		}
	} else {
		return true;
	}
}
</script>

[Airshow]

You need to frame the code inside onload=function(){...} (non jQuery) or $(document).ready(function(){...}) (jQuery).

Translating your code into jQuery and combining with what I posted abvoe, you get something like this (untested):

$(document).ready(function() {
    var container = $("#container");
    var refreshId;
    function loadwall() {
        container.load("php/functions.php?page=wall&r="+Math.random());
    }
    container.bind('onfocus', function() {
        clearInterval(refreshId);
    });
    container.bind('onblur', function() {
       refreshId = setInterval(loadwall, 1000);
    });
    loadwall();//immediate, initial load ...
    container.trigger('blur');//... then repeatedly at 1000ms intervals.

    var wall = $('#wall');//or container?
    wall.bind('onkeydown', function(e) {
        e = e || window.event;
        var str = wall.attr('value');
        var code = e.which || e.keyCode || e.charCode;
        if(code=="13") {
            if(e.shiftKey){
                var c = $("#comment");
                c.attr( 'value', c.attr('value')+ "\n" );
                //need to return true/false here?
            }
            else {
                wallSendComment(str);
                wall.attr('value', '');
                wall.focus();
                wall.defaultValue;//? (meaningless)
                return false;
            }
        }
        else { return true; }
    });
});

Airshow

[stevo356]

Hi,

Many thanks for your help! It's helped this progress a great deal.

I have only one remaining problem which refers to the first part of the code.

Upon entering the textarea, the interval stops perfect,

but when the input is entered, the interval does not automatically restart.

It's perfect otherwise!

Thanks very much.

[Airshow]

Stevo,

Can you post the HTML (or a releant subset of it) please, so I can see what the script applies to.

In particular I need to know if wall and container are the same element.

Airshow

[stevo356]

Hi, In simple terms, (sorry if I never explained this too well), wall is the main text area to add a new post as such.

in the "container" element, the posts are displayed - updating automatically - in theory.

The problem lies with the comments part - which displays a text area relevent to each post (where a comment can be inserted).

only one such textarea is available at any one time, and is given an id of comment. This comment element is within "container". So, i've used your code suggestion which clears the interval when "comment" is focussed, but doesn't restart it when the text is entered.

Again, sorry for my poor initial explanation. One of those weeks..

<div id="content">
<h1>&raquo; Welcome To The USC IntraWall!
</h1>
<textarea class="wallinput" id="wall" onclick="clearInput()";">To Post a comment, type it here, and press Enter!.......</textarea>
<div id="container">
//Comment Text Area displayed here
</div>
</div>
</div>

Many Thanks

[Airshow]

Stevo,

Now I'm even more confused.

I can't see how the "comment" element can be within "container". Reason being the line container.load("php/functions.php?page=wall&r="+Math.random()); which would, at each load, blitz "comment" and anything else already in container.

The only thing that would make sense would be if functions.php delivered each post complete with its own "comment" textarea. But that would be wasteful compared with a single, hard-coded textarea which could be cleared and reused.

Airshow