Thursday, November 11, 2010

PushPin to show or hide DIV and maintain state across pages and Users using JQuery

JQuery has very cool features, providing the wide range of plugins to play around with your webpage. Here in this post I m going to discuss regarding a requirement I had to make use of JQuery to maintain the state of a DIV across pages, as well as across Users logged into the application.

Requirement:

This requirement is to provide interface for searching certain content in the SharePoint List based upon the keywords. This search window/pane should have the capability of toggle, as well as the capability of fixing/pin down (stopping toggle i.e showing the DIV) which should be maintained across the pages in the application untill the user either closes the pane or unfix. Also, this provision should be available as per the User choice, logged in to the application.

Example:
For better understanding we shall consider two user's named User1 & User2. When User1 loggs in to the application and prefers to pin down the DIV after showing DIV by toggle, that DIV should be in open state, in all the pages being traversed, untill preferred to pin up. But this preference should not reflect to User2, as this user might not prefer to search or looking into the DIV.

Challenges:
  1. Maintaining the Open/Close state across all pages based upon the preference to show/hide respectively.
  2. Maintain the Open/Close state based upon the logged in User preference to show/hide respectively.

Solution:
  1. Add Script References for
    JQuery Plugin:
    
    
    Download: http://jquery.com/

    Sessions Plugin:
    Download: http://plugins.jquery.com/node/8213/release

    JSON Plugin:
    
    
    Download: http://www.json.org/json2.js
  2. Create a DIV tag holding all your content as below:
    Note:Styles & images are from JQuery UI Smoothness theme.
  3. Add the below script in the head tag
    $(document).ready(function() {
    
     $.namesession.set("LoggedInUser",$().SPServices.SPGetCurrentUser({fieldName: "UserName", debug: false}));
    
     var SearchWindowStatus= ($.namesession.get('SearchWindowStatus_'+$.namesession.get('LoggedInUser',''), '')!= '')?$.namesession.get('SearchWindowStatus_'+$.namesession.get('LoggedInUser',''), '') :$.namesession.set('SearchWindowStatus_'+$.namesession.get('LoggedInUser',''),false);
    
     if(SearchWindowStatus){
      $('#SearchFund-dialog').show();
      $("a[id$=anchorPinPoint]").children().removeClass('ui-icon-pin-w').addClass('ui-icon-pin-s').attr('title','Keep Search Closed');  
    
     }else{
      $('#SearchFund-dialog').hide();
     }
    
    
    
     $(this).click(function() {
    
       $('#SearchFund-dialog').toggle(); 
     }):
    
    
     $("a[id$=anchorPinPoint]").bind({
    
           mouseover:function() {
          $(this).addClass('ui-state-hover');
         },
         mouseout:function() {
          $(this).removeClass('ui-state-hover');
         },
        
        focus:function() {
         $(this).addClass('ui-state-focus');
         },
        blur:function() {
         $(this).removeClass('ui-state-focus');
         },
        click:function() { 
        
          TogglePinPoint(this)
    
         
         return false;
    
         }
      });
        
     function TogglePinPoint(ctrl)
     {
      if($(ctrl).children().hasClass('ui-icon-pin-w'))
       {
        $(ctrl).children().removeClass('ui-icon-pin-w').addClass('ui-icon-pin-s').attr('title','Keep Search Closed');  
        $.namesession.set('SearchWindowStatus_'+$.namesession.get('LoggedInUser',''),true);
       }else if($(ctrl).children().hasClass('ui-icon-pin-s'))
       {
        $(ctrl).children().removeClass('ui-icon-pin-s').addClass('ui-icon-pin-w').attr('title','Keep Search Open');  
        $.namesession.set('SearchWindowStatus_'+$.namesession.get('LoggedInUser',''),false);
    
      } 
     }
    });
    

Note: Ensure your web.config file is configured for AJAX & JSON
Enable SessionState is set to true in the config file

No comments:

Post a Comment