Open all anchor links in new window

I believe this post is going to be very interesting to many people who read this post. Because the first question is what is the need to open links in new window? Is it a big deal to open links in new window? What are the advantages? Why we need to implement this in our sites or blogs?

Take my blog for example.  I have write big posts some times and place more links. I want the user to see the links to be opened in new windows as they are still reading my pages. If the link opened in the same page, then it will be a problem to go and come back and start reading from the position they were. That won't give good experience. I want them to be stayed on my blog page and open all the links in new window. So that user is always on my blog page and if they wants then they can move across pages. It's not bad at all.

How many ways are there to implement this?
1. Make all links in web page open in new window.
2. Only some part of the web page links will be opened in new window.

Fixing the error Permission denied to get property XULElement.selectedIndex in Mozilla Firefox

When working with Mozilla Firefox browser, I usually come across the error below many times.

Usual exception details: Permission denied to get property XULElement.selectedIndex

Error because of my own javascript function:
Permission denied to get property XULElement.popupOpen

I want to write this post because, for me it took long time to solve the issue. May be most of the people may get this error when working with Mozilla Firefox.

Why it is coming? What are the possibilities?

This will come if you are making AJAX calls with a input type text box, then firebug will throw this error. This is because it is a autocomplete functionality. To fix this what you need to do is, just add an attribute to input control as shown below.

<input type="text" autocomplete="off" />

This will stop Firefox from attempting to complete the content in the box.

That's it!!!

Is this helpful?

JQuery integration in SharePoint

As we are well experienced with the JQuery in ASP.NET applications, JQuery is a client side script for executing really impressive logics, calling server-side methods, animations, smooth rendering etc.

SharePoint is a platform and which is built upon ASP.NET, so we can do all the stuff in SharePoint which we implemented in ASP.NET applications. Here is a small walk through of how to integrate the JQuery in SharePoint applications. We usually write lot of logics by using JQuery to get data from server using Ajax implementation by calling Page Web methods and render the data by using JTemplates etc… But We can’t implement the same in SharePoint because we can’t wriite page web methods. Reason behind is SharePoint don’t support page web methods because it is build with ASP.NET 2.0 version. Other than that you can implement all the logics in SharePoint as well.

Follow the steps below to integrate JQuery into SharePoint.

• Open your SharePoint site in SharePoint designer.
• It’s always better to organize your data and files in good structure. So create a folder for placing all scripts named “Scripts” if it does not exist.
• Now copy the Jquery script file to this folder. I am using the file jquery-1.3.1.js.
• Create an ASPX page in your pages folder of the site if it is a published web site template otherwise create a page in the root of site. [However, any place it works.]
• This page is not a web part page, we are just creating a simple ASPX page for JQuery integration.
• Here, add a reference to the JQuery java script file to the head tag of the page.
• Add the below code to test the Jquery functionality to body of the page.
• <script type="text/javascript">
      $(document).ready(function() {
          $("#cb").live('click', function() {
          $("#lblMessage").text("you clicked on CheckBox, selected = " + $("#cb").attr('checked'));
          });
      });
  </script>

  <input type="checkbox" id="cb" />
  <label id="lblMessage"></label>

• We just wrote a very small piece of code snippet for testing the JQuery functionality. This post main goal is to integrate the JQuery plug-in for SharePoint. The same way you can add reference to the master page of the site to get the advantage of JQuery in all pages of the web site.

• We can apply the master page to the current ASPX page by following this post. This will give you the same look and feel as other pages.

• We have plenty of ways to do this. For example, for simple integration purpose i explained you to place the JQuery file in scripts folder of the root of the web site. But good way of doing is, placing the file in Layouts folder of 12 hive in SharePoint system. This way you can access the file in any site and on any page through out the SharePoint. Because Layouts is the common sub site exist for all the sites.

• Adding script reference to all the pages in a site:

1. Add the script reference to the <HEAD> tag of the master page of the site. So that all pages have the reference to the JQuery script and you can use it any where.
2. Syntax: <script type=”text/javascript” src=”/_layouts/scripts/jquery-1.3.1.js”></script>

• Add script reference to specific pages:

1. For this we have a good and nice web part to add html/script/css. That is nothing  but Content Editor Web part. We can add a content editor web part on the page [most probably on the top of page] and we will add the script reference code to it. Now the JQuery is available only for the pages where you added the code.

Use of XML HTTP Request object to make server calls through javascript

We have a requirement that we need to show light box when you click on search results in search results page. When i was new to ASP.NET and know some what about ASP.NET AJAX i thought of using it, but it didn't work out well. Because search results returns large amount of data and if i put everything in UpdatePanel then it can't process the request because Ajax is meant for processing small amounts of data to and from server.

The main requirement is on search results page, we are showing a title, small description and read more link, when anyone clicks on the read more link, it will make a server call and get's the corresponding search results related data and show it up on the page in light box. It needs an ajax call. So, here ASP.NET Ajax won't work. After thought about 2 days i got a new idea and implemented that and working great. Everything was implemented with 15 lines of javascript code by using the XMLHttpRequest object.

How it works:
I have created an ASPX page, where it will return the HTML i need to show in the light box. From the XMLHttpRequest object, i will call that page, gets the response from it and show it in the light box. Very simple!!!
You can use handlers as well to do this. We can write some logic like depends on the querystring params, inside HTTPHandlers build HTML and return that html to browser. But for better styling and html formatting i used ASPX page instead of handlers. Finally, we will catch the response and bind it to the page.

