Esto de
jQuery es divertido. Igual de divertido que
javascript pero más fácil.
Hace unos días di una primero
introducción a jQuery e hice mi
primer plugin que llamé macEmulator.
Ahora presento un nuevo plugin que responde a una necesidad real y casi diaria de todo programador en ASP.NET (a no ser que trabaje con
MVC).
Se trata de emular el FindControl de ASP.NET pero con javascript. Vayamos a un ejemplo:
Tenemos un DataList con un ItemTemplate que tiene dos Panels y un Label en cada Panel
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label>
</asp:Panel>
</ItemTemplate>
</asp:DataList>
Esto generará un código HTML que convertirá las Label en elementos <span /> con un identificador de este estilo:
DataList1_ctl00_Label1
Pero yo lo que quiero es acceder a las Label1 por jQuery... ¿cómo lo hago?
No hay una forma directa porque los IDs los genera ASP.NET, pero con el plugin que presento podremos hacer algo como esto:
var controls = $(document).findControl('Label1');
for (i = 0; i < controls.length; i++) { alert(controls[i].innerHTML); }
El plugin no es que sea una obra de arte. Más bien es sencillito, jeje. Lo autoexplican los comentarios:
jQuery.fn.findControl = function(clientId) {
var ids = new Array();
// Para cada elemento que tenga un atributo ID dentro de "this"
$(this).find('*[id]').each(function(i) {
// Si el ID del elemento termina como el clientId, lo añadimos al array
if (this.id &&
(this.id.lastIndexOf(clientId) >= 0) &&
(this.id.lastIndexOf(clientId) == (this.id.length - clientId.length))) {
ids.push(this);
}
});
// Devolvemos el array
return ids;
}
El plugin ya viene con bugs por defecto, como el hecho de que si otro elemento se llamara MyLabel1, el plugin se creería que es Label1... pero bueno, es una primera aproximación.