Wednesday, December 21, 2011

Copy of Session Object

Many times we try to make copy of session object, but in case when we are modifying copied object we might noticed that session object gets updated automatically, the reason is both copied object and session object are pointing to same location, even if you tried to use "new" operator while creating object.

Scenario
Let say you have Member Class as mentioned under
public class Member{


public string FirstName { get; set; }
        public string LastName { get; set; }
}


Problem:
Member objMember = new Member();
objMember.FirstName = "Sachin";
objMember.LastName = "Tendulkar";

Then try to save object in Session
Session["MemberObj"] = objMember;

This method will work good till we are just accessing object from session, but in case if we try to update object created from session it will update value of session also.

That is,
Member newMember = new Member(); //Even though object is created using "new" keyword.
newMember = (Member) Session["MemberObj"];
newMember.FirstName = "Kapil"; //This will update session FirstName also.


Solution:
To make copies of session you need to create a clone method in class.

In above class create a method clone, to support copy of session.


public class Member{


public string FirstName { get; set; }
        public string LastName { get; set; }


public Member clone()
{
   Member cloneMember = new Member();
       cloneMember.FirstName = this.FirstName;
   cloneMember.LastName = this.LastName;
}
}

Now, while accessing session object, you can call clone method to make copy of session.

Member newMember = new Member();
newMember = ((Member) Session["MemberObj"]).clone();

now if you try to modify object copied from session, will not update session object.
newMember.FirstName = "Kapil"; //Will not update session FirstName

Sunday, November 06, 2011

Select Top 10 rows in MySQL - MS SQL Top keyword equivalent in MySQL

If you are from MS SQL Server background and trying to write query with TOP keyword in MySQL it won't work.

MS SQL Server equivalent of Top keyword in MySQL is Limit


Example 1: Simple Select statement without where clause or order by clause
In MS SQL Server
SELECT Top 10
FROM Customers;

MySQL Equivalent 
SELECT * 
FROM Customers
LIMIT 10;




Example 2: Select statement with where clause
In MS SQL Server
SELECT Top 10
FROM Customers
Where City = 'New York';

MySQL Equivalent 
SELECT * 
FROM Customers
Where City = 'New York'
LIMIT 10;





Example 3: Select statement with where and order by clause
In MS SQL Server
SELECT Top 10
FROM Customers
Where City = 'New York'
Order by CustomerID desc;

MySQL Equivalent 
SELECT * 
FROM Customers
Where City = 'New York'
Order by CustomerID desc
LIMIT 10;





Example 4: Paging Query
In MS SQL Server
SELECT *
FROM
(
    SELECT  
       CustomerID, 
       CustomerName, 
       City,
       ROW_NUMBER() OVER (ORDER BY Customers.CreationDate DESC) as RowNum
    FROM Customers
    Where City = 'New York'
)
WHERE RowNum BETWEEN (@iCurrentPageIndex * @iPageSize) + 1 AND (@iCurrentPageIndex * @iPageSize) + @iPageSize;

MySQL Equivalent 
SELECT * 
FROM Customers
Where City = 'New York'
LIMIT 10,20;

Wednesday, October 12, 2011

Service Unavailable Error Sharepoint 2007 After domain controller installation

I have recently create a Sharepoint 2007 Virtual PC Image and everything was working good, till the point i realise that i don't have Sharepoint users to practise. 

In order to create more users in Sharepoint, you need to add users in Sharepoint Active directory.

Since my virtual machine was not having "domain controller" i was unable add more users in Active directory.

Few steps that will be helpful in case you got stuck in similar situation.

Step 1: Update Windows Server 2003 with Service Pack 2

Step 2: Open Run window and type "dcpromo" in run window.  This command will able to start domain controller installation.

Step 3: Follow the wizard and complete domain controller installation.

Now try to open your sharepoint site or sharepoint central administration website.  You will see error "Service Unavailable"

Cause of this error:  Since you have installed domain controller your virtual pc name has changed and as all sharepoint sites are administrator configurable, it will start giving "Service Unavailable" error.  Because your PC name has changed and administrator user settings association is also changed.

