FettesPS » JavaScript

Ajax – Post Multiple Select Values

FettesPS — Tue, 04 Oct 2011 11:12:41 +0000

So this form is pretty basic, it has a select box (list box) filled with possible values. You can select all or some of the values and then submit it to the server via Ajax. The problem was when I grabbed the value from the select box I only got the last value selected, not each. Regardless of if I was using POST or GET I still had to build the parameter list since that’s how XMLHttpRequest works. So I looped through the list and tried using the same parameter name for each, then on the PHP end I had the same result — each parameter overwrote the previous one and I saw only the last result. It wasn’t until I stumbled upon this post that someone gave a decent suggestion, which was to put a [] at the end of each parameter name when building the query string and PHP would automatically interpret it as an array. Since his code was somewhat over complicated I thought I’d share my version of it:

test-utility.php



    Test Utility
    


    Test Utility



    ">
        
            Error: 
        
    

    
    
    
        
            Listbox(s):


            (Hold CTRL to
select multiple)

test-utility.js

function select_all() {
    var d = document.getElementById("listbox");
        for(var i=0;i

    // For modern browsers
    if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();

    // for IE 5/6
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //  Rebuild the array of selected option boxes
    lb = document.getElementById("listbox");
    for(var i=0; i < lb.length; i++) {
        if(lb[i].selected) {
            // Note the [] after the name
            url += "&lb[]=" + lb[i].value;
        }
    }

    xmlhttp.open("GET","test-utility-ajax.php" + url, false);
    xmlhttp.send();

    if (xmlhttp.status == 200) {
        document.getElementById("ajax_results").innerHTML = xmlhttp.responseText;
    } else {
        return false;
    }

    return false;
}

test-utility-ajax.phpbr>

PHP – Converting an Array to JSON

FettesPS — Fri, 04 Feb 2011 13:09:01 +0000

Every now and then I stumble upon a tidbit of information that just makes me want to kick myself. Today was one of those days. Just by chance I ended up at an entry on PHP.net while Googling another issue. Once I realized what this function was capable of I was torn between thinking “Wow, this is awesome!” and “Wow, I’m a dumbass!”

$array = array (
    'alpha'=>4,
    'beta'=>9,
    'gamma'=>3
);
echo json_encode($array)

You should then see something like the following:

{"alpha":4,"beta":9,"gamma":3}

If you were manually processing the array and building a JSON object like I was, assume the face palm position.

JavaScript’s Modulus “Bug”

FettesPS — Wed, 26 Jan 2011 13:22:25 +0000

I recently encountered an issue that caused me a bit of confusion. JavaScript was not calculating a modulus in the same manner that Windows Calculator or Visual Basic was. At first I had thought this to be a bug, but after doing a bit more research I discovered that it was actually giving the correct answer and it was the Microsoft products that were giving me the wrong answer. To help illustrate this issue, open up your Windows Calculator and enter 1.47 MOD 0.05 and then look at the result. Now in your browser’s address bar enter javascript:alert(1.47 % 0.05); and press return. Notice the difference? Windows gives you a nice whole number to work with, and when you crunch the numbers in your head it makes sense.

So what’s the solution? It’s rather simple, actually. Since the issue only pops it’s head up when you’re working with decimals, all you have to do is multiply it by the correct power of 10 and then do your calculations. Once you have a result, divide it again by the same power of 10 and you have the answer. So for example, in Canada lately there’s been a lot of talk about the Royal Mint wanting to stop making pennies and as a result all transactions will be rounded to the nearest 5 cents. So lets look at a function that could be used to round a value down to a 5 cent increment:

    // Enter a value in dollars and cents, such as 4.97 or 1.91
    var value = prompt("Please enter an amount","Amount");
    var balance_remainder = 0;
    var balance_sign = 1;

    if(isNaN(value)) {
        alert("Not a Number!");
        value = 0;

    } else {
        // NOTE: JS calculates a modulus on floating point numbers differently than some languages
        //       The solution is to multiply currencies by 100 before getting the modulus and then dividing the answer by 100                                                                              

        // Strip the negative off for now so it doesn't screw with the calculations
        if(value < 0) {
            balance_sign = -1;
            value = value * -1;
        } else {
            balance_sign = 1;
        }

        // Calculate the remainder
        balance_remainder = (value * 100) % 5;
        balance_remainder = balance_remainder / 100;

        // Strip off the remainder
        if(balance_remainder > 0) {
            value = value - balance_remainder;
            value = Math.round(value * 100) / 100;
        }

        // Re-sign the value
        value = value * balance_sign;
    }

    alert("Result: " + value);

And there you have it!

JavaScript – Hide or Show an Element

FettesPS — Tue, 16 Jun 2009 12:30:20 +0000

Just about every site I’ve designed has made use of this code block. It utilizes a combination of JavaScript, CSS and some HTML DOM knowledge to get the job done. Most often I use this to make dynamic menus however the uses are endless. For this example I will use it for something more simple.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim, quam sed pellentesque eleifend, nisi erat facilisis quam, a viverra lorem arcu ut dolor. Morbi in magna mi, vel malesuada diam. Proin pulvinar ultricies aliquam. Sed tellus neque, facilisis eget sagittis eu, cursus in turpis. Phasellus vestibulum turpis nibh. Nam porta congue tellus bibendum sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tellus tortor, aliquet vel mattis vel, sagittis id eros. Ut lacinia lobortis volutpat. Nunc rhoncus sem eu augue mollis dapibus.
Show

Fusce sit amet diam odio. Quisque mattis sagittis dui ut malesuada. Curabitur felis velit, varius id scelerisque a, facilisis eu felis. Cras placerat urna ut nulla vulputate quis dignissim arcu tempor. Aliquam laoreet varius sollicitudin. Pellentesque feugiat vehicula risus, ut tristique massa hendrerit ac. Nulla facilisi. Phasellus et nulla erat, sed viverra enim. Curabitur faucibus mi eget quam ultrices non hendrerit tortor consectetur. Etiam iaculis massa et mauris vulputate rhoncus. Proin dapibus mauris in dolor sagittis ut elementum purus mattis.
Hide

At this point your page will render both paragraph blocks. In order to hide the second by default we have to add some CSS styling. I could have done this inline for the example however since I consider that to be bad coding practice I will create a style block for that.

p#more_content {
display: none;
}

