(jQuery DatePicker & AJAX Modal Popup Extender) – AJAX Modal Popup Extender giúp người lập trình tạo Popup nhanh chóng và dễ dàng. Còn jQuery DatePicker giúp người sử dụng chọn ngày tháng cho Textbox thuận tiện mà không phải nhập thông tin bằng tay. Tuy nhiên khi sử dụng kết hợp giữa AJAX Modal Popup Extender và jQuery DatePicker lại phát sinh một vấn đề làm đau đầu người phát triển. Đó là khi chọn DatePicker, màn hình chọn thường nằm ở phía dưới ModalPopupExtender nên rất bất tiện cho người sử dụng khi lựa chọn. Vậy có cách nào để có thể kết hợp AJAX Modal Popup Extender và jQuery DatePicker mà vẫn lựa chọn được ngày tháng bình thường không? Dưới đây là các xử lý để có thể kết hợp AJAX Modal Popup Extender và jQuery DatePicker với nhau.
- B1: Tạo Project trong Microsoft Visual Studio 2010
- B2: Download file jquery-ui.css tại địa chỉ:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
- B3: Copy file file jquery-ui.css vào thư mục Styles trong Project vừa tạo.
- B4: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head
<link href="~/Styles/jquery-ui.css" rel="stylesheet"type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"type = "text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"type = "text/javascript"></script>
- B5: Mở file Default.aspxdưới dạng HTML và nhập mã HTML
<%@ PageTitle="jQuery DatePicker & AJAX Modal Popup Extender" Language="vb" MasterPageFile="~/Site.Master"AutoEventWireup="false"EnableEventValidation="false" CodeBehind="Default.aspx.vb" Inherits="jQueryDatePickerinAjaxModalPopupExtender._Default"%>
<%@ RegisterTagPrefix="cc1"Assembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"%>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1"EnablePageMethods ="true" runat="server">
</asp:ScriptManager>
<h4>
jQuery DatePicker & AJAX Modal Popup Extender
</h4>
<script type="text/javascript">
$(function () {
$("[id$=txtBirthday]").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true
});
});
</script>
<asp:UpdatePanel ID="updatePanel"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2"cellspacing="3"width="42%">
<tr>
<td>
<div class="panel panel-default">
<div class="panel-heading">
<asp:label id="lblHeader"runat="server"Text="CONTACTS"></asp:label>
</div>
<div class="panel-body">
<table cellpadding="2"cellspacing="3"width="100%">
<tr>
<td>
<asp:LinkButton id="cmdAdd" runat="server"CssClass="btn btn-small" CausesValidation="false">
<i runat="server"class="icon-add"></i> <asp:label id="lblPopup" runat="server" Text="Add"></asp:label>
</asp:LinkButton>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlpopup"runat="server"style="display:none">
<asp:UpdatePanel ID="updatePanelPopup"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<asp:Button id="cmdShowPopup"runat="server"style="display:none" />
<cc1:ModalPopupExtenderID="ModalPopupExtender_Popup"runat="server"TargetControlID="cmdShowPopup"X="650"Y="180"
PopupControlID="pnlpopup"CancelControlID="cmdClose"Drag="True"/>
<divclass="modal"style="width:600px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button"id="cmdClose"runat="server"causesvalidation="false"class="close"data-dismiss="modal"aria-hidden="true">x</button>
<h4 class="modal-title">
<asp:label id="lblTitle"runat="server"Text="Edit Contact"></asp:label>
</h4>
</div>
<div class="modal-body">
<table width="100%"cellpadding="2"cellspacing="3">
<tr>
<td colspan="4" align="left" style="padding:2px;">
<asp:Label ID="lblMessage"CssClass="popup_Message"runat="server"></asp:Label>
</td>
</tr>
<tr>
<td colspan="4">
<asp:Label ID="lblItemID" Visible="false" runat="server"/>
</td>
</tr>
<tr>
<td>
<asp:label id="plContactCode"runat="server"CssClass="CRM_Label"Text="Contact Code (*)"></asp:label>
</td>
<td>
<asp:TextBox ID="txtContactCode"CssClass="form-control"runat="server"Width="150px"></asp:TextBox>
<asp:RequiredFieldValidator ID="valContactCode" runat="server" ControlToValidate="txtContactCode" Display="dynamic" ErrorMessage="Enter Contact Code"></asp:RequiredFieldValidator>
</td>
<td>
<asp:Label ID="plContactName"runat="server"CssClass="CRM_Label"Text="Contact Name (*)"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtContactName"CssClass="form-control"runat="server"width="150px"></asp:TextBox>
<asp:RequiredFieldValidatorID="valContactName"runat="server"ControlToValidate="txtContactName"Display="dynamic"ErrorMessage="Enter Contact Name"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:label id="plBirthday" runat="server" Text="Birthday"></asp:label>
</td>
<td>
<asp:TextBox ID="txtBirthday"CssClass="form-control"runat="server"Width="85px"></asp:TextBox>
</td>
<td>
<asp:Label ID="plEmail"runat="server"CssClass="CRM_Label"Text="Email"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtEmail"CssClass="form-control"runat="server"width="150px"></asp:TextBox>
<asp:regularexpressionvalidatorid="cvEmail"runat="server"ErrorMessage="Error Email" CssClass="Normal" ControlToValidate="txtEmail" Display="Dynamic" ValidationExpression="[\w\.-]+(\+[\w-]*)?@([\w-]+\.)+[\w-]+"></asp:regularexpressionvalidator>
</td>
</tr>
<tr>
<td>
<asp:label id="plAddress"runat="server"Text="Address"></asp:label>
</td>
<td colspan="3">
<asp:TextBox ID="txtAddress"CssClass="form-control"runat="server"Width="440px"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<div class="btn-group">
<asp:LinkButton id="cmdSave"runat="server"CssClass="btn btn-small" CausesValidation="true">
<i runat="server"class="icon-update"></i> <asp:label id="lblSave" runat="server" Text="Update"></asp:label>
</asp:LinkButton>
<asp:LinkButton id="cmdCancel"runat="server"CssClass="btn btn-small" Causesvalidation="false">
<i runat="server"class="icon-close"></i> <asp:label id="lblClose" runat="server" Text="Close"></asp:label>
</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Content>
- B6: Mở file jquery-ui.css, tìm đến .ui-datepicker bổ xung thêm thuộc tính z-index:999999 !important;
Sau khi bổ xung thuộc tính ta có thông tin đầy đủ
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; position: relative; z-index:999999 !important; }
Chúc các bạn thành công!
Quang Bình
0 comments Blogger 0 Facebook
Post a Comment