Solution - Service Unavailable error
Step 1: Type "inetmgr" on Run window to open IIS (Internet Information Services Manager)

Step 2: Expand ServerName (or your PC Name) and than expand "Application Pools"

Step 3: Now select any of your sharepoint site application pool or shared service application pool, Right click and choose properties


In Shared Service Properties window open Identity tab


On "Identity" tab click on browse button to open "Select User" window



In "Select User" window, type "Administrator" and hit Check Names, If Administrator user is accessible it will underline the Administrator word, than hit OK to close "Select User" window.

You will now notice that your Administrator user name has been updated based on "Domain Controller" name you have choosen.

Step 4:  Retype your password and click OK to close properties window.

Step 5: Repeat steps 3 and step 4 for all your sharepoint sites application pool, including shared service application pool.

Step 6: (If Applicable) Incase any of your sharepoint site application pool is showing stop, than right click application pool and choose "Start" to start application pool for your sharepoint site.

Step 7: Reset IIS.  Type "iisreset" command on Run window to reset IIS, ones all above steps are done.

Now try to open your sharepoint site and sharepoint central administration site, you will now be able to see your sharepoint site up and running.  Incase you tried something else to resolve this problem than please do share your solution. - Thank you :)

Wednesday, September 28, 2011

JQuery Focus Event

In this article we will learn how JQuery focus events work

Focus event triggers whenever control receives focus.  Example: change textbox background color on textbox focus.

Example 1 - Focus Event: Change textbox background color on Focus (Live Demo)
I have a 3 html input control, whose id is "txtInput1", "txtInput2" and "txtInput3" on receiving focus it should change its background color to Yellow, Red and Green.


Input 1: <input id="txtInput1" type="text" /> <br /><br />
Input 2: <input id="txtInput2" type="text" /> <br /><br />
Input 3: <input id="txtInput3" type="text" /> <br /><br />

JQuery script for changing background color on receiving focus


<script language="javascript" type="text/javascript">
    $(document).ready(function () {


        $("#txtInput1").focus(
            function (event) {
                $("#txtInput1").css("background-color", "Yellow");
            }
        );


        $("#txtInput2").focus(
            function (event) {
                $("#txtInput2").css("background-color", "Red");
            }
        );


        $("#txtInput3").focus(
            function (event) {
                $("#txtInput3").css("background-color", "Green");
            }
        );
    });
</script>


Example 2 - FocusIn Event: FocusIn Event is similar to focus event.  Let try to Change textbox background color on Focus with focusin JQuery event (Live Demo)
I have a 3 html input control, whose id is "txtInput1", "txtInput2" and "txtInput3" on receiving focus it should change its background color to Yellow, Red and Green.


Input 1: <input id="txtInput1" type="text" /> <br /><br />
Input 2: <input id="txtInput2" type="text" /> <br /><br />
Input 3: <input id="txtInput3" type="text" /> <br /><br />

JQuery script for changing background color on receiving focus


<script language="javascript" type="text/javascript">
    $(document).ready(function () {


        $("#txtInput1").focusin(
            function (event) {
                $("#txtInput1").css("background-color", "Yellow");
            }
        );


        $("#txtInput2").focusin(
            function (event) {
                $("#txtInput2").css("background-color", "Red");
            }
        );


        $("#txtInput3").focusin(
            function (event) {
                $("#txtInput3").css("background-color", "Green");
            }
        );
    });
</script>

Example 3 - FocusOut Event: Change textbox background color on Focus out (Live Demo)
I have a 2 html input control, whose id is "txtInput1" and "txtInput2"  

Input 1: <input id="txtInput1" type="text" /> <br /><br />
Input 2: <input id="txtInput2" type="text" /> <br /><br />

