Dot Net Code Reference: JQuery

Showing posts with label JQuery. Show all posts

Friday, 21 March 2014

JQPlot Charts

To use JQPlot Charts first download JQPlot JQuery plugins from http://www.jqplot.com/

now copy the required js files from plugin to your project and add the script as follows. This script is as per my requirement so yours logic and code can differ from mine.

Now Add the div in your webpage body to render the chart.

Create an action to make an AJAX call for chart data like following.

[HttpGet]
        public JsonResult DelayedMilestoneChartData(string Criteria, string FromYear, string FromMonth, string ToYear, string ToMonth, string ProjectList)
        {
            DashBoardServices Dashboard = new DashBoardServices();
            DataSet dsCustomers = new DataSet();
            dsCustomers = Dashboard.GetDelayedMilestoneChart(Criteria, FromYear, FromMonth, ToYear, ToMonth, ProjectList);
            var data = DataTableExtensoins.ToList<DashboardGridModel>(dsCustomers.Tables[0]).ToList();
            var months = data.Select(m => m.Month).Distinct().ToList();
            var company = data.Select(c => c.CustomerName).Distinct().ToList();
            return Json(new { Data = data,Month = months, Company = company }, JsonRequestBehavior.AllowGet);
        }

Thursday, 20 March 2014

Add or Delete Feature Details Dynamically using JQuery

Add the following script

Now Create a table in which the operation will performed.

<div>
<table   class="table table-bordered table-striped table-hover" id="feature" cellpadding="5px" width="20%">
  <thead>
   <tr>
    <th width="7%" class="text-center">
     <label id="lblSr">Sr</label>
     <input type="hidden" value="" id="hdfTotalinvoiceAmount" />
     <input type="hidden" value="" id="hdfTotalProjectAmount" />
    </th>
    <th>
     <label id="Label1">Description</label>
    </th>
    <th>
     <label id="Label1">Milestone</label>

    </th>
    <th>
     <label id="Label2">Qty (Units)</label>
     <input type="hidden" value="" id="hdfMaxQty" />
    </th>
    <th>
     <label id="Label3">Rate</label>
    </th>
    <th>
     <label id="Label4">Amount</label>
    </th>
    <th width="5%"> 
    </th>
   </tr>
  </thead>
  <tbody>

   <tr featureid="0" style="vertical-align: top;">
    <td class="text-center">
     <span id="SrNo_1" class="SrNo">1</span>
    </td>
    <td>
     @*<textarea rows="2" cols="75" id="txtdescription_1" placeholder="e.g. project go live (10 %)"></textarea>*@
     <input type="text" name="Description" id="txtDescription_1" placeholder="e.g. Project Go Live (10 %)" style="width: 435px;" />
    </td>
    <td>
     <select id="optMilestone" style="width: 120px;" class="milestone"   onchange="FillMilestoneAmount($(this).val(),$(this).closest('tr').prevAll('tr').length + 1)">
      <option value="0" itemid="" >Select</option>

     </select>
    </td>

    <td>
     <input type="text" id="txtQuantity_1" class="Quantity" style="width: 85px; text-align: right;" placeholder="e.g. 1" />
    </td>
    <td>
     <input type="text" id="txtPrice_1" onkeyup="CalculateAmount(this);" class="Price" style="width: 85px; text-align: right;" placeholder="e.g. 5000" />
    </td>
    <td>
     <input type="text" id="txtTotal_1" class="Amount" readonly="true" style="width: 95px; text-align: right;" />
    </td>
    <td width="5%">
     <a href="javascript:void(0)" id="lnkAdd" class="icon-add" onclick="AddFeatureRow();">
      @*<i class="icon-add"></i>*@
     </a>
    </td>
     @{
      index = index + 1; /*Resoution of control duplicate id when we are creating clone of the hidden row*/
   }
   </tr>
   <tr featureid="0" style="display: none; vertical-align: top;">
    <td class="text-center">
     <span id="SrNo0_1" class="SrNo">1</span>
    </td>
    <td>
     @*<textarea rows="2" cols="75" id="txtDescription0_1" placeholder="e.g. Project Go Live (10 %)"></textarea>*@
     <input type="text" name="Description" id="txtDescription0_1" placeholder="e.g. Project Go Live (10 %)" style="width: 435px;" />
    </td>
     <td>
     <select id="sel0_1" style="width: 120px;" class="milestone"   onchange="FillMilestoneAmount($(this).val(),$(this).closest('tr').prevAll('tr').length + 1)">
      <option value="0" itemid="" >Select</option>
     </select>
    </td>
    <td>
     <input type="text" id="txtQuantity0_1" class="Quantity" style="width: 85px; text-align: right;" placeholder="e.g. 1" />
    </td>
    <td>
     <input type="text" id="txtPrice0_1" onkeyup="CalculateAmount(this);" class="Price" style="width: 85px; text-align: right;" placeholder="e.g. 5000" />
    </td>
    <td>
     <input type="text" id="txtTotal0_1" class="Amount" readonly="true" style="width: 95px; text-align: right;" />
    </td>
    <td width="5%">
     <a href="javascript:void(0)" title="Delete" onclick="FeatureRemoveRow(this)" id="lnkDelete0_1" class="btnDelete">
      @* <i class="icon-remove"></i>*@
     </a>
    </td>
     @{
      index = index + 1; /*Resoution of control duplicate id when we are creating clone of the hidden row*/
   }
   </tr>
  </tbody>