ASPX CODE:

Explanation:

1. I have taken a data list on my page, where it binds all the search results which matches the given keywords.
2. I am using data bound event to bind the data on the server side, you can check that in the ASPX.CS section.
3. I am using a ASP panel, to bind the response from the server and to show the light box. (This is tha panel we are using to bind the response from the server and show the light box.)
   

ASPX.CS:

protected void dlData_DataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Header || e.Item.ItemType == ListItemType.Footer) return;

Literal litTitle = e.Item.FindControl("litTitle") as Literal;
string anchorText = "<a href="javascript:void();" onclick="\"javascript:loadurl('{0}','{2}');return false;\">{1}</a>"; 
litTitle.Text = String.Format(anchorText, "Path of the page", "Title", panelLightBox.ClientID);
}

Note: "Path of page" is the actual page we need to call, and "Title" is the anchor text.


Explanation:
In this event, you can get the server object and bind the data to the controls declared in the item template of the data list. Example purpose, i am binding data to only litTitle control.

Here, if you observe i am creating a html anchor tag and binding that to the literal control, it's not a good way, rather you can create a html anchor control with runat="server" in Item template and bind the data to it, any thing works. I am using onclick event to make a call to the server, in the onclick event of the HTML anchor control i am calling a javascript function called, "loadurl", which will make a server request through XMLHttpRequest obejct.
So, the process is,

1. From our code, when you click on the title, it will call the loadurl javascript function.
2. In loadurl function, we will create a xml http request object and sends the request to server.
3. We will get response from the server and we will catch the responseText from it, and bind it to the light box control.

You can check the loadurl function below.

JAVASCRIPT:

var xmlhttp;
function loadurl(dest, parentID) {
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
xmlhttp.onreadystatechange = function(){triggered( parentID)};
//xmlhttp.setContentType("text/xml");
xmlhttp.open("GET", dest);
xmlhttp.send('');
}
var mainLightBoxDiv = null;
function triggered( parentID) {mainLightBoxDiv = parentID;
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
{
var div = document.getElementById(parentID);
div.innerHTML = xmlhttp.responseText.toString();

if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}
var centerY = (yScroll + 170);
div.style.top = centerY+'px';
div.style.display="block";
}
}

function CloseDiv()
{
document.getElementById(mainLightBoxDiv).style.display = 'none';
}

Explanation:

1. We are using two variables. One for the destination url, and one for the parentID which holds the id of the control for light box.
   
2. We are creating an XMLHttpRequest object.
3. When ready state changed, we are trigerring one event to process our request.
4. Making the GET request to get the data from server.
5. Binding the reponseText from the response to the parentID innerHTML.
6. And some sort of logic to detect the y axis unit where we need to show light box, for this we are detecting the scrollbar position and setting the position of the division. i am doing some operation by adding/subtracting 170 - which is the minimum height of the light box in my scenario.
7. We are using another function to close the light box.

These days, there are lot of technologies are coming and the best way of implement the above case is using JQuery. We cn use JTemplates to bind the search results data and make an ajax call to the page web method to get what we want. This is very simple and best.

For seeing it live or to test, you can see the page i developed for one of our client.

Very simple!!! Happy coding.

To access html control without runat=”server” in C# code.

In ASP.NET coding, I don't think it is needed to create or declare only ASP.NET server-side controls. Some cases, to make our page more efficient and faster we can write HTML controls by adding runat="server" to access them on server side code [C#].

But, there are some special requirements where we need to create HTML controls dynamically in c# and add them in a string and write the string to a page. And whenever some event raised like button click event, on server side code, we need to retrieve the values of those HTML controls. As it is not declared as runat="server" on the page, we can't take the values very simple. In that type of scenarios, this solution works. Please follow the solution below to get the values of the HTML controls which doesn't have runat="server" attribute defined.

Example:

HTML declaration:

<input type="text" name="txtName" />

C# Code:

string strValue = Page.Request.Form["name of the control"].ToString();

Note:

To get the values in server side code of HTML control, we need to follow below points.

• The tag should have an attribute called NAME. Because it is used as key in form[].
• The form method should be of type POST.

That's it!!! Please let me know, if you have any issues with this approach. Hope this helps...

Importance of !important property in CSS.

I think in css most of the people don't have idea or complete idea on keyword called "!important".

It will be useful in many scenarios where we have plenty of style sheets and want to overwrite all the styles applied to an element with some other styles. We know that applying styles in HTML for controls hierarchy will be like this, Which styles are very close to the element those will apply finally. i.e. if we apply some styles for a division in css and if we write inline style for the same element, then always inline styles apply. That means the inline styles overwrites all other styles to that element. Like the same, in our css, if we apply different styles to an element in different places and finally if you want to overwrite the styles in a perticular section then you need to use this !important property at end of the style.

We have a scenario like where we need to overwrite all of the styles to a perticular control, there this property will help us.

Ex: .topNav

{

background-color:#990000;

}

.topNav {some other style….}

.topNav

{background-color:#818286 !important;

}

the last css declaration will overwrites all the topnav classes declared and finally it applies the background color of #818286 for top navigation.