Tuesday, June 29, 2010

Jquery: List Items QuickView

 hoverImg = '/_layouts/images/OPENDB.GIF';
      hoverImgDescription = 'Hover mouse over this image to preview the metadata';
                              // The description text added to the top of the page.
                              // If left blank, no description is added to the top of the page.
      arrOfFieldsToShow = ['Title','Description']; // Leave blank to show all fields. To have only the content and not the label, use this format ['Title|0']
      prependHoverImageTo = ''; // The standard placement is "Title-field" for lists and "Name-field" for document library.
                                  // If used with multi line text with append, insert FieldInternalName of "append-field" here.



function getLoadedFields(){
  var res = {};
  $("#jLoadMe td.ms-formbody").each(function(){
      if($(this).html().indexOf('FieldInternalName="')<0) return;
      var start = $(this).html().indexOf('FieldInternalName="')+19;
      var stopp = $(this).html().indexOf('FieldType="')-7;
      var nm = $(this).html().substring(start,stopp);
      res[nm] = {'label':nm,'html':$(this).html()};
  });
  return res;
}

function jLoadMe(t,pX,pY,listBaseType) {//load content
if(listBaseType==0){
    var whatToLoad = " #part1";
}else if(listBaseType==1){
    var whatToLoad = " #onetIDListForm";
}
    $("#jLoadMe").load(t + whatToLoad, function() {
        if(arrOfFieldsToShow.length==0){
            $("#jLoadMe").css({'width':'590'});
            $("#jLoadMe h3").css({'font-size':'8pt'});
            $("#jLoadMe .ms-formtoolbar:first").hide();
            $("#jLoadMe table.ms-toolbar").hide();
            $("#jLoadMe .ms-ButtonHeightWidth").hide();
            var contentWidth = '590';
            var contentHeight = $("#jLoadMe").height();
        }else{
            $("#jLoadMe h3").css({'font-size':'8pt'});
            var contentWidth = '400';
            var selectedRow = '';
            $.each(arrOfFieldsToShow,function(idx,item){
                var split = item.split('|');
                var fieldTitle = split[0];
                var showTitle = split[1];
                jLoadMeFields = getLoadedFields();
               
               
                if(showTitle!=0){
                    selectedRow += "<b>" + jLoadMeFields[fieldTitle].label + "</b>" + " - ";
                }
                selectedRow += jLoadMeFields[fieldTitle].html + "</br>";
            });
            selectedRow = "<div style='width:" + contentWidth + "'>" + selectedRow + "</div>";




            //    if(showTitle!=0){
                //    selectedRow += "<div style='font-weight:bold;border-bottom:1px silver solid;'>" + jLoadMeFields[fieldTitle].label + "</div>";
            //    }
            //    selectedRow += "<div style='padding:0 0 5 3;margin-left:5;border-left:1px silver solid'>" + jLoadMeFields[fieldTitle].html + "</div>";
        //    });
        //    selectedRow = "<div style='width:" + contentWidth + "'>" + selectedRow + "</div>";
            $("#jLoadMe").html(selectedRow);
            var contentHeight = $("#jLoadMe").height();
        }
        // Get height and width of current window
        var winHeight = $(window).height();
        var winWidth = $(window).width();
        var winScroll = $(window).scrollTop();
        // Calculate the best position for the popup Y-axis
        if((winHeight - pY) < contentHeight){
            if((pY - winScroll) < contentHeight){
                pY = winScroll + 10
            }else{
                pY = (pY - contentHeight) - 30
            }
        }
        // Calculate the best position for the popup X-axis
        if((winWidth - pX) < contentWidth){
            pX = (pX - contentWidth) - 30;
        }
        // Show popup
        $("#jLoadMe")
            .css({'position':'absolute',
                'left':pX,
                'top':pY,
                'background-color':'f8f8ff',
                'border':'2px silver ridge',
                'padding':3})
            .show().mouseenter(function(){
                $(this).hide();
            });
    });
}