Now your second paragraph will be hidden by default and the user will have to hit the Show link in order to expand the content. In order to make that functional you will need to add the following JavaScript code.

function hideLayer(whichLayer) {
var menuGroup;
if (document.getElementById) {
// Standard method for modern browsers
menuGroup = document.getElementById(whichLayer).style;

} else if (document.all) {
// For Old IE versions
menuGroup = document.all[whichLayer].style;

} else if (document.layers) {
// For Netscape Navigator 4
menuGroup = document.layers[whichLayer].style;
}
menuGroup.display = "none";
}

function showLayer(whichLayer) {
var menuGroup;
if (document.getElementById) {
// Standard method for modern browsers
menuGroup = document.getElementById(whichLayer).style;
} else if (document.all) {
// For Old IE versions
menuGroup = document.all[whichLayer].style;
} else if (document.layers) {
// For Netscape Navigator 4
menuGroup = document.layers[whichLayer].style;
}
menuGroup.display = "block";
}

This code block could be simplified considerably by using only the getElementById() method, however that will remove it’s backwards compatibility with older browsers. Though the percentage of users visiting with Netscape Navigator 4 or Internet Explorer 4 are extremely low, it could happen, so I have always left those extra lines in just to make sure.

You can also build on this a bit and make it one function that alternates between showing and hiding the div by changing the last line of code to menuGroup.display = menuGroup.display? “”:”block”;.

See it in action

JavaScript – Auto Set Focus When Page is Done Loading

FettesPS — Sat, 13 Jun 2009 22:22:46 +0000

I use this block of code quite often. Almost every project I develop has a login page and I always toss this in to give it that subtle boost to the overall user experience. Once the page has loaded, the cursor location will automatically be set to the username field so the user doesn’t have to grab their mouse or tab over to it just to log in. I’ve seen far too many site that don’t use this and it always frustrates me.

I would also recommend this on any page that has a form element on it that must be filled out. However be careful not to use it on a page that has a form field that the user may not be interested in. A good example of bad placement for this block of code is AVN Ads which sets focus to the search box instead of the username field. Every time I go there I get half way through typing my username and password before it jumps up to the search box and I in my haste I end up typing my password into the search field for all the world to see.