</table>
</div>

Monday, 9 December 2013

Change TabIndex on Hide/Show Elements - JQuery

Hello Friends,

This scenario comes sometimes. when we need conditional tabbing with selecting some option will hide some elements or show some elements so in that case we need to change TabIndex dynamically like the following image.
When I select Cat2 in Dropdownlist all textboxes are visiable.

Now when I select Cat3 Textbox 4,6 and 9 are invisiable and Textbox7 comes in place of Textbox4. so after Textbox3 Cursor should move to Textbox7 and then Textbox5. so I need to change Tabindex of Textbox7 to 4.

for that I am using JQuery's nextuntil() function. so I can replace the following elements of Hidden Element to new TabIndex into the same div.

Here in Last Element of the Div I had added class="last" attribute. so JQuery function will stop assigning new Index to the Elements.

Monday, 28 October 2013

Add Textboxes Dynamically and get the values

Hello Friends,
Sometimes we need to add the textboxes dynamically and get the values from that.

first add the code at design side.

<ul>
     <li class="websiteadd">
                        <label for="user_category">
                            Websites<sup>*</sup></label>
                        <div class="inputbox" style="width: 320px; height: 28px;">
                            <asp:TextBox ID="txtWebSite" MaxLength="50" Style="height: 28px; width:210px;" runat="server"
                                CssClass="input-text wid text txtWebSite addwebsite"></asp:TextBox>
                            <asp:Button CssClass="add-btn" ID="btnAddnewWebsite" OnClientClick="return fnAddCustomWebsite();"
                                runat="server" Text="+Add" />
                        </div>
                    </li>
                    <li class="websitedelete">
                        <asp:Panel ID="panelWebSite" CssClass="panelWebSite" runat="server" Style="margin-left: 131px;">
                        </asp:Panel>
                    </li>
                </ul>

Then add the script in the head part

Then create the method to get the values as follows

public void AddWebSites()
        {
            try
            {
                UserWebsiteService objuserwebsiteservice = new UserWebsiteService();

                foreach (string key in Request.Params.AllKeys)
                {
                    if (key.Contains("txtnewAddWeb"))
                    {
                        string lblnewweb = Request.Params[key].ToString();
                        GEN_UserWebSite objNewWeb = new GEN_UserWebSite();
                        objNewWeb.CreatedBy = ProjectSession.UserID;
                        objNewWeb.CreatedDate = DateTime.Now;
                        objNewWeb.WebSiteName = lblnewweb.Trim();
                        objNewWeb.UserID = ProjectSession.UserID;
                        objuserwebsiteservice.InsertGEN_UserWebSite(objNewWeb);

                    }
                }
            }
            catch (Exception ex)
            {
                ErrHandler.WriteError(ex);
            }
        }

Now call this function on submit button.

Maintain Page Scrol after Postback on the page

Hello friends,

Sometimes we need to maintain scroll position of the page after postback due to dropdown change or button click in that case follow the code.

if Dropdown Control : onChange="ab();"
if Button Control : onClientClick ="ab();"

next take one hidden field to maintain scrol value.

<asp:HiddenField ID="TOS" runat="server" />

put the script in the head part.

finally register the scrol function in last line of the event in code behind page.

ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), "JavaScript:scrol();", true);

Friday, 25 October 2013

Form Validation Using jQuery and Regular Expressions

Regular expressions offer an extremely flexible and powerful way of adding validation to your website forms. Combined with jQuery, it allows you to ensure that data sent to the server matches all of your requirements.

In this post I have included several example regular expressions that we have used in our web design projects for validating form input.

For this tutorial we assume you know how to create the HTML form and add jQuery to your site. For samples you can refer to previous posts – check passwords using jQuery, email validation using jQuery or view the demo form.

1 – Validates Numeric Characters Only
Accepts only 0 – 9
$('#TxtUpdateTime').keyup(function () {
            var val = $(this).val();
            var orignalValue = val;
            val = val.replace(/[0-9]*/g, "");
            if (val != '') {
                orignalValue = orignalValue.replace(/([^0-9].*)/g, "")
                $(this).val(orignalValue);
            }
        });

2 - No Special Characters
Allows only letters, numbers and spaces. All other characters will return an error.

