Plugin: Using jQuery with Poll Position

Overview
Get Poll Position
Compare Poll Position and Poll Position: Champion
Install and Configure
Template Tags
Use
Poll Position: Champion Results Template
Using Poll Position with jQuery
Changelog
Looking for support? Use the Helpdesk.

By default, Poll Position uses the YUI JavaScript library to help everything work smoothly. Movable Type (and some related tools) have been moving towards standardizing on the jQuery library over the past few months. With that in mind, it’s been on my radar that Poll Position should offer a jQuery option. Thanks to Reed for jumping ahead and creating this!

The following steps will work to use jQuery with both Poll Position and Poll Position: Champion.

Get jQuery

You’ll need a few pieces to get Poll Position working:

Download the current jQuery library.
Download the jQuery Form Plugin.

Upload these to your site, perhaps into a folder named jquery/.

Modify Your Template’s `<head>...</head>`

In the Poll Position installation instructions you added required templates.

In place of the line <mt:Include module="YUI Javascript"> that you added between the <head> and </head> tags, you’ll want to use:

<script type="text/javascript" src="http://yourdomain.com/jquery/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="http://yourdomain.com/jquery/jquery.form.js"></script>

Note the path to the to the jQuery files you uploaded and be sure to correct them for your site.

Update `pollposition.js`

Replace the default code in your pollposition.js template with the following:

function checkVote(id) {
    var type  = $('#type_' + id).val();
    var voted = mtGetCookie( type + '_id' );
    if (!voted) {
        return;
    }
    var voted_array = voted.split(',');
    for (var poll in voted_array) {
        if (voted_array[poll] == id) {
            var $vform = $('#' + type + '-form-' + id);
            $vform.hide();
            if (!$('#' + type + '-results-' + id).html()) {
                $vform.get(0).results_only.value = '1';
                submitVote(id);
            }
        }
    }
}

function viewResults(id) {
    var type  = $('#type_' + id).val();
    var $vform = $('#' + type + '-form-' + id);
    $vform.get(0).results_only.value = '1';
    submitVote(id);
    $vform.show();
}

function submitVote(id) {
    var type  = $('#type_' + id).val();
    var handleSuccess = function(responseText, status) {
        var $div = $('#' + type + '-results-' + id);
        if(responseText !== undefined){
            if ( responseText.match('unpublished') ) {
                $div.html('<p class="unpublished">' + responseText + '</p>');
            }
            else if ( responseText.match('currently closed') ) {
                $div.html('<p class="currently-closed">' + responseText + '</p>');
            }
            else if ( responseText.match('not a valid option') ) {
                $('#' + type + '-form-' + id ).show();
                $div.html('<p class="error">' + responseText + '</p>');
            }
            else { // Successful vote
                $div.html(responseText);
                var $vform = $('#' + type + '-form-' + id);
                if ($vform.get(0).results_only.value=='0') {
                    var now = new Date();
                    mtFixDate(now);
                    now.setTime(now.getTime()+999*24*60*60*1000);
                    createCookie(type +'_id',id,now);
                }
                $vform.get(0).results_only.value = '0';
            }
        }
    };

    var handleFailure = function(req,statusText,status) {
        $('#' + type + '-form-' + id).show();
        var $div = $('#' + type + '-results-' + id);

        if (responseText !== undefined) {
            div.html( "<p><strong>Error</strong><br />"
                    //+ "Transaction id: " + o.tId + "<br />"
                    + "HTTP status: " + status + "</br />"
                    + "Status code message: " + statusText + "</p>"
                    );
        }
    };

    var $vform = $('#' + type + '-form-' + id);
    // Check that visitor has selected an option before submitting
    for (var i = 0; i < $vform.get(0).poll_choice.length; i++) {
        if ($vform.get(0).poll_choice[i].checked) {
            var selected = 1;
        }
    }
    if ( selected || ($vform.get(0).results_only.value == '1') ) {
        $vform.ajaxSubmit({
            success: handleSuccess,
            error: handleFailure,
            url: "<mt:CGIRelativeURL>plugins/PollPosition/vote.cgi"
            });
        $('#'+type + '-results-' + id).html('<img src="<mt:StaticWebPath>images/indicator.gif" width="66" height="66" />');
        $vform.hide();
        return false;
    }
    else {
        alert('Please make a selection before submitting to this ' + type);
        return false;
    }
}

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else {
        var expires = "";
    }
    var cur = mtGetCookie(name);
    if (cur) {
        value = cur + ',' + value;
    }
    document.cookie = name+"="+value+','+expires+"; path=/";
}

Lastly, republish pollposition.js and any affected templates!

Eat Drink Sleep Movable Type

Menu

Fresh from the Oven

Chef’s Choice

Plugin: Using jQuery with Poll Position

Get jQuery

Modify Your Template’s `<head>...</head>`

Update `pollposition.js`

Eat Drink Sleep Movable Type

Menu

Fresh from the Oven

Chef’s Choice

Plugin: Using jQuery with Poll Position

Get jQuery

Modify Your Template’s <head>...</head>

Update pollposition.js

Modify Your Template’s `<head>...</head>`

Update `pollposition.js`