Javascript – jQuery – Stopping Event Propagation – stopImmediatePropagation

0

Recently ran into another issue where I had two separate and de-coupled event handlers tied to the same dom element, specifically a form submit. However, the first event handler returned false if certain checkboxes were not checked (business rules), but the false was ignored by the second event handler, and still executed. After some searching I came across the jQuery stopImmediatePropagation function, which gave teeth back to the return false, by not executing any subsequent event handlers, and solved my issue.

Example:

$('#formId').submit(function(e) {

    var j=0;
    
    for(j; j<this.length; j++) {
        if (this[j].type === 'checkbox' && this[j].checked) {
            somethingSelected = true;
        }
    }

    if (!somethingSelected) {

        alert('Must select something to continue');
                
        e.stopImmediatePropagation();

        return false;
    }
            
    return true;
});

$('#formId').submit(function(e) {

    // If the previous event handler returned false, this event handler will not be executed
});

Javascript – jQuery – Property Submit of Object htmlformelement is not a Function

0

Recently ran into an issue while trying to add some jQuery logic to a form element, where the following error was being generated in the Javascript console every time I submitted the form: Uncaught TypeError: Property ‘submit’ of object # is not a function.

After some research, it was noted that there must be some other DOM element with the name or id of ‘submit’. So I viewed source and sure enough, found that the previous dev added the ‘name=”submit”‘ attribute to the “input” tag. After I changed the attribute to ‘name=”formButton”‘, everything worked as expected.

Javascript – JQuery – Google Analytics – Submit Form Using GET Instead of POST

0

Was working on adding Google Analytics cross domain tracking for a form which uses the GET (instead of POST) method. The problem I was running into was the Google Analytics Tracking Cookie (GATC) data was not being added to the url, because the form’s data was overriding Google’s data. And I couldn’t switch the GET to a POST due to some low level and multiple redirect issues which occurred within the actions script. So I did some Googling around and came across some code snippets which I ended up implementing for my final solution, and wanted to share with you, in case you run into the same issue.

