javascript deja de funcionar cuando la pagina hace postback

Question

Buenas tardes tengo el siguiente código que uso para sumar el total de personas que hay en las 4 cajas de texto y la sumatoria total la muestro en la caja de texto "txtTotal", todo funciona bien mientras la pagina no hace postback, cabe mencionar que los controles están en un updatepanel.

Agradezco su valiosa ayuda. 

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var textBox1 = $('input:text[id$=txtNHombres]').keyup(foo);
            var textBox2 = $('input:text[id$=txtNMujeres]').keyup(foo);
            var textBox5 = $('input:text[id$=txtNJovenes]').keyup(foo);
            var textBox4 = $('input:text[id$=txtNNinos]').keyup(foo);
          
            function foo() {
                var value1 = textBox1.val();
                var value2 = textBox2.val();
                var value3 = textBox5.val();
                var value4 = textBox4.val();
                var sum = add(value1, value2, value3, value4);
                $('input:text[id$=txtTotal]').val(sum);
            }

            function add() {
                var sum = 0;
                for (var i = 0, j = arguments.length; i < j; i++) {
                    if (IsNumeric(arguments[i])) {
                        sum += parseFloat(arguments[i]);
                    }
                }
                return sum;
            }
            function IsNumeric(input) {
                return (input - 0) == input && input.length > 0;
            }
        });
    </script>

Answer 1

Buenas!

El UpdatePanel no debe influir en la ejecución de código cliente. ¿Puedes dar más detalles de que es exactamente que sucede? ¿Se muestra algún error? ¿Falla en algún punto concreto?

Gracias,

---

Francesc Jaumot Peña www.francescjaumot.net www.geeks.ms/blogs/fjaumot

Answer 2

hola

es que el UpdatePanel si hace postback, no de la pagina completa, pero si de la seccion que abarca su defincion, esa region si se actualiza

si usas jquey bindea los evento usando el "on()"

http://api.jquery.com/on/

si unes los keypress usando el on() no deberias tener este problema

o sea

$('input:text[id$=txtNHombres]').on("keypress", foo);

---

igualmente yo suelo usar para seleccionar

$("[id*='txtNHombres']")

saludos

---

Leandro Tuttini

Blog
Buenos Aires
Argentina

Answer 3

Hola,

Ocurre lo siguiente, cada vez que el usuario teclea un numero en cada caja de texto suma todos los valores que hay en todas las caja y pone el resultado en la caja de texto llamada "txtTotal". Mientras la pagina no hace postback el JavaScript funciona a la perfección pero cuando la pagina hace postback los valores que están en las cajas de texto se pierden y el JavaScript no funciona mas.  

Answer 4

Mientras la pagina no hace postback el JavaScript funciona a la perfección pero cuando la pagina hace postback los valores que están en las cajas de texto se pierden y el JavaScript no funciona mas.  

Entiendo que al decir "la pagina hace postback" te refieres a un postback parcial y no a un postback total (se recarga solo el contenido del updatepanel y no la página completa). Cuando esto ocurre, se borra completamente el contenido del updatepanel y se vuelve a crear el contenido mediante HTML recibido desde el servidor. Al destruir el contenido, se pierden todos los eventos que habías conectado a esos controles, y como no se recarga la página, no se vuelve a ejecutar el script que hay al principio para conectar esos eventos. Por eso deja de funcionar.

El remedio más sencillo es el que propone Leandro, es decir, usar el "on" de jQuery (nuevo en versión 1.7, no lo podrás usar si usas la 1.4 que venía por defecto en VS2008). Usa el "on" para conectar el keyup de todos los textboxes contenidos dentro de un contenedor común (poniéndoles si es necesario un class que los distinga del resto). Usa un contenedor que no se destruya durante los postbacks del updatepanel, por ejemplo, un div alrededor del mismo.

Answer 5

Hola Leandro,

Probé lo que tu me dijiste:

var textBox1 = $('input:text[id$=txtNHombres]').on("keypress", foo);
var textBox2 = $('input:text[id$=txtNMujeres]').on("keypress", foo);
var textBox5 = $('input:text[id$=txtNJovenes]').on("keypress", foo);
var textBox4 = $('input:text[id$=txtNNinos]').on("keypress", foo);

