Function to write the cookies in the browser for infinite time in javascript

in this post our objective is to write the cookies through javascript for infinite time period(here we have given the time period as 100 days)ie.cookies never expires.In this javascript we have also accessed the textbox value and SPContext.Current.Web.CurrentUser.LoginName value .

Write this function inside the "Script" tag of the javascript.

------------------------------------------------------

 function WriteCookies() {

//This is the way to access the value of controls in aspx page through javascript      

 var chk = ddocument.getElementById(<% SPHttpUtility.AddQuote(SPHttpUtility.NoEncode(txtBox.ClientID),Response.Output); %>);

//Way to access the current logged in user name from SPContext in javascript

        var userLoginName =<% SPHttpUtility.AddQuote(SPHttpUtility.NoEncode(SPContext.Current.Web.CurrentUser.LoginName),Response.Output); %>;

        if(chk!=null) {

            if (chk.checked) {

                value = 'TRUE';

            } else {

                value = 'FALSE';

            }

            name = 'KeyName'+'_'+userLoginName;

            //To make the expiry if cookie as infinite

            //Currently we have set the expiry date for 100 days.

            var days = 100;

            if (days) {

                var date = new Date();

                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));

                var expires = "; expires=" + date.toGMTString();

            }

            else var expires = "";

            document.cookie = name + "=" + value + expires + "; path=/";

        }

    }

-----------------------------------------------------

So your job is done

Enjoy!!!

Reading the cookies from the browser in javascript

Here objective is to read the cookies value in javascript. Here is the function which needs to placed inside the "script" of the javascript.This function will read the cookie value from the available cookies in the browser based on the key passed for the cookie.

Here the function is called on page load
-------------------------------------------------------------------

function OnLoadFuntion() {

        name = 'KeyName';

        readCookie(name);

        function readCookie(name) {

            var nameEQ = name + "=";

            var ca = document.cookie.split(';');

            for (var i = 0; i < ca.length; i++) {

                var c = ca[i];

                while (c.charAt(0) == ' ') c = c.substring(1, c.length);

                if (c.indexOf(nameEQ) == 0) {

                  

                    if (c.substring(nameEQ.length, c.length) == 'TRUE') {

                        //Write functionality

                    }

                }

            }

            return null;

        }

    }

----------------------------------------------------------

So your job is done

Enjoy!!!

Exploring “Location” object in javascript

Javascript location object is the property of the window property.

Properties

• hash - The URL anchor part including the leading hash mark if one exists This is the part of the URL that is used to point to point to a particular part of a page where a named anchor is. The hash is the part containing the # sign that points to the particular page location.
• host - The URL hostname and port. The URL http://spvm:1234/pages/default.aspx has the host value of http://spvm:1234. The colon and port is only included when specified. The URL http://spvm:1234/pages/default.aspx has the host value spvm:1234.
• hostname - The URL hostname section
• href - The entire URL. The following code will load the home default page:

location.href = "http spvm:1234.com/"

The following code will display the URL of the current page:

document.write(location.href)

• pathname - The URL pathname section
• port - The URL port section.

protocol - The URL protocol section including the colon after the protocol name. The values are normally http: or file

• search - The URL query string section. This is the section after and including the question mark.

target - The URL link's target name.

Methods

• reload() - The current window document is reloaded. If a value of true is passed to the reload function, the reload is forced to do an HTTP GET of the document. This is not normally done but is useful when you think the server contents may be different from your cache.
replace(URL) - Requires a URL as a parameter. It loads the document at the URL on top of the current document. A new entry is not placed in the history object.

Calling javascript from the XSLT on page load.

This is the first article in exploring the power of javascript when called from XSLT.

XSLT is basically used to render the xml in specified format.Here the requirement is to call some javascript function when xslt is rendering the xml.

In this article we are calling javascript on page load .

Scenario : On page load we want to fill some value in text box coming coming from the property defined in the xml .So first we need to access the property value inside javascript and then on page load need to fill the value inside the textbox.

Here is the sample javascript to be used inside the sample.xsl file

