2011-12-19 9 views
6

Mi código siguiente funciona bien cuando se usa en HTML. El mismo código intenté colocarlo dentro de un formulario y dejó de funcionar. ¿Cómo arreglar este problema?jQuery no funciona con runat = "servidor"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script src="jquery-1.7.1.min.js" ></script> 
<title>Chat scroll test</title> 
<style type="text/css"> 
#chat 
{ 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
    overflow-y: auto; 
} 
</style> 
<script> 
    jQuery(document).ready(function ($) { 
     monitor = function() { 
      var $this = $(this), 
     wrap = $this.find('.wrapper'), 
     height = $this.height(), 
     maxScroll = wrap.height() - height, 
     top = $this.scrollTop(); 
      if (maxScroll === top) { 
       $this.addClass('atBottom'); 
      } else { 
       $this.removeClass('atBottom'); 
      } 
     } 
     window.setInterval(function() { 
      monitor.call($('#chat').get(0)); 
     }, 350); 
     $('#chat').bind('addMessage', function (e, message) { 
      var $this = $(this), 
     top = $this.scrollTop(), 
     scroll = $this.hasClass('atBottom'); 
      $this.find('.wrapper').append(message); 
      if (scroll) { 
       var wrap = $this.find('.wrapper'), 
      height = $this.height(), 
      maxScroll = wrap.height() - height 
       $this.scrollTop(maxScroll); 
      } 
     }) 
     $('button').click(function() { 
      $('#chat').trigger('addMessage', 'asdgagasdg<br/>'); 
     }); 
    }); 
</script> 
</head> 

<body> 
<form id="form1" runat="server"> 
<div id="chat"> 
    <div class="wrapper"> 
     adsgasgda<br/> 
     adsgasg<br/> 
     asd<br/> 
     adsgasgda<br/> 
     adsgasg<br/> 
     adsgasgda<br/> 
     adsgasg<br/> 
     adsgasgda<br/> 
     adsgasg<br/> 
     adsgasgda<br/> 
     adsgasg<br/> 
     adsgasgda<br/> 
     adsgasg<br/> 
     adsgasgda<br/> 
     adsgasg<br/> 
    </div> 
</div> 
<button>Add a line</button> 
</form> 
</body> 
</html> 

Cuando se elimina la etiqueta del formulario, vuelve a empezar a funcionar.

+0

Si nos fijamos en el código HTML de su navegador está todos los ID de elementos como se espera que sean? – Chris

+0

¿Qué versión de .NET estás utilizando? –

+0

sí! todo funciona bien cuando se abre sin la etiqueta

. –

Respuesta

2

Cuando tiene un interior a envía automáticamente el formulario. Sustituir el

<button>Add a line</button> 

con un

<input type="button" value="Add a line" /> 

y de esa manera el navegador no envía el formulario cuando se hace clic.

Recuerde también para cambiar el selector de jQuery de

$('button').click(function() { 

a algo así como

$(':button').click(function() { 
+0

¡Esto funcionó! Gracias Andres. –

2

Sugerencia: Mire los ID del código en el HTML final.

Esto debería darle una idea de lo que está pasando. Hay una serie de soluciones para esto, pero eso depende de qué versión de .net esté usando.

+0

Estoy usando .NET 4.0 y no sé qué es MVC. –

6

Para .NET 4.0 agregue ClientIDMode Static para que las etiquetas aparezcan en el lado del cliente del mismo modo que aparecen en el lado del servidor.

Algo así como

    <form id="form1" runat="server" ClientIDMode="Static"> 

Para uso .net vieja '<% = Control.ClientID%>' en el código jQuery/Javascript cada vez que usted se refiere a un control

Algo así como

    '<%= form1.ClientID %>' 
+0

Esto no funcionó para mí Emmanuel :( –

+0

¿Puede publicar el código HTML generado al ejecutar su código? ¿Qué etiquetas ha agregado 'ClientIDMode =" Static "?? –

+0

Agregando' ClientIDMode = "Static" 'Estoy obteniendo el el mismo resultado que obtuve cuando no está colocado.! –