Category Archives: web development

Default Error Handling in Zend Framework

Zend_Controller_Action_Exception

There’s a cool feature in Zend Framework when a controller or action doesn’t exists. That’s really useful, because you simply write an ErrorController.php in you default module and every action’s exception sends the user to this controller/action and the job is done for you. What is important here is to show the error message at least on the development stage. Actually the request stores it as a parameter. Here’s some source:

<?php
 
class ErrorController extends Zend_Controller_Action
{
    public function errorAction()
    {
        $errorHandler = $this->getRequest()->getParam('error_handler');
        /* @var $error Zend_Controller_Action_Exception */
        $error = $errorHandler->exception;
        echo $error->getMessage();
    }
}

document.forms[‘myform’].submit() is not a function?

.submit()

You want to submit the form by clicking on a link or some other element on the page and this is a simple task. You know that by simply adding something like document.forms[‘the-form-name’].submit() this will work.

<form method="post" name="myform">
    <input type="text" name="user" />
    <a href="#" onclick="document.forms['myform'].submit();return false">Submit</a>
</form>

However you’d like to submit the form not only by clicking on that particular element, but also by clicking on the Enter while the focus is on a input field, and this wont work! That’s because you don’t have a input type=”submit”.

OK, first thing is to add a hidden input type=”submit” – than by clicking both on the Enter keyboard button and on the link with the onclick=”document.blah.blah.blah” will submit the form.

<form method="post" name="myform">
    <input type="text" name="user" />
    <input type="submit" name="submit" value="submit" style="display:hidden" />
    <a href="#" onclick="document.forms['myform'].submit();return false">Submit</a>
</form>

But this is not true!

Than you’ll receive the following message:

document.forms['myform'].submit() is not a function

Why? This isn’t working, but ever line seems to be OK. The answer is – don’t name the input type=”submit” with the trivial – “submit”. Just give it another name:

<form method="post" name="myform">
    <input type="text" name="user" />
    <input type="submit" name="something" value="something" style="display:hidden" />
    <a href="#" onclick="document.forms['myform'].submit();return false">Submit</a>
</form>

Friday Algorithms: JavaScript Merge Sort

Merge Sort

This week I’m going to cover one very popular sorting algorithm – the merge sort. It’s very intuitive and simple as it’s described in Wikipedia:

  • If the list is of length 0 or 1, then it is already sorted. Otherwise:
  • Divide the unsorted list into two sublists of about half the size.
  • Sort each sublist recursively by re-applying merge sort.
  • Merge the two sublists back into one sorted list.

Here’s the Source

(JavaScript)

var a = [34, 203, 3, 746, 200, 984, 198, 764, 9];
 
function mergeSort(arr)
{
    if (arr.length < 2)
        return arr;
 
    var middle = parseInt(arr.length / 2);
    var left   = arr.slice(0, middle);
    var right  = arr.slice(middle, arr.length);
 
    return merge(mergeSort(left), mergeSort(right));
}
 
function merge(left, right)
{
    var result = [];
 
    while (left.length && right.length) {
        if (left[0] <= right[0]) {
            result.push(left.shift());
        } else {
            result.push(right.shift());
        }
    }
 
    while (left.length)
        result.push(left.shift());
 
    while (right.length)
        result.push(right.shift());
 
    return result;
}
 
console.log(mergeSort(a));

It’s interesting to see what happens in the Firebug’s console:

[34, 203, 3, 746] [200, 984, 198, 764, 9]
 
[34, 203] [3, 746]
 
[34] [203]
 
[3] [746]
 
[200, 984] [198, 764, 9]
 
[200] [984]
 
[198] [764, 9]
 
[764] [9]
 
[3, 9, 34, 198, 200, 203, 746, 764, 984]

Actually the tricky part in this algorithm is the merge function – it does all the work.

Replace the Broken Images with a Default Image with JavaScript

There is cool JavaScript trick that helps you catch broken images. You know that when the image doesn’t exist, the http path to the image returns 404 or the path is wrong, the browser doesn’t display nothing in the most cases. As MSIE is always different it displays an ugly icon saying that there is not an image to load

MSIE broken image icon

and that is really bad!

There’s a Quick Fix …

Simply add an onerror handler on the IMG tag

<img src="http://..../broken_url.jpg" onerror="this.src='path_to_default_image'" />

HTML5 geolocation – What If the User Doesn’t Share His Position?

HTML5 Geolocation

So far we were used to expect something like this from our mobile phones with built-in GPS support. Every image or video clip then was automatically “tagged” with latitude & longitude geo data. With HTML5 coming features we discover new cool things we can do with our browsers. Such cool thing is the geolocation.

Geo Location

Support

As you may guess not every browser is supporting these HTML5 features, but out in the web there is quite good collection of tables comparing different browsers and their support level.

Firefox

This – as expected is a browser that supports this geo tagging. First of all you’ve to allow your browser to use your geo coordinates, as this can be private information.

Browser GEO Location

Once you do it you can access the geo coordinates, which by the way are quite accurate, with JavaScript.

What if you don’t share your position?

What happens if you don’t want to share your position? Actually I ran in this situation and as my application waited the coordinates – it was completely blocked.

The examples doesn’t show you something special. They simply describe how to get the coordinates, but doesn’t tell you what if the user doesn’t click on the “share” button.

if (!!navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getPos);
}
...
 
function getPos(position) 
{
    position.coords.latitude;
    position.coords.longitude;
}

Of course getPos() can be simply an anonymous function:

if (!!navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            position.coords.latitude;
            position.coords.longitude;
        });
}

Only the Firefox documentation tells you how to handle errors, simply add one more parameter – callback, for getCurrentPosition() method:

if (!!navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getPos, onError);
}
...
 
function getPos(position) 
{
    position.coords.latitude;
    position.coords.longitude;
}
 
function onError()
{
   // handle error
}

Now you know where you don’t want to be.

Map Marker