Technologies Ignited

Avoid confirm form resubmission

wyand — Mon, 28 Nov 2011 08:24:17 +0000

Do you know we’ve moved on a new address. There will be no new articles on this blog anymore. If you still want to keep in touch with us, follow us @ Code Mamba!You can read the same article on our new domain by clicking here!
If you have a and you want to avoid the ‘confirm form resubmission’ message on refresh you can check theese advices:
If you’re able to change the POST variables to GET variables, you can use the idea from this script:

if(isset($_POST['query']))
{
	header
	(
		'Location: ?controller=currentPage&post1='
		.$_POST['post1'].'&post2='.$_POST['post2']
	); // and so on...
	exit;
}

If you can’t convert your variables, but your view does not depend on the posted data you can use the idea from this script:

	processPostData();
	header('Location: ?controller=currentPage');
	exit;

This will redirect you to ‘?controller=currentPage’ after processing the POST data and if you refresh the page you will stay on ‘?controller=currentPage’, but you will not get the ‘confirm form resubmission’ message, because you have no post data on the redirected page.
If you can’t convert your variables and your view depends on the posted data you can try and send only flag variables. You can use the idea from this script:

	if(processPostData() == isValid())
	{
		header('Location: ?controller=currentPage&flag=1');
	}
	else
	{
		header('Location: ?controller=currentPage&flag=0');
	}
	exit;

If none of theese works, just be creative or leave me a message here!

Apache won’t start as a service while using XAMPP (xampplite)

wyand — Wed, 23 Nov 2011 11:16:36 +0000

Do you know we’ve moved on a new address. There will be no new articles on this blog anymore. If you still want to keep in touch with us, follow us @ Code Mamba!You can read the same article on our new domain by clicking here!
If you’re using xampplite and you Apache service does not start, you might want to check your error.log.
You can find it in PATH_TO_YOUR_XAMPP\xampplite\apache\logs\error.log
The common reason is, that a certain port, needed by Apache is not free.
For example it might be 443, 80, etc… In my case Port 443 was taken from my VMWare workstation.

box-shadow does not work in internet explorer

wyand — Mon, 14 Nov 2011 13:01:26 +0000

Do you know we’ve moved on a new address. There will be no new articles on this blog anymore. If you still want to keep in touch with us, follow us @ Code Mamba!You can read the same article on our new domain by clicking here!
If you’re using box-shadow as a CSS property in your Internet Explorer 9 and the box-shadow does not show you might want to check if:
You’re using the right syntaxys – you can check if the property appears in the developers window (F12) for the current element.
If this does not help you might want to know, that box-shadow is supported for Internet Explorer 9+, so if you are using

in your page with Internet Explorer 9 or if you are using Internet Explorer 8 (or lower) box-shadow will not work.
If you want a similar effect in Internet Explorer 8 read this article.

box-shadow in Internet Explorer 8

wyand — Mon, 14 Nov 2011 12:59:44 +0000

Do you know we’ve moved on a new address. There will be no new articles on this blog anymore. If you still want to keep in touch with us, follow us @ Code Mamba!You can read the same article on our new domain by clicking here!
Internet Explorer 8 does not support box-shadow property.
If you want a similar effect in Internet Explorer 8 you can use the combination of Internet Explorer-only filters:

filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=0);
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=90);
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=180);
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=270);

Here’s how to combine them:

filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=0),
	progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=90),
	progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=180),
	progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=270);

Here’s our test code:

and here are our stylesheets for Internet Explorer 8 and Internet Explorer 9:

	#test
	{
		width:100px;
		height:100px;
		border:1px solid black;
		box-shadow:0 0 1.0em hsla(0, 0%, 0%, 0.3);
		/* IE 9 */
	}

	#test
	{
		width:100px;
		height:100px;
		border:1px solid black;
		filter: progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=0),
		progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=90),
		progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=180),
		progid:DXImageTransform.Microsoft.Shadow(Color=#404040, Strength=3, Direction=270);
		/* IE 8 */
	}

and here’s how it looks in Internet Explorer 8 and in Internet Explorer 9:

You might want to try and play with the Strength property of the filters.

Using variables from the global JS scope with selenium IDE

wyand — Sat, 17 Sep 2011 10:15:29 +0000

Do you know we’ve moved on a new address. There will be no new articles on this blog anymore. If you still want to keep in touch with us, follow us @ Code Mamba!You can read the same article on our new domain by clicking here!
To use a variable from your page you need a reference to the current window. This is how to refer the current window:

this.browserbot.getUserWindow();

For example:

echo javascript{this.browserbot.getUserWindow().test}

will result:

[info] echo: TEST_VARIABLE_GOES_HERE

where your sourcecode is:

Creating a 4 digit input field using javascript

wyand — Fri, 16 Sep 2011 09:19:39 +0000

In the end of the document, or in a

$(document).ready(function(){});

block we’ll bind a function to the keydown event for each element:

$('.postcode').each(function(){
	$(this).bind('keydown',function(e){
		//... code goes here
	});
});

Now we’ll get the event code and we’will filter it:

