Using jQuery Ajax in SharePoint Portal Customization

In one day I received task for customize standard SharePoint Survey Library for showing in the main page with graphics using fusioncharts and ajax requests. This graphics showed in the main page of web application. And now I wanna to share my experience in this development.

The first stuff what do you wanna to make, you have to decide what certain javascript library(or nothing)you will try to use and how survey in SharePoint works.

Standard SharePoint Survey Library it works very simple. When you are creating one question, you are automatically creating new field with name of title question, for example: Question: "How are you?", you will see in the Library Settings new field with name "How_are_you", it's just sample, try to create it and you will see the same stuffs.

If you wanna to answer to one of the questions, you can create in the list one item and set field with answer. That's all.

    // This is example of handler for submiting new answer.
    public class SubmitAnswerHandler : IHttpHandler
    {
       #region IHttpHandler Members

        public void ProcessRequest(HttpContext context)
        {
            String title = context.Request.Params["name"];
            String listName = context.Request.Params["listname"];

            SPWeb web = SPContext.GetContext(context).Web;
            SPList list = web.Lists[listName];
            SPField field = SurveyUtility.GetLatestQuestionField(list);
            SPListItem item = list.Items.Add();
            item[field.Id] = title;
            item.Update();
        }

        public bool IsReusable
        {
            get { return true; }
        }

        #endregion
    }
}

Then I choose jQuery as a primary javascript framework for implemeting me new showing survey.

In the bottom you see example of code that's you have to add to the survey control. This control can be part of custom web part what you will decide to develop.

  $(document).ready(function() {
    $('#<%= _surveyContainer.ClientID %>').survey({
      submit_link: '/_layouts/SubmitAnswerHandler.ashx',
      graphic_link: '<%= ChartPageLink %>',
      listname: '<%= ListTitle %>'
    });
  });


  ; (function($) {
    $.fn.survey = function(options) {
      var $graphic_link = options['graphic_link'];
      var $listname = options['listname'];
      var $submit_link = options['submit_link'];

      return this.each(function() {
        var $container = $(this);
        var $vote_container = $($container.find(".vote_panel"));
        var $results_container = $($container.find(".results_panel"));
        var $vote_button = $($container.find(".vote_button"));
        var $results_button = $($container.find(".results_button"));
        var $loading_container = $($container.find(".loading_container"));

        $vote_button.click(function(e) {
          if ($vote_container.is(':visible')) {
            var selected = 0;
            var $checked = $container.find("input[@class='radio_button']:checked");
            if ($checked.length != 0) {
              var title = $checked.parent().find('input[type="hidden"]').val();
              $.ajax({
                type: 'POST',
                data: 'name=' + title + '&listname=' + $listname,
                url: $submit_link,
                success: function(data) {
                  show_results();
                  hide_buttons();
                }
              });
            }
          } else {
            $results_container.fadeOut("fast", function() {
              $vote_container.fadeIn("fast");
            });
          }
          e.preventDefault();
          return false;
        });

        $results_button.click(function(e) {
          show_results();
          e.preventDefault();
          return false;
        });

        function hide_buttons() {
          $vote_button.hide();
          $results_button.hide();
        }

        function show_results() {
          $.ajax({
            type: 'GET',
            url: $graphic_link,
            success: function(data) {
              $loading_container.hide();
              $results_container.html(data);
            }
          });
          $vote_container.fadeOut("fast", function() {
            $results_container.fadeIn("fast");
          });
        };
      });
    };
  })(jQuery);

This is the part of survey control. It contains survey containers such as question, answers in the first container and in the second results containrs(include graphics and sometimes buttons).

 
      

        

          <%= Survey.LatestQuestion %>
        
        
        
        
      
      

        

            
        
      
      

        

          
        
        

          
        
      
    

continued...

Creeping line - my first jQuery plugin.

In my last project I had to write very simple web part control for SharePoint. It was creeping line. You have some div elements that have to go to top with animation smoothly and with some mouse events.

For your review, please, check it code:

// jquery.creeping.js

; (function($) {

    var ver = "0.01";
    var author = "oivoodoo";

    function debug(s) {
        if ($.fn.cycle.debug)
            log(s);
    }

    function log() {
        if (window.console && window.console.log)
            window.console.log('[creeping] ' + Array.prototype.join.call(arguments, ' '));
    };

    $.fn.creeping = function(options, arg2) {
        var o = { s: this.selector, c: this.context };

        if (this.length === 0 && options != 'stop') {
            if (!$.isReady && o.s) {
                log('DOM not ready, queuing creeping line');
                $(function() {
                    $(o.s, o.c).creeping(options, arg2);
                });
                return this;
            }
            log('terminating; zero elements found by selector' + ($.isReady ? '' : ' (DOM not ready)'));
            return this;
        }

        return this.each(function() {
            var $cont = $(this);
            var $height = $cont.height();
            var $iteration = 0;
            $cont.parent().css('display', 'block').css('height', options.height).css('overflow', 'hidden').css('position', 'relative');
            $cont.css('position', 'relative');

            var maxSize = $cont.children().length * ($height - options.height);

            $cont.mouseover(function() {
                $cont.clearQueue().stop().delay(1500);
            });
            $cont.mouseout(function() {
                start_animation();
            });
            function start_animation() {
                $cont.animate({ top: '-' + maxSize +'px' }, 60000, 'linear', function() {
                    $cont.animate({ top: (options.height - 100) + 'px' }, 4000, 'linear', function() {
                        start_animation();
                    });
                }).delay(options.delay);
            };

            start_animation();
        });
    };
})(jQuery);

Convert HTML to HAML snippet.

Not for along time ago I've started to use haml syntax for quickly writing html code for rails applications. But in one day I received for applying any changes existence rails 2.3.5 application written using the standard html.erb templates for views.
I start to search how to change current html.erb to haml code and I found!!!

$> find . -name '*erb' | \
xargs ruby -e 'ARGV.each { |i| puts "html2haml -r #{i} #{i.sub(/erb$/,"haml")}"}' | \
bash

This is great script I've found in the next following link -> great snippet