JQuery script for changing background color on receiving focus
<script language="javascript" type="text/javascript">
    $(document).ready(function () {

        $("#txtInput1").focusin(

            function (event) {
                $("#txtInput1").css("background-color", "Yellow");
            }
        );


        $("#txtInput2").focusin(
            function (event) {
                $("#txtInput2").css("background-color", "Red");
            }
        );




        $("#txtInput1").focusout(
            function (event) {
                $("#txtInput1").css("background-color", "White");
            }
        );


        $("#txtInput2").focusout(
            function (event) {
                $("#txtInput2").css("background-color", "White");
            }
        );


    });
</script>


I will be discussing more JQuery examples in JQuery example series.

JQuery Select Event

In this article we will learn how JQuery select events work

The select event is sent to an element when the user makes a text selection inside it. This event is limited to <input type="text"> fields and <textarea> boxes.

Example 1: Show Alert when textbox value is selected using JQuery Select Event (Live Demo)
I have a html textarea control, whose id is "txtInput" on selecting content of textarea, I will display alert.

<textarea id="txtInput" rows="5" cols="20">Welcome to the world of JQuery</textarea>

JQuery script for showing alert on text content selection


<script language="javascript" type="text/javascript">
    $(document).ready(function () {


        $("#txtInput").select(
            function () {
                alert("Text content is selected");
            }
        );


    });
</script>



I will be discussing more JQuery examples in JQuery example series.

JQuery Change Event

In this article we will learn how JQuery change events work

Change event will fire, when value of element is getting changed.  Example:  If we try to change textbox value it should try to validate it.

Example 1: Show Alert when textbox value is changed using JQuery Change Event (Live Demo)
I have a html textbox control, whose id is "txtInput" on changing value of textbox content, I will display alert.

<b>Type anything in below textbox to trigger, change event</b><br />
<input id="txtInput" type="text" />

JQuery script for showing alert on text content change

<script language="javascript" type="text/javascript">
    $(document).ready(function () {


        $("#txtInput").change(
            function () {
                alert("Textbox value is changed");
            }
        );


    });
</script>


I will be discussing more JQuery examples in JQuery example series.

JQuery Keydown, Keypress and Keyup Event

In this article we will learn how JQuery keydown, Keypress and Keyup events work.

  • Keydown Event bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.
  • Keypress Event bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.
  • Keyup Event bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.
This events are very similar and you will find very minor difference between them.  To  understand difference between Keydown, Keypress and Keyup event is sequence in which they triggers.
  • First Keydown Event occurs (Triggers as soon as key is press)
  • Second Keypress Event occurs (Triggers when key character is typed)
  • Third Keyup Event occurs (Triggers when key is up, after it is been pressed)

Example 1 - Keydown Event: We will show alert in all situation whenever user press any key in textbox. (Live Demo)

I have a html input control, whose id is "txtInput" on writing any character inside textbox it should display alert.


<b>Type anything in below textbox to trigger, keydown event</b><br />
<input id="txtInput" type="text" />

JQuery script for showing alert on keydown event


<script language="javascript" type="text/javascript">
    $(document).ready(function () {


        $("#txtInput").keydown(
            function (event) {


                if (event.keyCode == 13) {
                    alert("You have pressed enter");
                }
                else if (event.keyCode == 18) {
                    alert("You have pressed Alt key");
                }
                else if (event.keyCode == 32) {
                    alert("You have pressed Spacebar key");
                }
                else if (event.keyCode == 27) {
                    alert("You have pressed Escape key");
                }
                else if (event.keyCode >= 48 && event.keyCode <= 57) {
                    alert("You have pressed numeric key");
                }
                else if ((event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 97 && event.keyCode <= 122)) {
                    alert("You have pressed alphabet key");
                }                
                else {
                    alert("You have pressed: " + event.keyCode);
                }


            }
        );


    });
</script>


Example 2 - Keypress Event: We will show alert in all situation whenever user press any key in textbox. (Live Demo)

In above example you might have notice problem with event.keyCode, it triggers as soon as we press the key.  That is we cannot used this event when we want to check combination of key (Example: shift + 2 .i.e. "@" symbol is pressed or not)  For such situation were we want to identify which character is pressed, it is good to use event.which event.  Let understand that with example