function initjLoadMe() { // Loop trough all elements and add hover function
isAppendField = false;
    $("div[id^='WebPartWPQ']").each(function(){
        var thisListCTX = $(this).find("table[ctxname]:first").attr('ctxname');
        if(thisListCTX!=undefined){
            thisListCTX = eval(thisListCTX);
            var listBaseType = thisListCTX.listBaseType;
            if(listBaseType==0){ // List
                if(prependHoverImageTo!=''){// Apend style field
                    whatToFind = "a[href$='SPBookmark_" + prependHoverImageTo + "']";
                    isAppendField = true;
                }else{
                    var whatToFind = "a[href*='DispForm.aspx'][target='_self']";
                }
            }else if(listBaseType==1){ // Document library
                var whatToFind = "td.ms-vb-title";
            }
        }else if($(this).find("a[href*='DispForm.aspx']").length>0){ // Catch calendar views
            var listBaseType = 0;
            var whatToFind = "a[href*='DispForm.aspx'][target='_self']";
        }

        $(this).find(whatToFind).each(function(){
            if($(this).parent().find(".mouseOverImg").length==0){
                if(listBaseType==0){
                    if(isAppendField){
                        var url = $(this).attr("href");
                        url = url.substring(0,url.indexOf('#'));
                    }else{
                        var url = $(this).attr("href");
                        if(url.indexOf('#')>-1) return;
                    }
                    //$(this).before("<a href='" + url + "'><img class='mouseOverImg' src='" + hoverImg + "' height='8' width='8' border='0'></a>&nbsp;");
                }else if(listBaseType==1){
                    // Get id of item from table id
                    var table = $(this).find('table:first');
                    var tableId = table.attr('id');
                    var url = eval(table.attr('ctxname')).displayFormUrl+"?ID=" + tableId;
                    //$(this).find('a').before("<a href='" + url + "'><img class='mouseOverImg' src='/_layouts/images/OPENDB.GIF' height='8' width='8' border='0'></a>&nbsp;&nbsp;");
                }
                // Hover function
                $(this).parent().hover(function(e){
                    posX = e.pageX + 10;
                    posY = e.pageY + 15;
                    jLoadMe(url,posX,posY,listBaseType)
                },
                function(){
                    $("#jLoadMe").html('').hide();
                });
            }
        });
    });
}

$(document).ready(function() {
    // Add description above ms-bodyareaframe
    //if(hoverImgDescription!=''){
    //    $("#onetidPageTitle").append("<div style='font-size:xx-small;float:right;margin:-12 0 0 0'><img src='" + hoverImg + "' height='8' width='8'>&nbsp;" + hoverImgDescription + "&nbsp;</div>");
    //}
    $(".ms-bodyareaframe").append("<div id='jLoadMe' style='display:none;'></div>");
    window.onerror = handleError; // needed for IE
    initjLoadMe();
});

function handleError() { // fn needed for IE
    return true;
}

// Attaches a call to the function to the "expand grouped elements function" for it to function in grouped listview's
function ExpGroupRenderData(htmlToRender, groupName, isLoaded){
    var tbody=document.getElementById("tbod"+groupName+"_");
    var wrapDiv=document.createElement("DIV");
    wrapDiv.innerHTML="<TABLE><TBODY id=\"tbod"+groupName+"_\" isLoaded=\""+isLoaded+"\">"+htmlToRender+"</TBODY></TABLE>";
    tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
initjLoadMe();
}

Friday, June 25, 2010

Redirecting a site in Sharepoint to another site

Redirect a SharePoint site by using the Content Editor Web Part

In the Content Editor Webpart and in the Source Editor in any sharepoint page from where the redirect should happend, add the following script:
(1)automatic redirect:
<script language="JavaScript">
alert("This site has been moved to another location, please update existing bookmarks. You will be redirected momentarily.");
window.location.href="http://serverTobeRedirectTo"
</script>
(2)with specific timeframe set:
<script language="JavaScript">

function getgoing()
  {
    top.location="http://serverTobeRedirectTo";
   }

   if (top.frames.length==0)
    {
     alert("This site has been moved to another location, please update existing bookmarks. You will be redirected in 10 Seconds.!");
     setTimeout('getgoing()',10000);
     }
</script>


Links Referred:
http://www.endusersharepoint.com/2010/01/20/redirect-a-sharepoint-site-by-using-the-content-editor-web-part/
http://www.dnzone.com/go?565









Wednesday, June 9, 2010

Jquery - Reading Data from XML or JSON data types

(1) Upload files in document library upload json.json and Topics.xml in the root level site.


(2) JSON.JSON:

{
    topics:{
          topic:[
               'Select Topic',
               '1 - Testing Json!',
               '2 - Analysis Statement',
                 '3 - Another element',
              ]
         }
}


(3) TOPICS.XML:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<Topics>
        <Topic>Select Topic</Topic>
        <Topic>1 - Testing Json!</Topic>
        <Topic>2 - Analysis Statement</Topic>
         <Topic>3 - Another element</Topic>
</Topics>



(4) Jquery would be:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function()

{

     //Binding Json Data using Jquery
       $.getJSON('http://YourServer/DocumentLibrary/json.json', function(data)
      {

         var numItems = data.topics.topic.length // To Count the number of elements in particular node
        //Iterate through all the elements in that particular node
          for(i=1;i<numItems;i++)
         {
            $("<option value='SELECT'>" + data.topics.topic[i] + "</option>").appendTo("#ddlTopic");
           //Binding it to another dropdown with id ddlTopic
          }
        });



//Binding XML data using Jquery

      $.ajax(
      {

         type:"GET",
         url:"http://YourServer/DocumentLibrary/Topics.xml",
         dataType:"xml",
         success:function(xml){

          $(xml).find('Topic').each(function(){
          var topic = $(this).text();
           //Binding it to another dropdown with id ddTopic

            $("<option value='SELECT'>" + topic + "</option>").appendTo("#ddTopic");
      
              }); // end each() loop
          } // end success
  }); // end ajax()

});//end ready()

</script>