JavaScript – Creating Default Arguments

FettesPS — Tue, 09 Jun 2009 01:57:26 +0000

I ran into an interesting quirk with JavaScript yesterday, one I’m surprised I hadn’t noticed before. JavaScript does not allow you to give arguments default values when defining functions. So after a bit of tinkering, I came up with a solution.

function lorum(x, y) {

	if(typeof(x) == "undefined") {
		x = 100;
	}
	if(typeof(y) == "undefined") {
		y = 500;
	}

	// ...
}

Of course you could use a ternary operator if you prefer, however I know I’m not alone when I say that I do not like them. In any case, here’s an example using them:

function ipsum(i, j) {

	i = typeof(i) == "undefined" ? 100 : i;
	j = typeof(j) == "undefined" ? 500 : j; 

	// ...
}

Despite its reduced code space, I prefer not to use them as they can be confusing at first glance. But to each his own.

Working With Dojo’s DateTextTime Field

FettesPS — Sun, 07 Jun 2009 16:21:47 +0000

I’ve been working with Dojo for a couple of weeks now, and let me just say I’ve fallen in love with it and all it has to offer. It allows me to quickly and efficiently integrate dynamic content into all of my web projects with a very small learning curve.

Despite the abundant amount of documentation out there I still find myself getting stuck on the odd little thing. For example, I was working with Dijit’s DateTextTime field and simply could not get it to take a date I passed in. If I did it directly through HTML by setting the value attribute it would work, however when setting it in JavaScript as part of my AJAX call it would fail every time. I dugg around the Dojo community eventually finding someone who had the same issue and had managed to solve it “after several hours of trial and error” but sadly he neglected to post his solution. Thus I wanted to make mine available for anyone who finds themself working on the same problem.

I was working with the Dojo Toolkit as a reference and sadly it only stated that you used the SetValue() method to assign a date, but it did not provide the required syntax. After much trial and error I eventually discovered it wasn’t expecting that I pass it in as a string at all, rather it had to be set as a JavaScript date object first. So here is the required steps to assign a date to a DateTextTime field:

// Now
var dateA = new Date(); 

// January 1, 2009
// Note that the months start from 0 but days start from 1
var dateB = new Date(2009, 0, 1); 

// Parsing a string returne from MYSQL, in the format of YYYY-MM-DD
var dateC = new Date(data["ExpiryDate"].substr(0,4), parseInt(data["ExpiryDate"].substr(5,2))-1, data["ExpiryDate"].substr(8,2)); 

// Pass Date Objects into Dijit
dijit.byId("registered").setValue(dateA);
dijit.byId("bdate").setValue(dateB);
dijit.byId("expiryDate").setValue(dateC);

// Reference
// http://www.w3schools.com/jS/js_obj_date.asp

Email Obfuscation

FettesPS — Wed, 25 Feb 2009 04:48:43 +0000

As we all know spam is a plague that has spread to every far corner of the Internet. Spam-bots collect our email addresses in many ways, but in my opinion the most likely way they’ll get your email address is from scraping webpages such as forums, where you email may be listed. So when you’re building your site and you want to put an “email me” link you should be very careful about doing so. Once the bots find it they’ll start sending you endless offers to buy Viagara an Cialis.

So what can you do to stop this? There are many solutions! But today I want to offer you a simple JavaScript file that will encrypt your all email addresses on your page automatically. It can be downloaded from Voynex, however they don’t really offer a good explanation on how to use it. So here is a step by step:

Download the Email Guard script from Voynex’s site
Extract the files and upload xmailguard.js to your site, I usually have a directory called “scripts” in the root of each site
In any page you want to have your emails encrypt link the script by adding this line to the top:
Initialize the script by adding another script block :
Now you have to type your email links a bit differently, instead of email@address.com you will have to code your links to email_at_address.com and when the page loads it will rewrite them for you. If you are using PHP this line will do most of the work for you: $email = str_replace(“@”, “_at_”, $email);
Now its possible that some bots will render the javascript first before doing their dirty work, but from my experience I have found they don’t process the javascript. You can also customize the encrypted syntax you want to use by tweaking the first couple of lines in xmailguard.js

Now your email addresses are safe!