$('.keyup-characters').keyup(function() {
$('span.error-keyup-2').remove();
var inputVal = $(this).val();
var characterReg = /^\s*[a-zA-Z0-9,\s]+\s*$/;
if(!characterReg.test(inputVal)) {
$(this).after('<span class="error error-keyup-2">No special characters allowed.</span>');
}
});

3 – Maximum Of 8 Characters
Allows all characters up to a maximum of 8. Useful for passwords, etc. The value can easily be increased/descreased by changing the {0,8}

$('.keyup-limit-8').keyup(function() {
$('span.error-keyup-3').remove();
var inputVal = $(this).val();
var characterReg = /^([a-zA-Z0-9]{0,8})$/;
if(!characterReg.test(inputVal)) {
$(this).after('<span class="error error-keyup-3">Maximum 8 characters.</span>');
}
});

4 - Check Email Address Format
This is a standard regular expression, which is used to validate email addresses to ensure they follow the standard format:

$('.keyup-email').keyup(function() {
$('span.error-keyup-7').remove();
var inputVal = $(this).val();
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(inputVal)) {
$(this).after('<span class="error error-keyup-7">Invalid Email Format.</span>');
}
});

4 - Regex for float numbers

/^[-+]?[0-9]*\.?[0-9]+$/

Wednesday, 25 September 2013

Fix the Filter on top while scrolling the page

Hello All,
Some times we need to fix the filter on the top of the screen at the time we scroll the page. for that simply we need to change the css of that div in which we placed the filter. I have also fixed the header of the gridview.
For this code as follow

and code for my filter and gridview is

<div id="getFixed" style="background-color: Yellow; height: 30px; top: 10px;">
            Filter :
            <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button id="btnSearch" runat="server" Text="Search" />
</div>

<asp:GridView ID="gvImage" runat="server" AutoGenerateColumns="false" ClientIDMode="Static" BackColor="White">
                            <HeaderStyle CssClass="FrozenHeader" />
                            <Columns>
                                <asp:TemplateField HeaderText="Sr No." HeaderStyle-HorizontalAlign="Center">
                                    <HeaderStyle Width="100" />
                                    <ItemStyle HorizontalAlign="Center" Width="100" />
                                    <ItemTemplate>
                                        <asp:Label ID="lblID" CssClass="lblID" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <Columns>
</asp:GridView>

Tuesday, 18 June 2013

Check for Duplicate Email ID using JQuery

Sometimes we need to check for duplicate EmailID or Username on Keypress. So this code will help you to check for duplicate and valid EmailID in your database.

First create teh textbox to enter the Email ID.

<asp:TextBox ID="txtEmail" runat="server" CssClass="input-text email duplicate-email txtemail" MaxLength="100"></asp:TextBox>

Now add the following code to your header part.

Now add the webmethod tobe called by AJAX. Here DubplicateEmailID is a WebMethod. I used LINQ method I written the query in CheckDuplicateByEmailID method which will return true or false.

[WebMethod]
        public static bool DuplicateEmailID(string EmailID)
        {
            try
            {
                UserInfoService objUserInfoService = new UserInfoService();
                bool IsExist = objUserInfoService.CheckDuplicateByEmailID(EmailID.Trim());
                return IsExist;
            }
            catch (Exception ex)
            {
                ErrHandler.WriteError(ex);
                return false;
            }
        }

Friday, 17 May 2013

Change color statuswise in GridView using JQuery

Sometimes we need to change color into Gridview statuswise. we can use RowDataBound event to do this but this can be easily done using JQuery.

Here is the code to do so...

Here in $('.Users') is a CssClass name of Gridview.

Give the CssClass attribute to your Gridview control like this. And use TemplateField and use Label element for that column.

<asp:GridView ID="gvUserList" runat="server" CssClass="Users"></asp:GridView>

If you are using BoundField in a Gridview control then you can try the following.

Note : Here nth-child(5) is column number and it starts from 1 not 0.

Saturday, 6 April 2013

From Date - To Date with JQuery

In this post I will explain to have Jquery Date Picker for FromDate & ToDate with MinDate, MaxDate Validation.

Add two Textbox in your page.

From Date :

<asp:TextBox ID="txtFDate" runat="server" ClientIDMode="Static"></asp:TextBox>

To Date :

<asp:TextBox ID="txtTDate" runat="server" ClientIDMode="Static"></asp:TextBox>

then add the following script in your head part.

$(document).ready(function () {

DatePick();

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(DatePick);

});

function DatePick() {

$("#txtFDate").datepicker({

buttonImage: '',

buttonImageOnly: true,

changeMonth: true,

format: 'dd/MM/yyyy',

changeYear: true,

showOn: 'both',

onSelect: function (selectedDate) {

$("#txtTDate").datepicker("option", "minDate", selectedDate);

}

});

$("#txtTDate").datepicker({