Thursday, November 12, 2009

jQuery How to build a simple table style switcher


  1. Get Started
    Let's create an html table that is showing some sample data. Here is it:

    <table>
    <tbody>
    <tr>
    <th>
    Column1
    </th>
    <th>
    Column2
    </th>
    </tr>
    <tr>
    <td>Data1.1</td>
    <td>Data2.1</td>
    </tr>
    <tr>
    <td>Data1.2</td>
    <td>Data2.2</td>
    </tr>
    </tbody>
    </table>



  2. Let's Add some style to it
    Let's add some simple styling to the table so it looks pretty! here is the css:

    table{width:400px;border:solid 1px black;}
    th {background:black;color:White;}
    td {color:Black;}



  3. Thinking about multiple styles of table
    Let's add an id to table and change some things in our css to make it more
    specific.
    HTML:

    <table id="my-table" class="my-table">
    <tbody>
    <tr>
    <th>
    Column1
    </th>
    <th>
    Column2
    </th>
    </tr>
    <tr>
    <td>Data1.1</td>
    <td>Data2.1</td>
    </tr>
    <tr>
    <td>Data1.2</td>
    <td>Data2.2</td>
    </tr>
    </tbody>
    </table>


    CSS:

    #my-table{width:400px;border:solid 1px black;}
    #my-table th {background:black;color:White;}
    #my-table td {color:Black;}


  4. Let's build another style
    Let's add another style to table. So now css looks like following:

    #my-table{width:400px;border:solid 1px black;}
    #my-table th {background:black;color:White;}
    #my-table td {color:Black;}

    #my-table-gray{width:400px;border:solid 1px gray;}
    #my-table-gray th {background:gray;color:White;}
    #my-table-gray td {color:gray;}



  5. Let's add jQuery to switch style!

    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script>
    jQuery(document).ready(
    function() {
    jQuery("a").click(function() {

    var table = jQuery("#my-table")[0];
    if (table.className == "my-table")
    table.className = "my-table-gray";
    else
    table.className = "my-table";
    });
    }
    );

    </script>

    http://picasaweb.google.com/lh/photo/4KmKLPYDYIwzFS6BbNOfmg?authkey=Gv1sRgCJ2FjqX7hqreRw&feat=directlink

CheckBoxList Required Validation in Javascript

ASP.NET CODE:

<asp:CheckBoxList ID="chkList" runat="server">
<asp:ListItem>Item One</asp:ListItem>
<asp:ListItem>Item two</asp:ListItem>
<asp:ListItem>Item three</asp:ListItem>
<asp:ListItem>Item four</asp:ListItem>
</asp:CheckBoxList>
<asp:Button ID="btnSubmit" runat="server" ValidationGroup="CHK" OnClientClick="return validateChk();" Text="Validate"/>

JAVASCRIPT CODE:


function validateChk() {
debugger;
var found = false;
var validated = false;
var id = document.getElementById("<%=chkList.ClientID %>").id;
var elements = document.forms[0].elements;
for (i = 0; i < elements.length; i++) {
if (elements[i].type == "checkbox" && elements[i].id.indexOf(id) > -1) {
found = true;
if (elements[i].checked) {
validated = true;
break;
}
}
}
if (found && validated)
return true;
else
return false;

}

Tuesday, November 3, 2009

Using single ClientValidationFunction for similar validations using custom validator

Here is an example of how to write a common client validation function while using similar kind of validations on more than one asp.net control.
This example is showing how to validate two drop down list using a single javascript function for required
ASP.NET Markup

<asp:DropDownList ID="ddlCountry" runat="server" AutoPostBack="True"
onselectedindexchanged="ddlCountry_SelectedIndexChanged" CausesValidation="false">
</asp:DropDownList>
<asp:CustomValidator ID="cvCountry" runat="server" ControlToValidate="ddlCountry"
EnableClientScript="true" ValidationGroup="REG" Display="None" ErrorMessage="Country is required" Text=" "
ClientValidationFunction="validateCbo"></asp:CustomValidator>
<asp:DropDownList ID="ddlState" runat="server">
</asp:DropDownList>
<asp:CustomValidator ID="cvState" runat="server" ControlToValidate="ddlState"
EnableClientScript="true" ValidationGroup="REG" Display="None" ErrorMessage="State is required" Text=" "
ClientValidationFunction="validateCbo"></asp:CustomValidator>

Javascript client validation function:

function validateCbo(source, args) {
var ddl = null;
if(source.controltovalidate.indexOf('Country')>-1)
ddl = document.getElementById('<%=ddlCountry.ClientID %>');
else
ddl = document.getElementById('<%=ddlState.ClientID %>');
if (ddl != null) {
args.IsValid = !(ddl.options[ddl.selectedIndex].value == 0);
}
else
args.IsValid = true;
}

Monday, November 2, 2009

DotNetNuke 5.x with .net framework 2.0 (web.config)

Everybody, who tried to deploy DotNetNuke 5.x on web servers that is not having .net framework 3.5 requires changes to web.config. You can download this web.config which worked for me.

Hope this helps :)

Popular Posts