none
javascript deja de funcionar cuando la pagina hace postback RRS feed

  • Pregunta

  • 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>


    • Editado daedwo martes, 1 de octubre de 2013 22:24
    martes, 1 de octubre de 2013 22:23

Respuestas

  • ¿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".
    • Marcado como respuesta daedwo jueves, 3 de octubre de 2013 16:36
    jueves, 3 de octubre de 2013 5:12

Todas las respuestas

  • 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

    martes, 1 de octubre de 2013 22:41
  • 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


    martes, 1 de octubre de 2013 22:45
  • 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.  

    miércoles, 2 de octubre de 2013 16:15
  • 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.

    miércoles, 2 de octubre de 2013 16:33
  • 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.

    miércoles, 2 de octubre de 2013 16:33
  • 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).

    miércoles, 2 de octubre de 2013 16:45
  • 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.

    miércoles, 2 de octubre de 2013 21:15
  • ¿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".
    • Marcado como respuesta daedwo jueves, 3 de octubre de 2013 16:36
    jueves, 3 de octubre de 2013 5:12
  • 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


    jueves, 3 de octubre de 2013 8:20
  • Los textbox están adentro de un Updatepanel, y el JavaScript esta afuera del Updatepanel

    jueves, 3 de octubre de 2013 16:34
  • Muchas gracias Leandro.
    jueves, 3 de octubre de 2013 16:38
  • Si que influye el autopostback en el codigo cliente.
    lunes, 18 de abril de 2016 10:09
  • 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

    lunes, 18 de abril de 2016 15:15