fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] changelog2011-08-23 01:16 pm
  • Add Memory
  • Share This Entry

[dw-free] Polls - change your vote AJAX

[commit: http://hg.dwscoalition.org/dw-free/rev/4847054977aa]

http://bugs.dwscoalition.org/show_bug.cgi?id=3272

Change your vote (when you've answered), and viewing poll results (when you
haven't answered) now don't create a new page load.

Patch by [personal profile] yvi.

Files modified:
  • cgi-bin/LJ/Poll.pm
  • htdocs/js/jquery.poll.js
  • htdocs/js/livejournal.js
  • htdocs/tools/endpoints/pollvote.bml
--------------------------------------------------------------------------------
diff -r e6599bddb752 -r 4847054977aa cgi-bin/LJ/Poll.pm
--- a/cgi-bin/LJ/Poll.pm	Tue Aug 23 19:13:00 2011 +0800
+++ b/cgi-bin/LJ/Poll.pm	Tue Aug 23 21:16:39 2011 +0800
@@ -928,13 +928,14 @@
     $ret .= LJ::Lang::ml('poll.participants', { 'total' => $self->num_participants });
     if ( $mode eq 'enter' && $self->can_view( $remote ) ) {
         $ret .= "<br />\n";
-        $ret .= "[ <a href='$LJ::SITEROOT/poll/?id=$pollid&amp;mode=results'>" . LJ::Lang::ml( 'poll.seeresults' ) . "</a> ]  ";
+        $ret .= "[ <a href='$LJ::SITEROOT/poll/?id=$pollid&amp;mode=results' class='LJ_PollDisplayLink' 
+            id='LJ_PollDisplayLink_${pollid}' lj_pollid='$pollid' >" . LJ::Lang::ml( 'poll.seeresults' ) . "</a> ]  ";
         $ret .= "&nbsp&nbsp;[ <a href='$LJ::SITEROOT/poll/?id=$pollid&amp;mode=clear' 
             class='LJ_PollClearLink' id='LJ_PollClearLink_${pollid}' lj_pollid='$pollid'>  " . BML::ml('poll.clear') ."</a> ]";
     } elsif ( $mode eq 'results' ) {
         $ret .= "<br />\n";
         # change vote link
-        $ret .= "[ <a href='$LJ::SITEROOT/poll/?id=$pollid&amp;mode=enter'>" . LJ::Lang::ml( 'poll.changevote' ) . "</a> ]" if $self->can_vote( $remote ) && !$self->is_closed;
+        $ret .= "[ <a href='$LJ::SITEROOT/poll/?id=$pollid&amp;mode=enter' class='LJ_PollChangeLink' id='LJ_PollChangeLink_${pollid}' lj_pollid='$pollid' >" . LJ::Lang::ml( 'poll.changevote' ) . "</a> ]" if $self->can_vote( $remote ) && !$self->is_closed;
     } else {
         $ret .= "<br />\n";
     }
diff -r e6599bddb752 -r 4847054977aa htdocs/js/jquery.poll.js
--- a/htdocs/js/jquery.poll.js	Tue Aug 23 19:13:00 2011 +0800
+++ b/htdocs/js/jquery.poll.js	Tue Aug 23 21:16:39 2011 +0800
@@ -83,7 +83,31 @@
                     self._trigger( "complete" );
                 }
             });
-        });
+        }).end()
+        .filter("a.LJ_PollChangeLink").click(function(e){
+            e.stopPropagation();
+            e.preventDefault();
+
+            var $clicked = $(this);
+            $clicked.ajaxtip({namespace: "pollchange"})
+            .ajaxtip("load", {
+                    endpoint: "pollvote",
+                    context: self,
+                    data: { action: "change",
+                            pollid: $clicked.attr('lj_pollid')},
+                    success: function( data, status, jqxhr ) {
+                        if ( data.error ) {
+                            $clicked.ajaxtip( "error", data.error )
+                        } else {
+                            $clicked.ajaxtip( "cancel" );
+                            this.element.html(data.results_html)
+                                .trigger( "updatedcontent.poll" );
+                        }
+                        self._trigger( "complete" );
+                    }
+                    });
+        }).end()
+
     },
     _initForm: function() {
         var self = this;
@@ -94,28 +118,28 @@
             e.preventDefault();
             e.stopPropagation();
 
+            var dataarray = new Array();
+            dataarray = $poll.serializeArray();
+            dataarray.push({'name': 'action', 'value': "vote"});
             var $submit = $(this);
             $submit.ajaxtip({namespace: "pollsubmit"})
                 .ajaxtip("load", {
                     endpoint: "pollvote",
                     context: self,
-                    data: $poll.serialize(),
+                    data: dataarray,
                     success: function( data, status, jqxhr ) {
                         if ( data.error ) {
                             $submit.ajaxtip( "error", data.error )
                         } else {
                             $submit.ajaxtip( "cancel" );
-                            var resultsEle = $(data.results_html);
-                            self.element.empty().append(resultsEle);
-
-                            resultsEle.trigger( "updatedcontent.poll" );
+                            this.element.html(data.results_html)
+                                .trigger( "updatedcontent.poll" );
                         }
                         self._trigger( "complete" );
                     }
                 });
-        });
-
-        $poll.find(".LJ_PollClearLink").click(function(e){
+        }).end()
+        .find("a.LJ_PollClearLink").click(function(e){
             e.stopPropagation();
             e.preventDefault();
 
@@ -127,7 +151,32 @@
                 // don't touch hidden and submit
             });
             $poll.find("select").each(function() { this.selectedIndex = 0 });
-        });
+        }).end()
+        .find("a.LJ_PollDisplayLink").click(function(e){
+            e.stopPropagation();
+            e.preventDefault();
+
+            var $clicked = $(this);
+            $clicked.ajaxtip({namespace: "polldisplay"})
+            .ajaxtip("load", {
+                    endpoint: "pollvote",
+                    context: self,
+                    data: { action: "display",
+                            pollid: $clicked.attr('lj_pollid')},
+                    success: function( data, status, jqxhr ) {
+                        if ( data.error ) {
+                            $clicked.ajaxtip( "error", data.error )
+                        } else {
+                            $clicked.ajaxtip( "cancel" );
+                            this.element.html(data.results_html)
+                                .trigger( "updatedcontent.poll" );
+                        }
+                        self._trigger( "complete" );
+                    }
+            });
+    });
+
+
     }
 });
 
diff -r e6599bddb752 -r 4847054977aa htdocs/js/livejournal.js
--- a/htdocs/js/livejournal.js	Tue Aug 23 19:13:00 2011 +0800
+++ b/htdocs/js/livejournal.js	Tue Aug 23 21:16:39 2011 +0800
@@ -215,9 +215,23 @@
     Array.prototype.forEach.call(pollButtons, function (pollButton) {
         DOM.addEventListener(pollButton, "click", LiveJournal.pollButtonClicked.bindEventListener(pollButton));
     });
-    
+
+    var pollChange = DOM.getElementsByTagAndClassName(ele, 'a', "LJ_PollChangeLink") || [];
+
+    // attaches a click handler to all poll change answers buttons
+    Array.prototype.forEach.call(pollChange, function (pollChange) {
+        DOM.addEventListener(pollChange, "click", LiveJournal.pollChangeClicked.bindEventListener(pollChange));
+    });
+
+    var pollDisplay = DOM.getElementsByTagAndClassName(ele, 'a', "LJ_PollDisplayLink") || [];
+
+    // attaches a click handler to all poll display answers buttons
+    Array.prototype.forEach.call(pollDisplay, function (pollDisplay) {
+        DOM.addEventListener(pollDisplay, "click", LiveJournal.pollDisplayClicked.bindEventListener(pollDisplay));
+    });
+
     var pollForms = DOM.getElementsByTagAndClassName(ele, 'form', "LJ_PollForm") || []; 