I have a html input control, whose id is "txtInput" on writing any character inside textbox it should display alert.


<b>Type anything in below textbox to trigger, keydown event</b><br />
<input id="txtInput" type="text" />

JQuery script for showing alert on keypress event


<script language="javascript" type="text/javascript">
    $(document).ready(function () {



        $("#txtInput").keypress(
            function (event) {


                if (event.which == 64) {
                    alert("You have pressed @ sign");
                }
                else if (event.which == 35) {
                    alert("You have pressed # sign");
                }
                else if (event.which == 36) {
                    alert("You have pressed $ sign");
                }
                else if (event.which == 42) {
                    alert("You have pressed * sign");
                }
                else if (event.which >= 65 && event.which <= 90) {
                    alert("You have pressed uppercase alphabet character");
                }
                else if (event.which >= 97 && event.which <= 122) {
                    alert("You have pressed lowercase alphabet character");
                }
            }
        );



    });
</script>



Example 3 - Keyup Event: We will show alert in all situation whenever user press any key in textbox. (Live Demo)

I have a html input control, whose id is "txtInput", when user releases key on keyboard this event will trigger and it should display alert.


<b>Type anything in below textbox to trigger, keydown event</b><br />
<input id="txtInput" type="text" />

JQuery script for showing alert on keyup event


<script language="javascript" type="text/javascript">
    $(document).ready(function () {


        $("#txtInput").keyup(
            function (event) {


                if (event.keyCode == 13) {
                    alert("You have pressed enter");
                }
                else if (event.keyCode == 18) {
                    alert("You have pressed Alt key");
                }
                else if (event.keyCode == 32) {
                    alert("You have pressed Spacebar key");
                }
                else if (event.keyCode == 27) {
                    alert("You have pressed Escape key");
                }
                else if (event.keyCode >= 48 && event.keyCode <= 57) {
                    alert("You have pressed numeric key");
                }
                else if ((event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 97 && event.keyCode <= 122)) {
                    alert("You have pressed alphabet key");
                }                
                else {
                    alert("You have pressed: " + event.keyCode);
                }


            }
        );


    });
</script>

I will be discussing more JQuery examples in JQuery example series.

Monday, September 26, 2011

JQuery Double Click Event

In this article we will learn how JQuery double click events work

Example 1: Show Alert on double click of paragraph, using JQuery Event (Live Demo)
I have a simple html para, whose id is "MyPara" on double click of this paragraph it should display alert.

<p id="MyPara" style="background-color:Yellow;color:Red;font-size:2.2em;">
Double Click, Paragraph to display alert
</p>

JQuery script for showing alert on double click of paragraph

<script language="javascript" type="text/javascript">
    $(document).ready(function () {


        $("#MyPara").dblclick(
            function () {
                ShowAlert();
            }
        );


    });


    function ShowAlert() {
        alert("Alert message on double click");
    }
</script>



Double click event is almost similar to click event, here instead of click we have used dblclick.

I will be discussing more JQuery examples in JQuery example series.

Sunday, September 25, 2011

JQuery Click Event

In this article we will learn how JQuery click events work

Example 1: Show Alert on html button click using JQuery Event (Live Demo)
I have a simple html button control, whose id is "btnClickMe" on click of this button we will display alert.
<button id="btnClickMe">Click Me to Display Alert</button>

JQuery script for showing alert on button click
<script language="javascript" type="text/javascript">
    $(document).ready(function () {


        $("#btnClickMe").click(
            function () {
                ShowAlert();
            }            
        );


    });


    function ShowAlert() {
        alert("Alert message on click");        
    }
</script>

Explanation of how things are working here

Step 1: Defining document.ready function.
    $(document).ready(function () {

    });
Whenever we are putting our JQuery code inside this code block means, we are instruction browser to execute JQuery code only when page is loaded and it is ready to execute JQuery code.

Question: Can i put JQuery code directly without even putting it in document.ready function.
Answer: Yes you can do, but in that case you need to be sure that your control is loaded before your JQuery code tries to access it, otherwise you may receive error.

