All geek questions in one place

JQuery does not work with runat = "server"

My following code works fine when used in HTML. The same code that I tried to put on the form, and it stops working. How to fix this problem?

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

When the form tag is removed, it starts working again.

+6
source share
3 answers

When you have the inside, it automatically submits the form. Replace

 <button>Add a line</button>

from

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

and thus the browser does not publish the form when clicked.

Remember also to change the jQuery selector from

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

to something like

 $(':button').click(function () {
+2
source

For .NET 4.0, add ClientIDMode Static so that the tags appear on the client side, as shown on the server side.

Sort of

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

For old .net, use '<% = Control.ClientID%>' in your jQuery / Javascript code whenever you reference a control

Sort of

  '<%= form1.ClientID %>'
+6
source

Hint: look at the code identifier in the final HTML.

This should give you an idea of ​​what is going on. There are a number of solutions for this, but it depends on which version of .net you are using.

+2
source

Source: https://habr.com/ru/post/904087/

More articles:


All Articles