Fat Folder Design | Guide

December 2, 2010July 31, 2014

PHP-Lively Refresh Fix

PHP-Lively is a php/javascript/ajax live chat script that allows users to chat with vistors on their site. It’s like that feature that nearly all large business sites have but not quite as fully fledged and somewhat buggy. It’s also free, not $99 a month like the most common chat service is.

I was installing PHP-lively into a site after testing it on my personal server and noticed it was not automatically refreshing the view. So if someone typed the other user would have know way of knowing unless they hit the “Envair” (enter, yes the scripting is in… spanish?). This of course was not the point of a live chat so I dug through the code (formatted in some strange language to me) to fix the problem.

httpRequest.open('POST', 'index.php', true);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.onreadystatechange = function() { traer_contenido(httpRequest); };
vis_data = "modo=escribir_msg&sid=" + sid + "&nick=" + encodeURIComponent(chatnick.value) + "&email=" + encodeURIComponent(chatemail.value) + "&msg=";
httpRequest.send(vis_data);

httpRequest.open('POST', 'index.php', true);

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

httpRequest.onreadystatechange = function() { traer_contenido(httpRequest); };

vis_data = "modo=escribir_msg&sid=" + sid + "&nick=" + encodeURIComponent(chatnick.value) + "&email=" + encodeURIComponent(chatemail.value) + "&msg=";

httpRequest.send(vis_data);

Snipplr: http://snipplr.com/view/45224/phplively-auto-refresh-fix/

The code goes towards the end of the code.js document (located at master/js/chat.js), specifically at the end of the UpdateTimer() function.

What the code does is register a submission as if you entered text, but sends a blank set of data, wich tells the script to update without posting. This is very much a hack and should only be used if your on a server that will not allow the automatic refreshing of the script as written.

November 27, 2010July 31, 2014

Javascript Auto-submit TinyMCE fix

So I was working over some things using my auto-submit script and had some trouble with textarea when using TinyMCE. Seems that TinyMCE only saved the data from the editor pane to the textarea when you press the submit button, and technically, the auto-submitter never presses the submit button. After a quick google the solution is simple, simple tell TinyMCE to save before the script goes through and submits the information. The code to do this (so you don’e have to look around) is this:

tinyMCE.triggerSave();

1	tinyMCE.triggerSave();

Snipplr: http://fatfolderdesign.com/60/code/javascript-auto-submit-tinymce-fix

And thats all you need. Best place to put this I think is the top of the as() function but I was able to place in in the same call as the as() function and achieve results, really, it all depends on the application.

November 23, 2010July 31, 2014

Javascript auto-submit form

I was working on this for a new site idea (not for this one, it’s be a whole new site) and made this, it’ll defiantly come in useful to me later, probably to others too. What this little function does is submit the data using ajax whenever the as() function is called. This can be used in a few ways, the two more obvious, and probably most useful, ones are having a form submit button ass the as() function to submit the data without having to reload or redirect the user, the other is the method I’m using.

I’m using this to automatically submit the form whenever it is updated, so i’ve placed in on the forms keyup event. That way, when something is typed in any part of the form it’s sent to the server for an update. When using this method you’ll want to make sure your save code is very lightweight (I suggest checking the form contents meet any requirements before sending it and having the form just update the data near blindly (better run a check for injection hacks but thats it), and of couse not doing that on anything where data loss is going to cause headaches). Anyways enough babble, here’s the code

function as(){
	var input = document.getElementById('form').elements
	var param = 'savetype=auto';
	for(var i=0; i!=input.length; i++){
		if(input[i].type != 'submit'){
			param = param+'&'+input[i].name+'='+input[i].value
		}
	}
	var ass=new XMLHttpRequest();
	ass.open('POST','save.php',true);
	ass.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	ass.setRequestHeader("Content-length", param.length);
	ass.setRequestHeader("Connection", "close");
	ass.send(param);
	ass.onreadystatechange = function() {
		if(ass.readyState == 4 && ass.status == 200) {
			alert('your response code goes here');
		}
	}
}

function as(){

var input = document.getElementById('form').elements

var param = 'savetype=auto';

for(var i=0; i!=input.length; i++){

if(input[i].type != 'submit'){

param = param+'&'+input[i].name+'='+input[i].value

}

var ass=new XMLHttpRequest();

ass.open('POST','save.php',true);

ass.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

ass.setRequestHeader("Content-length", param.length);

ass.setRequestHeader("Connection", "close");

ass.send(param);

ass.onreadystatechange = function() {

if(ass.readyState == 4 && ass.status == 200) {

alert('your response code goes here');

}

Snipplr: http://snipplr.com/view/44799/ajax-form-autosubmit/

Things to note about the code. I set the first variable sent manually (on line 3) if you don’t want one set by the script then you can remove that line but you’ll have to remove the first “&” or you’ll get some unexpected events (probably, I wouldn’t try it). If you want to use a GET instead of the POST then you’ll have to re-jigger a bit, I can do if for you if you want just leave a comment. Also, as with a lot of my stuff, no IE to test on. Should work though (I’ve made sure not to repeat thing I know don’t work in IE), if someone tries it and it fails let me know (and with what error) and I’ll fix it.

Update: 11/24/10 1:51am
Removed an alert that did nothing but annoy, changed the line reference accordingly.

Update 12/29/10 11:10pm
Added a example of this in action to the example page. It’s a pretty simple example but shows it working, I can always come up with a better one if it’s not clear enough or if it’s not useful for a particular application your trying.