var codelen = 4;
var code = (e.keyCode ? e.keyCode : e.which);
if(
	!((code >= 48 && code <= 57 && $(this).val().length < codelen)
	|| (code >= 96 && code <= 105 && $(this).val().length < codelen)
	|| code == 8 || code == 116 || code == 46
	|| (code >= 35 && code <= 40)
	)
)
{
	e.preventDefault();
}

With this filter we allow any button from 0 to 9 including those in the num pad if the characters in this input are less then codelen.
We also allow the buttons backspace, delete and F5 (8,116,46).
We also allow all the arrows + Home and End buttons.
Every other event is prevented. The full code is:

$('.postcode').each(function(){
	$(this).bind('keydown',function(e){
		var codelen = 4;
		var code = (e.keyCode ? e.keyCode : e.which);
		if(
			!((code >= 48 && code <= 57 && $(this).val().length < codelen)//0-9
			|| (code >= 96 && code <= 105 && $(this).val().length < codelen)//0-9
			|| code == 8 || code == 116 || code == 46//bs del f5
			|| (code >= 35 && code <= 40)//arrows, home, end
			)
		)
		{
			e.preventDefault();
		}
	});
});

Useful CSS reseter

wyand — Thu, 15 Sep 2011 07:28:33 +0000

Do you know we’ve moved on a new address. There will be no new articles on this blog anymore. If you still want to keep in touch with us, follow us @ Code Mamba!You can read the same article on our new domain by clicking here!
When you start a new project a very important thing to do is to start using a CSS reseter.
The goal the reseter is to reduce browser inconsistencies in things like default margins and font sizes of headings, line heights and more.
In most of my projects I’m using this CSS reseter and I’m quite pleased with it, so I want to share it:

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
acronym,address,big,cite,code,del,dfn,em,
img,ins,kbd,q,s,samp,small,strike,strong,
sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,
li,fieldset,form,label,legend,time,audio,
video,table,caption,tbody,tfoot,thead,tr,
th,td,article,aside,canvas,details,embed,
mark,figure,figcaption,footer,header,
hgroup,menu,nav,output,ruby,section,summary
{margin:0;padding:0;border:0;font-size:100%;
font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}table{border-spacing:0;}
blockquote,q{quotes:none;}ol,ul{list-style:none;}
blockquote:before,blockquote:after,q:before,
q:after{content:'';content:none;}

Opening and moving windows in Javascript

wyand — Wed, 14 Sep 2011 10:59:03 +0000

window.open("some-page.htm","window-name","width=450,height=450");

The first argument is the URL of the new window, the second one is the window name and the third one is a list of comma-separated items.
Now how to move the new window? window.open returns an object. We have to catch that object and then use it. Here’s how to move the window to the top left corner:

newWin = window.open("some-page.htm","window-name","width=450,height=450");
newWin.moveTo(0,0);

Here’s how to center the window:

var width = 500;
var height = 600;
newWin = window.open("some-page.htm","window-name","width="+width+",height="+height);
newWin.moveTo(screen.width/2-width/2,screen.height/2-height/2);

How to use a crossdomain JSON request using jQuery

wyand — Fri, 26 Aug 2011 09:56:41 +0000

Do you know we’ve moved on a new address. There will be no new articles on this blog anymore. If you still want to keep in touch with us, follow us @ Code Mamba!You can read the same article on our new domain by clicking here!
First you have to create your client script. We’ll include the jQuery librry and we’ll create a standard ajax request:

Now you will most likely get the following error:

	Origin http://www.yourdomain.com is not allowed by Access-Control-Allow-Origin.

So it’s time to set your server the right way:
If your are using something like this:

it will not work. You have to specify Access-Control-Allow-Origin access. You can enable it for one site, or you can give access to all websites. Here’s how to do it:

and the result is:

SQL_CALC_FOUND_ROWS and FOUND_ROWS() simulation in PostgreSQL

wyand — Thu, 25 Aug 2011 08:39:37 +0000

Do you know we’ve moved on a new address. There will be no new articles on this blog anymore. If you still want to keep in touch with us, follow us @ Code Mamba!You can read the same article on our new domain by clicking here!
In MySQL you can select a record set with a limit and an offset and then return the count(*) of all the records without running the same query like this:

SELECT SQL_CALC_FOUND_ROWS
  Id, Name
FROM my_table
WHERE
  Name LIKE '%prashant%'
LIMIT 0, 10;
SELECT FOUND_ROWS();

In PostgreSQL there is no such thing, so you have to be creative. What we’ll do is:
1. Create a temp table with all the required data.
2. Select the data from the temp table with the limit and the offset.
3. Select the count(*) from the temp table.
4. Select everything else you need from the temp table.
5. Drop the temp table.
Why and when is this a good idea.
When your query has many limitaons like a full-text-search clause:

...WHERE textsearchable_index_col @@@ q...

or when your data is a join from many tables – you don’t have to join the tables many times – for the data, for the count(*), and for everything else.
Here’s the example:

select * into tmp_tbl from tbl where [limitations];
select * from tmp_tbl offset 10 limit 10;
select count(*) from tmp_tbl;
drop table tmp_tbl;