$(document).ready(function() {
    $('#formId').submit(function(e) {

        try {

            e.preventDefault();

            var form = this;

            if (typeof _gat !== 'undefined') {

                _gaq.push(['_linkByPost', this]);

                var pageTracker = _gat._getTrackerByName();

                var url = pageTracker._getLinkerUrl(form.action);

                var match = url.match(/[^=&?]+\s*=\s*[^&#]*/g);

                for ( var i = match.length; i--; ) {

                    var spl = match[i].split("=");

                    var name = spl[0].replace("[]", "");

                    var value = spl[1];

                    $('<input>').attr({
                        type: 'hidden',
                        name: name,
                        value: value
                    }).appendTo(form);
                }
            }

            setTimeout(function() { form.submit(); }, 400);
        } catch (e) { form.submit(); }
    });
});

Notice, that with the above snippet we can localize the GATC values that Google was going to append to the URL via POST, then convert them into hidden fields, linked to the form being submitted. So when the form is submitted the hidden values, along with the form’s organic values will all now be part of the URL and available to the form action.

symfony_logo

Symfony – Share Template Across Multiple Apps

0

I am currently working on a new project where I wanted multiple apps (frontend (fe) and backend (be)) to have the same exact appearance, and without having to duplicate the code in both template/layout.php files. So what I did is chose the fe layout.php file as the master template, then made the following changes:

// config/ProjectConfiguration.class.php
public function setup()
{
    ....

    sfConfig::set('masterTemplateUri', sprintf('%s/apps/fe/templates/layout.php', sfConfig::get('sf_root_dir'));

    ....
}

// apps/be/templates/layout.php
<?php include sfConfig::get('masterTemplateUri') ?>

Now I can share the same template across both fe and be apps and only have to make code changes in one location.

Linux Logo

Linux – Using Curl to Test Response Headers

0

After moving melikedev.com to a vps, I was able to improve performance by configuring nginx to serve static assets while apache serves the content. In order to test if the NGinx config was correctly configured I used the ‘curl’ command to test response headers of known static assets. After testing and implementing the changes the site has never performed better.

When testing response headers I passed a few flags to the curl command; the ‘-I’ flag tells curl to only output the response headers, and the ‘-L’ flag tells curl which link you want the response headers for.

mpurcell@service1 -> curl -I -L http://melikedev.com/wp-content/plugins/sociable/js/sociable.js?ver=3.4.2

HTTP/1.1 200 OK
Server: nginx/1.0.15
Date: Thu, 24 Jan 2013 21:20:44 GMT
Content-Type: text/css
Content-Length: 63287
Last-Modified: Sat, 29 Dec 2012 08:50:42 GMT
Connection: keep-alive
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Pragma: public
Cache-Control: public
Accept-Ranges: bytes

Notice in the response headers the response code is 200, which is good. But notice the expires date, this far out date allows the browser to cache the static asset for a long time, which means when a return user refreshes the page, the static assets should be loaded from browser cache.

There was one more performance step I took to speed up the render time of the melikedev.com pages, and that was to compress static assets such as xml, html, css etc. In order to test whether the compression was I working I had to add an extra flag to the curl command line, the ‘-H’ flag. This flag allows you to pass custom headers to the request header, which can dictate the data contained within response headers.

mpurcell@service1 -> curl -I -H "Accept-Encoding: gzip, deflate" -L http://melikedev.com/wp-content/plugins/sociable/css/sociable.css?ver=3.4.2

HTTP/1.1 200 OK
Server: nginx/1.0.15
Date: Thu, 24 Jan 2013 21:24:30 GMT
Content-Type: text/css
Last-Modified: Sat, 29 Dec 2012 08:50:41 GMT
Connection: keep-alive
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Pragma: public
Cache-Control: public
Content-Encoding: gzip

Notice in this set of response headers the return code was 200 and the expires date was still the far out date, but notice the ‘Content-Encoding’ field, it responded with gzip. This means that because we told the server we are accepting gzip and deflate as encodings, the server compressed the static asset.

Taking steps to increase performance makes end users happy and increases hardware life cycles.

Puppet – Wrong Header Line Format – Error

0

If you are writing manifests which include using templates and you receive a wrong header line format error message, it means there is a syntax error in one of your template files. The message is pretty much worthless due to it’s cryptic nature, and there appears to be an open defect to improve the messaging, but not sure that it will be fixed as the current status is “accepted”.

So check your templates, the issue that generated this warning for me was:

# Notice the <% = 
# Should be <%=
alias /<%= tpl_src_code_path %>/<% = static_asset_dir %>/;
phpLogo

PHP – ZipArchive – 5.3.x – Weird Issue when Unlinking a File Just Added to Archive

0

At work, I was tasked with porting some cronjobs from an old server (php 5.2.x) to a new server (php 5.3.x) and ran into a weird issue. The code to be ported was explicitly unlinking a file which was just added to the ZipArchive, in efforts to keep the filesystem clean, and ran fine on php 5.2.x, but when I ported the same code over to php 5.3.x I couldn’t get the zip file to write in it’s entirety.

Below is the code snippet:

$zip = new ZipArchive;

$zip->open('/path/to/file.zip', ZipArchive::OVERWRITE);

foreach ($files as $file) {

    $zip->addFile((string $file));

    // This is the offending line
    unlink((string) $file);
}

After I commented out the unlink, everything worked as expected. Thought I would bring it up in case anyone else faces the same situation.

General Category

General – melikedev.com Move to VPS is Complete

0

Yay, finally finished moving the site from the shared hosting to it’s own VPS. There were a few snags but things seem to be calming down. If you notice any anomalies just reply to this post or email me @ digitalprecision@gmail.com. Aside from some MySQL performance tuning, the system seems to be handling the load pretty well. Thanks for the patience and I will start posting articles regularly, again.

General Category

General – Still moving melikedev.com to VPS

0

Been busy prepping the move for melikedev.com to it’s own vps. I figured it was time to break down and puppetize a lot of redundant work, and getting httpd and nginx puppetized is proving to take longer than I thought. Once the move is complete I will make another post, and start posting some of the dev articles I have in the backlog. Thanks for your patience.

General Category

General – Moving melikedev.com to VPS

0

Merry Christmas. Over the Christmas break I will be moving melikedev.com to a VPS, as it seems we have outgrown our shared hosting, host. Page load times have become noticeably slower and load on the shared host is constantly over 5. After the move melikedev.com should be much more performant. During the move there may be some issues with DNS etc, but should be kept to a minimum. I’ll post again when the move is complete.

Go to Top