sábado, 16 de junio de 2012

Utilizando JQUERY básico

Para utilizar JQUERY debemos contar con lo siguiente:

Descargar Librerias JQUERY: http://jqueryui.com/download
Importar las librerías desde el JSP. Ejm.:
<script src="scripts/jquery-1.7.2.js">
</script>
<script src="scripts/jquery-ui-1.8.20.custom.js">
</script>
Para obtener valor de un textbox:
Utilizando el Class name:
Por ejemplo:
<input type="textbox" class="nombrecontrol">
</input>
Se obtiene : $(".nombrecontrol").val();
Utilizando el ID de control
Por ejemplo:

<input type="textbox" id="nombrecontrol">
</input>
Se obtiene : $("#nombrecontrol").val();
Para un select o lista desplegable:
Por ID del control: $('#cboDestino option:selected').val();
Por Class name del control: $('.cboDestino option:selected').val();

Mostrando objeto JSON en tabla HTML


Permite crear una tabla standard con filas y columnas desde un objeto JSON.Se importaron las siguientes librerías de proyecto.
<script src="scripts/json.htmTable.js">
</script>
<link rel="stylesheet" href="css/default.css">

 Se utiliza la función CreateTableView?? utilizando 3 parámetros:objArray = Objeto array tipo JSONTheme (Opcional) = nombre del theme o estilo a elecciónHeader (Opcional) = True si se quiere mostrar la cabecera de la tabla.

function CreateTableView(objArray, theme, enableHeader) {
    // set optional theme parameter
    if (theme === undefined) {
        theme = 'mediumTable'; //default theme
    }
 
    if (enableHeader === undefined) {
        enableHeader = true; //default enable headers
    }
 
    // If the returned data is an object do nothing, else try to parse
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
 
    var str = '<table class="' + theme + '">';
 
    // table head
    if (enableHeader) {
        str += '<thead><tr>';
        for (var index in array[0]) {
            str += '<th scope="col">' + index + '</th>';
        }
        str += '</tr></thead>';
    }
 
    // table body
    str += '<tbody>';
    for (var i = 0; i < array.length; i++) {
        str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
        for (var index in array[i]) {
            str += '<td>' + array[i][index] + '</td>';
        }
        str += '</tr>';
    }
    str += '</tbody>'
    str += '</table>';
    return str;
}

Utilizando Include en JSP



La sentencia include nos permite incrustar los jsp y mediante AJAX poder actualizar el div que necesitemos sin recargar toda la página.
El código el el siguiente:


<include page="nombredemijsp.jsp">
</include>