-    
+
     // attach submit handlers to each poll form
     Array.prototype.forEach.call(pollForms, function (pollForm) {
         DOM.addEventListener(pollForm, "submit", LiveJournal.pollFormSubmitted.bindEventListener(pollForm));
@@ -246,9 +260,9 @@
     var opts = {
         "url"    : LiveJournal.getAjaxUrl("pollvote"),
         "method" : "POST",
-        "data"   : HTTPReq.formEncoded(formObject),
-        "onData" : LiveJournal.pollVoteSubmitted,
-        "onError": LiveJournal.pollVoteSubmitted
+        "data"   : "action=vote&" + HTTPReq.formEncoded(formObject),
+        "onData" : LiveJournal.pollUpdateContainer,
+        "onError": LiveJournal.pollUpdateContainer
     };
 
     HTTPReq.getJSON(opts);
@@ -256,23 +270,57 @@
     return false;
 };
 
-LiveJournal.pollVoteSubmitted = function (results) {
+LiveJournal.pollChangeClicked = function (e) {
+    Event.stop(e);
+
+    var opts = {
+        "url"    : LiveJournal.getAjaxUrl("pollvote"),
+        "method" : "POST",
+        "data"   : "action=change&pollid=" + this.getAttribute("lj_pollid"),
+        "onData" : LiveJournal.pollUpdateContainer,
+        "onError": LiveJournal.pollUpdateContainer
+    };
+
+    HTTPReq.getJSON(opts);
+
+    return false;
+};
+
+LiveJournal.pollDisplayClicked = function (e) {
+    Event.stop(e);
+
+    var opts = {
+        "url"    : LiveJournal.getAjaxUrl("pollvote"),
+        "method" : "POST",
+        "data"   : "action=display&pollid=" + this.getAttribute("lj_pollid"),
+        "onData" : LiveJournal.pollUpdateContainer,
+        "onError": LiveJournal.pollUpdateContainer
+    };
+
+    HTTPReq.getJSON(opts);
+
+    return false;
+};
+
+LiveJournal.pollUpdateContainer = function (results) {
     if (! results) return false;
 
     if (PollPages.hourglass) {
         PollPages.hourglass.hide();
         PollPages.hourglass = null;
     }
-    
+
     if (results.error) return LiveJournal.ajaxError(results.error);
-    
+
     resultsDiv = document.getElementById("poll-"+results.pollid+"-container");
 
     resultsDiv.innerHTML = results.results_html;
-    
+
     LiveJournal.initPolls();
 };
 
+
+
 LiveJournal.getFormObject = function (form) {
 
     var inputs = form.getElementsByTagName("input");
diff -r e6599bddb752 -r 4847054977aa htdocs/tools/endpoints/pollvote.bml
--- a/htdocs/tools/endpoints/pollvote.bml	Tue Aug 23 19:13:00 2011 +0800
+++ b/htdocs/tools/endpoints/pollvote.bml	Tue Aug 23 21:16:39 2011 +0800
@@ -58,27 +58,47 @@
     unless ($entry->visible_to($remote)) {
         return $err->("You don't have the permissions to view this poll");
     }
+   
+    my $action = $POST{action};
+
+    if ( $action eq "vote" ) {
+        unless (LJ::did_post()) {
+            return $err->("Post is required");
+        }
+
+        unless (LJ::check_form_auth()) {
+            return $err->("Form is invalid");
+        }
     
-    unless (LJ::did_post()) {
-        return $err->("Post is required");
+        my $error;
+        LJ::Poll->process_submission(\%POST, \$error);
+        if ($error) {
+            return $err->($error);
+        }
+
+        $ret->{results_html} = $poll->render(mode => "results");
+
+        $ret = {
+            %$ret,
+            pollid  => $pollid
+        };
+
+    } elsif ( $action eq "change" ) {
+        $ret->{results_html} = $poll->render(mode => "enter");
+
+        $ret = {
+            %$ret,
+            pollid  => $pollid
+        };
+
+    } elsif ( $action eq "display" ) {
+        $ret->{results_html} = $poll->render(mode => "results");
+
+        $ret = {
+            %$ret,
+            pollid  => $pollid
+        };
     }
-
-    unless (LJ::check_form_auth()) {
-        return $err->("Form is invalid");
-    }
-    
-    my $error;
-    LJ::Poll->process_submission(\%POST, \$error);
-    if ($error) {
-        return $err->($error);
-    }
-
-    $ret->{results_html} = $poll->render(mode => "results");
-
-    $ret = {
-        %$ret,
-        pollid  => $pollid
-    };
     
     sleep(1.5) if $LJ::IS_DEV_SERVER;
 
--------------------------------------------------------------------------------
Flat | Top-Level Comments Only
turlough: The Girl & Party Poison (Grace Jeanette & Gerard Way) high-fiveing, on the set of Na Na Na, Sept 2011 ((mcr) yeah!)

[personal profile] turlough 2011-08-23 03:16 pm (UTC)(link)
Awesome!!!
yvi: Kaylee half-smiling, looking very pretty (Default)

[personal profile] yvi 2011-08-23 03:44 pm (UTC)(link)
I can already see mself just sitting there and clicking :)
ninetydegrees: Art: cowboy lassoing on a horse (rodeo)

[personal profile] ninetydegrees 2011-08-23 07:15 pm (UTC)(link)
I've just used it! That's such a great change! Thank you!
Flat | Top-Level Comments Only