Tabla de Pendientes con JS/JQuery

En esta publicación vamos a realizar una pequeño y fácil script en JavaScript que realizara el trabajo de una pequeña tabla de pendientes.

Este ejercicio es bastante útil, no necesariamente por que vayamos a incluir una tabla de pendientes en una de nuestras páginas web sino porque podemos sacarle algunas ideas para otras cosas que deseemos realizar solo basta con cambiar la idea principal y aunque no se quede guardado ya que no haremos uso de base de datos es un ejercicio que podría resolverte varias dudas con respeto a la creación de nuevos elementos hijo o su eliminación.

Pasos:

  1. En el el head le agregamos el <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> para poder hacer el query que necesitamos.
  2. Creamos un archivo html en este tendremos una entrada de tipo texto y le podremos un id = textoTarea, este input nos servirá para ingresar el texto de nuestro pendiente. Creamos un botón el cual le podremos un id = btnAniadir el cual tiene como texto Añadir, como el texto lo dice este botón contendrá el evento para añadir el pendiente o tarea.
  3. Aquí podría ser de diferentes maneras como crear la tabla completamente desde el script, pero aquí crearemos el encabezado de la tabla desde el html, creamos una tabla la cual tendrá como id= TablaPendientes.
    1. Dentro de la tabla creamos el cuerpo de la tabla mediante la etiqueta <body> y creamos la fila del encabezado con la etiqueta tr el cual tiene definido class = “FileRen”, este encabezado tendrá 3 columnas Fecha, Pendiente, Estado y no constará de ningún id.
  4. Darle diseño, le daremos un pequeño diseño a nuestra tabla para que no se vea tan feo.
  5. Ya en el script instanciamos la variable btnAniadir la cual obtendrá el elemento botón que creamos, textoPendiente que obtendrá el elemento de la entrada de tipo texto, tbody obtendrá el cuerpo de la tabla que servirá para agregarle los renglones que vamos creando, ren obtendrá los renglones y realizara un query, checa obtendrá los elementos qie tienen estado para realizar un query y una variable de tipo fecha para sacar la fecha del dia.
  6. Creamos un evento a btnAniadir en el cual cada que demos clic crearemos un TR y sus respectivos TD, el primer TD le creamos un nodo texto donde sacamos la fecha por medio de la variable fecha que creamos previamente, el segundo TD le creamos un nodo texto apartir del texto que ingresamos, y al tercer le creamos un nodo texto con la palabra “PENDIENTE” y le agregamos un atrubuto “class” de nombre “estado” para crearele un query a ese TD, los tres TD se los agregamos a el TR y este TR se los agregamos al cuerpo de la tabla tbody.
  7. En el mismo evento de btnAniadir creamos un query para la variable ren que es la que tiene todos los elementos que tienen la clase = “FilaRen” eliminar cada vez que un renglón tenga doble clic
  8. Creamos otro query con la variable checa que es la que obtiene todos los elementos que tienen la clase = “estado”, para que cada que le demos clic a la ultima celda de cada fila cambie su estado.

 

See the Pen
JzaNJX
by Jonathan Eduardo (@JhonQuistiano)
on CodePen.

Ajax Popup “Procesando”

Una forma de “controlar” la paciencia de los usuarios al estarse ejecutando procesos dentro del servidor, es la de mostrar un popup de progreso, deshabilitando la interaccion de cualquier control de la aplicacion.

Comenzamos con el codigo JavaScript que mostrara el Popup

<script type=”text/javascript”>
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args)
{
      // muestra el popup
      $find(ModalProgress).show();
}
function endReq(sender, args)
{
      // esconde el popup
      $find(ModalProgress).hide();
}

var ModalProgress = ‘<%=ModalProgress.ClientID%>’;
</script>

El evento beginRequest se provoca antes de que se inicie el procesamiento de una devolución de datos asincrónica y se envíe la devolución (postback) al servidor.
El evento endRequest se provoca después de que finalice una devolución de datos asincrónica y se haya devuelto el control al explorador.
Si se observa en las funciones de JavaScript se hace Referencia a la variable ModalProgress la cual debe ser creada desde el code-behind para que luego pueda ser utilizada por javascript.

Luego de esto crearemos el control popup.

<asp:Panel runat=”server” CssClass=”modalPopup” ID=”panelUpdateProgress”>
<asp:UpdateProgress ID=”UpdatePrg” DisplayAfter=”0″ runat=”server”>
<ProgressTemplate>
<div style=”position:relative; top:50%; text-align:center; height:100px;”>
<img src=”../../../images/loading.gif” style=”vertical-align:middle” alt=”Procesando…” width=”90px” />
Procesando ….
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<asp:ModalPopupExtender runat=”server” ID=”ModalProgress” TargetControlID=”panelUpdateProgress” PopupControlID=”panelUpdateProgress”
BackgroundCssClass=”modalBackground”>
</asp:ModalPopupExtender>

Y por ultimo, el control que iniciara el proceso.

<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>
<asp:Button ID=”Boton_guardar” runat=”server” Text=”Guardar”
ValidationGroup=”LoginUserValidationGroup” onclick=”Boton_guardar_Click” />
   
</ContentTemplate>
</asp:UpdatePanel>

Es importante que el boton este dentro de un PanelUpdate, ya que asi ajax sabra que es este el evento que procesara asincronicamente.

Fuente: Blog Guillermo G.

Gracias