Step 2: Create a Alert function which can be called on button click event.
Note: This is a simple alert function, which is a common javascript alert function.

    function ShowAlert() {
        alert("Alert message on click");      
    }

Step 3: Write button click event to call alert
        $("#btnClickMe").click(
            function () {
                ShowAlert();
            }            
        );
Please note here #btnClickMe is button id on whose click event we are going to show alert.
Watch Live Demo



Example 2: Show Alert on asp.net button click using JQuery Event
I have a asp.net button control, whose id is "btnClickMe" on click of this button we will display alert.

<asp:Button ID="btnClickMe" runat="server" Text="Click Me" />


JQuery script for showing alert on asp.net button click<script language="javascript" type="text/javascript">
    $(document).ready(function () {

        $("#<%=btnClickMe.ClientID%>").click(
            function () {
                ShowAlert();
            }            
        );

    });

    function ShowAlert() {
        alert("Alert message on click");      
    }
</script>



I will be discussing more JQuery examples in JQuery example series.

Saturday, September 24, 2011

Attribute Selector examples in JQuery

With attribute selector in JQuery we can select element based on particular attribute.

Lets understand attribute selector by example.

My HTML looks something as below image.




And it appears in browser as under



Now let see, how attribute selector works in JQuery.

Example 1: Has Attribute Selector (Live Demo)
Let change all the link appearing in blue to red.

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
       $("a[href]").css("color", "Red");        
    });

</script>


It will result in following output on browser screen.



Example 2: Equal to Attribute Selector (Live Demo)
Let change all the link appearing in blue to red only for links which as rel="nofollow"

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

       $("a[rel='nofollow']").css("color", "Red");        
    });

</script>

It will result in following output on browser screen.


Example 3: Start with Attribute Selector (Live Demo)
Let change all the email link appearing in blue to red.  i.e. Change all links which are begining with mailto

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
       $("a[href^='mailto']").css("color", "Red");        
    });

</script>

It will result in following output on browser screen.


Example 4: Ends with Attribute Selector (Live Demo)
Let change all the link appearing in blue to red for one which are ending with .com.

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
       $("a[href$='.com']").css("color", "Red");        
    });

</script>

It will result in following output on browser screen.


Example 5: Contains Attribute Selector (Live Demo)
Let change all the link appearing in blue to red for one which contains word example.

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
       $("a[href*='example']").css("color", "Red");        
    });

</script>

Note: Here we are selecting href attribute with word example, hence their are 3 links pointing to http://www.Syntax-Example.com, it has shown all three links in red color.

It will result in following output on browser screen.



Example 6: Not Equal to Attribute Selector (Live Demo)
Let change all the link appearing in blue to red for one which NOT contains rel="nofollow". 
Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
       $("a[rel!='nofollow']").css("color", "Red");        
    });

</script>

It will result in following output on browser screen.


JQuery Selector Basics and understanding Tag Selector

What is JQuery Selectors?
JQuery selectors are used to select elements.  In order to apply any effect or style change, it is necessary to select element, JQuery Selectors are used to select element in order to apply those changes.

Lets understand through different examples.

I have a form with  text formatted with following html tags

  • H2 Tag
  • HR Rule Tag
  • P Paragraph Tag
  • UL/LI Tag
  • B bold Tag
My HTML looks something as below image.

And it appears in browser as under

Ok, now we will start with basic examples of how selectors works in JQuery.

Select Particular Tag and apply CSS Format

Example 1: Let select all paragraph tag in our page and change its text background to yellow color.

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
    $("p").css("background-color", "Yellow");
});
</script>


It will result in following output on browser screen.


Example 2: Let select all "h2" tag (header tag on top) in our page and change its font family and size to verdana, 35px.

Please add below script at the end of the page.
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("p").css("background-color", "Yellow");
        $("h2").css("font-family", "Verdana");
        $("h2").css("font-size", "35px");
});
</script>

It will change all h2 tag font.  You can notice that one of h2 lies in Nested master page, while other is on page where JQuery selector tag is defined.

