Posts tagged Javascript

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.

JQuery is your friend

0

JQuery is a pre-packaged, pre-tested javascript api which will greatly improve the lives of any devs having to deal with javascript in any way. It allows for easy access to dom elements, for example:

Before

var someId = document.getElementById('someId');

After

var someId = $('someId');

Another example in Jquery’s ease of use is hiding/displaying dom elements, for example:

Before

document.getElementById('someId').style.display = 'none';
document.getEelmentById('someId').style.display = 'block';

After

$('someId').hide();
$('someId').show();

As you can see, JQuery greatly reduces the amount of work needed to accomplish seemingly easy tasks. If that isn’t enough to sell you on it as being a great api, consider this; JQuery is also cross-browser tested! So you can rest assured that whatever javascript you implement on your projects will work in most currently supported browsers.

Visit JQuerys website for more info.

Go to Top