<xsl:template name="picture">

<script type="text/javascript">

function myFunction()

{

var url = ']]><xsl:value-of select="substring-before(@PictureUrl, ',')" />';

var txtBox = document.getElementById('textBox');

txtBox.value = url;

}

_spBodyOnLoadFunctionNames.push("myFunction");

]]>

script>

xsl:template>

Keep watching this space for more in javascript and XSLT.If you have done something then please share.

Hide the template from the site templates ( on create site page) through java script.

Recently i have interesting requirement,in which i have to hide the specific site templates while creating a subsite.
Now the problem was the required template was available under the custom template section ,so on page load first template section comes as default selected,so i have to select the appropriate template to check the available templates.

I tried to hide the template through object model ,but through object model I can remove the template permanently from the site,but here i have to hide the template.
So I tried this objective using javascript on the /_layouts/create.aspx page,which is not although not recommended to modify the OOB pages,To insert the javascript in to the page through HTTPmodule without touching the OOB page follow this post Link ,
but again challenge was this "Input Template Picker" control is a user control and on page loads it displays the template in the first tab only,so i checked the page view of the page and it contains only the value in the values in the first tab,
on clicking the next tab,control fires event through javascript and populates the control,so I was not able to capture the event.
Then while surfing I came across one blog which mentions about capturing the event when there is any change in page object,Bingo...now when i selects another tab , I was able to capture the event and write my logic to hide the template.
Here the javascript code contains an "onDocumentChange" DOM function which gets called when something changes on the page,Inside there is another delegate function which contains the logic is to get the collection of all the available option tag and then make the outerHTML value to empty.



Note: Here is another catch,first i tried to make the optionTag[i].Text to empty but what happened in the template selection panel,value disappeared but it still occupies the space and highlights on selection,so I make the outerHTML of the optionTag to empty.

So your job is done!!!
If you have any other method to do the same throug object model or through javascript then do reply

Enjoy!!!

How to get the Query string value through javascript

Requirement is to get the querystring value through javascript.

Here Querystring variable name is “Tag”

Add this function in the javascript block of the page and call according to the requirement.I am calling this function on page load.

Here is code:

-----------------------------

function querySt() {

var url = window.location.search.substring(1);

var qSColl = url.split("&");

for (i=0;i<qSColl.length;i++) {

qsValue = qSColl[i].split("=");

if (qsValue[0] == 'Tag') {

var tabValue = qsValue[1];

}

}

}

---------------------------------

So this way you can access any variable value from the querystring

So your job is done

Enjoy!!!

Limiting length of Multiline textbox(inside webpart) through javascript

Here the requirement is to limit the maxlength of multiline text box in webpart .This seems to be very simple problem,just set the property of MaxLength property of TextBox to some no,but when somehow this property does not work with Multiline Text Box..may be there will be some fix in future release.

So we fix this problem using java script

Add this javascript in the CreateChildControl method.

Here is javascript for this :

----------------------------------------------------------

StringBuilder javascript = new StringBuilder();

javascript.AppendLine("<script type='text/javascript'>");

javascript.AppendLine("function Validation(evt,maxLength)");

javascript.AppendLine("{");

javascript.AppendLine("if(evt.value.length > maxLength)");

javascript.AppendLine("{");

javascript.AppendLine("alert('Maximum 255 characters allowed');");

javascript.AppendLine("evt.value = evt.value.substring(0,maxLength);");

javascript.AppendLine("}");

javascript.AppendLine("}");

javascript.AppendLine("</script>");

if (javascript != null)

{

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "javascriptcode", javascript.ToString());

}

-------------------------------------------------------------

In above code we have written the java script and registered the client script in the page.Now we need to add this javascript event in the multiline textbox

-------------------------------------------------------------txtMultilineTextBox.Attributes.Add("onKeyDown", "Validation(this, 255)");

----------------------------------------------------------------

Now we have added the event in the text box for "onKeyDown" event .So whenever user exceed 255 characters in the text box this event will fire and limit the length.