Pero al momento de cargar la pagina me sale el siguiente error: "Error en tiempo de ejecución de JavaScript: El objeto no acepta la propiedad o el método 'on'".

Gracias de antemano.

Answer 6

El objeto no acepta la propiedad o el método 'on'".

Fíjate en la versión de jQuery que estás usando. El "on" no estaba en las versiones antiguas, necesitarás actualizarlo (creo que la mínima versión necesaria es la 1.7 si no recuerdo mal).

Answer 7

Hola Leandro,

Ya actualice jQuery a la versión 2.0.3  y ya puedo usar el "on" pero igual que antes cuando la pagina hace postback pierdo la funcionalidad del JavaScript.

Answer 8

¿Has visto lo que te puse en una respuesta anterior? El "on" no debes ponerlo directamente sobre los controles que se destruyen durante el postback, sino sobre un contenedor que dentro tenga esos controles y que sobreviva al postback.

$("#contenedor").on("keyup", ".sumar", function(event){...});

"contenedor" sería el ID de un <div> (por ejemplo) que pondrías alrededor del UpdatePanel, y dentro del UpdatePanel a los textboxes que tienen que sumarse les pondrías class="sumar". Con eso funcionaría este "on".

Answer 9

pero igual que antes cuando la pagina hace postback pierdo la funcionalidad del JavaScript.

como que la pagina hace postback ? no era que usabas un updatepanel ?

si usabas un UpdatePanel la pagina no hace postback, es la seccion del updatepanel la que lo hace

recuerda que el javascript que definas debe estar por fuera del updatepanel

ademas cuando haces esto

var textBox1 = $('input:text[id$=txtNHombres]').on("keypress", foo);

se supone que no igualas a ningun control porque estas asignando un evento

 $('input:text[id$=txtNHombres]').on("keypress", foo);

en este punto sigue la recomendacion de Alberto

saludos

---

Leandro Tuttini

Blog
Buenos Aires
Argentina

Answer 10

Los textbox están adentro de un Updatepanel, y el JavaScript esta afuera del Updatepanel

Answer 11

Muchas gracias Leandro.

Answer 12

Si que influye el autopostback en el codigo cliente.

Answer 13

Los controles al estar dentro de un UpdatePanel, al momento de realizar un PostBack, su contenido se vuelve a recrear, por lo cual los textbox ya no tendran la funcionalidad keyup de javascript con el cual lo inicializaste.

Una solución seria que coloques el codigo de inicializacion de javascript dentro del UpdatePanel:

<head>
	<script>
	function foo() {
		var value1 = textBox1.val();
		var value2 = textBox2.val();
		var value3 = textBox5.val();
		var value4 = textBox4.val();
		var sum = add(value1, value2, value3, value4);
		$('input:text[id$=txtTotal]').val(sum);
	}
	function add() {
		var sum = 0;
		for (var i = 0, j = arguments.length; i < j; i++) {
			if (IsNumeric(arguments[i])) {
				sum += parseFloat(arguments[i]);
			}
		}
		return sum;
	}
	function IsNumeric(input) {
		return (input - 0) == input && input.length > 0;
	}
	</script>
	</head>
	<body>
	<form>
	<asp:UpdatePanel .....>
	<ContentTemplate>
	<script type="text/javascript">
        $(function () {
            var textBox1 = $('input:text[id$=txtNHombres]').keyup(foo);
            var textBox2 = $('input:text[id$=txtNMujeres]').keyup(foo);
            var textBox5 = $('input:text[id$=txtNJovenes]').keyup(foo);
            var textBox4 = $('input:text[id$=txtNNinos]').keyup(foo);
		}
	</script>
	</ContentTemplate>
	</asp:UpdatePanel>
	</form>
	</body>
	

O lo otro seria que inicialices el javascript como atributo del control, y en el metodo foo hagas la referencia del control para obtener los valores

En el Head
            function foo() {
                var value1 = $('#txtNHombres').val();
                var value2 = $('#txtNMujeres').val();
                var value3 = $('#txtNJovenes').val();
                var value4 = $('#txtNNinos').val();
                var sum = add(value1, value2, value3, value4);
                $('#txtTotal').val(sum);
            }

En el Control

<asp:TextBox id="txtNHombres" runat="server" onkeyup"javascript:foo();">

Espero que sea de ayuda.

Saludos

John