Bienvenidos

Recuerda que tus comentarios son importantes y recuerda agradecer si te fue útil algun artículo publicado aquí.

L1f3 15 a D@nc3 Flo0r

miércoles, 16 de noviembre de 2016

Hacer funcionar un plugin de Jquery dentro de un UpdatePanel de Ajax

En el siguiente ejemplo vamos a hacer funcionar el plugin DatePicker de Jquery en una página con un Master Page y un UpdatePanel de Ajax.

La razón por la que los plugins de Jquery no te funcionan cuando el master page tiene Ajax es porque la función del Update Panel es precisamente refrescar solamente secciones de la página, mientras que los plugins de Ajax se envian a ejecucion cuando se hace el post back completo.

Este sería el codigo en el master page:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
view raw gistfile1.txt hosted with ❤ by GitHub
Codigo de la página
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="webpage.aspx.cs" Inherits="webpage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<%--Objetos Jquery--%>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<%--Plugin Datepicker--%>
<script>
$(function () {
$("#txtDate").datepicker();
});
</script>
<%--Codigo para hacer funcionar Jquery con Ajax--%>
<script type="text/javascript">
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
$('#txtDate').datepicker();
}
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<h2>Title</h2>
<hr />
<%--El ClientIdMode del textbox debe ser Static--%>
<asp:TextBox ID="txtDate" runat="server" ClientIDMode="Static" AutoCompleteType="Disabled"></asp:TextBox>
</asp:Content>
view raw gistfile1.txt hosted with ❤ by GitHub
Con esta solución ya funcionan los plugins de Jquery en una página con Master Page y UpdatePanel de Ajax

No hay comentarios: