Web Development: JQuery

Showing posts with label JQuery. Show all posts

Thursday, January 31, 2013

Clear Items of a DropDownList using jQuery

<asp:DropDownList ID="ddlPeople" runat="server">
</asp:DropDownList>

$("select[id$=ddlPeople] > option").remove();

“> option” matches all child elements. Because each item in the drop down list is rendered as an <option> tag, you need to clear the child <option> tags in order to clear the items in a drop down list.

ref

Tuesday, September 18, 2012

JQuery Toggle Example

Toggling using J Query to Show/Hide Div

Steps.-
1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    add this line in your code for j Query Library.
2.
<input type="submit" id="xyz" value="Check Toggle" >

        <div id="dv1" style="color:#ff1493;">
         a journey over toggle function in jquery. <br/>
           This is a demo. <br/>
           in this demo dive section is toggle on button click event in different type of animation.
        </div>
        <script src ="jquery.js"></script>

        <script>
            $('#xyz').click( function aditya()
            {
                $('#dv1').slideToggle().delay(1000);
            }
            )

        </script>

see Video

Thursday, July 5, 2012

Uploading Multiple Files using JQuery in Asp.Net

Download 2 javascript files (jquery-1.3.2.js) and (jquery.MultiFile.js)

codes
.aspx page
-------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Upload Multiple Files in ASP.NET Using jQuery</title>
        <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
        <script src="Scripts/jquery.MultiFile.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" class="multi" />
        <br />
        <asp:Button ID="btnUpload" runat="server" Text="Upload All"
            onclick="btnUpload_Click" />
    </div>

    </form>
</body>
</html>
======================================
.aspx.cs page
---------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnUpload_Click(object sender, EventArgs e)
    {
        try
        {
            HttpFileCollection hfc = Request.Files;
            for (int i = 0; i < hfc.Count; i++)
            {
                HttpPostedFile hpf = hfc[i];
                if (hpf.ContentLength > 0)
                {
                    hpf.SaveAs(Server.MapPath("docs") + "\\" +
                      System.IO.Path.GetFileName(hpf.FileName));

                }
            }
            Response.Write(hfc.Count + " files are uploaded successfully.");
        }
        catch (Exception ex)
        {
            Response.Write("Error in Uploading !!!");
        }
    }
}

Download Code

Friday, May 18, 2012

JQuery DatePicker

How to use JQuery DatePicker:

u have to download these 3 files jquery-ui.css, jquery.min.js, jquery-ui.min.js
then create folder 'css' in ur application domain and copy jquery-ui.css file it.
create folder 'js' in ur application domain and copy jquery.min.js and jquery-ui.min.js file in it.

coding part

add in <head> section

<link rel="Stylesheet" type="text/css" href="css/jquery-ui.css"/>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">
    $(function () {
        var fmt = {
            changeYear: true,
            yearRange: "-3:",
            changeMonth: true
        };

        $("#datepic").datepicker(fmt); //datepic is id of textbox where u want to use datepicker

    });
</script>

if u want to use date picker in ajax then use this
<script type="text/javascript">
$('#<%=txtRdate.ClientID %>').live('click', function() {
       $(this).datepicker({showOn:'focus',changeYear: true,
            yearRange: "-3:",
            changeMonth: true}).focus();
    });
//txtRdate is asp.net textbox control id. where u want to use date picker
</script>