Well obvious questions might be running in your mind that i can do all this from CSS file, than what is the advantage?
The only thing I can say at this point is hold on for a while and we will discuss how it is different and more beneficial.

In next few blog post we will understand few more ways to use JQuery selectors.

ID Selector examples in JQuery

In this post we will understand more about ID Selector in JQuery.  That is selecting a particular element based on his unique ID.

Continue with our earlier example of JQuery Selector

I have following data input screen


Syntax

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
       $("#ElementID").css("stylename", "stylevalue");
    });
</script>



Example 1: Lets give border color to blue to location textbox control on our asp.net web form.
Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
       $("#<%=txtLocation.ClientID%>").css("border-color", "blue");
    });
</script>

Whenever we are selecting asp.net control, it renders html id as something like
MainContent_ContentPane_txtLocation

JQuery needs unique client id, in order to apply css effect.

Since my asp.net webform is using Master page + Nested master page + Control ID
So here: MainContent_ContentPane_txtLocation
MainContent is MasterPage ID
ContentPane is Nexted MasterPage ID
txtLocation is Control ID


Please note:  I have used #<%=txtLocation.ClientID%>
# - Is to tell we are applying css based on ID.
<%=txtLocation.ClientID%> - is used to get client id of txtLocation control.


Note: If you try something like
       $("#txtLocation").css("border-color", "blue");
It won't apply any border to txtLocation, because JQuery will not be able to find txtLocation to apply CSS.


It will result in following output on browser screen.

Example 2: Lets apply yellow background color to table containing all input controls.
My table is not asp.net server control, i.e. it doesn't have runat="server"
Its html looks like <table id="tblInputForm">

Remember if control you are trying to select is not asp.net server control (i.e. not having runat="server"), then you will be able to select it directly.

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
       $("#<%=txtLocation.ClientID%>").css("border-color", "blue");
       $("#tblInputForm").css("background-color", "yellow");
    });
</script>

It will result in following output on browser screen.

Tag or Element Selector examples in JQuery

In this post we will understand more about Tag or Element Selector in JQuery.

Continue with our earlier example of JQuery Selector


I have created a sample asp.net web form.
My HTML looks something as below image.
And it appears in browser as under

Now let see, how element selector works with asp.net controls in JQuery.


*Please Note: Asp.net web form which is used for example is not following all best practices, since this tutorial series will be focusing only on Jquery.  It doesn't contains code in .cs file for input real data in DB.

We know that internally when asp.net web page renders,

  • All label controls as span tag 
  • All Textbox control as input tag
  • All dropdown control as select tag
    • All dropdown items as option element
  • And so on... ok, now lets begin the game!


Example 1: Lets highlight all label controls, with yellow background.
Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("span").css("background-color", "Yellow");
    });
</script>

It will result in following output on browser screen.


Example 2: Lets give border to all textbox controls, with blue border.
Please add below script at the end of the page.


<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("span").css("background-color", "Yellow");
        $("input:text").css("border-color", "blue");        
    });
</script>


Please note: input element is used for multiple purpose,
<input type="text"/> - will display textbox
<input type="submit"/> - will display button

You might have also notice that multiline textbox is rendered as textarea and that is reason it doesn't have blue border.

Output on browser screen.

We have found that here it is an issue since, we want to give blue border to all textbox, irrespective of whether it is textmode is multiline (i.e. Textarea) or normal single line textbox control (i.e. Input type="text").

I can add one more line for Textarea to achieve this, but it will not be good way to do things from maintainability point of view.  Example: let say if requirement gets change and i want my blue border to appear as red.  There are chances that i update one line and not other, in that case few textbox have blue border and other have red.

Watch Live demo of JQuery Element Selector Example

Most Recent Post

Community Updates

Subscribe Blog via Email

Enter your email address:



Disclaimers:We have tried hard to provide accurate information, as a user, you agree that you bear sole responsibility for your own decisions to use any programs, documents, source code, tips, articles or any other information provided on this Blog.
Page copy protected against web site content infringement by Copyscape