jQuery asp.net, stopping postback

Question

I have a text box and I want the user to be able to type in the TextBox and when they hit enter, I want jQuery to make a ajax call to a web method.
The problem is, when user hits the enter, the method is called but then the page refreshes due to the return. I've tried using return false but with no results.

Here is the code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=7" />  
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script language="javascript">
   function serviceCall(getText) {          
      $.ajax({
       type: "POST",
       url: 'ActiveDirectoryAutoFillWebService.asmx/TestMethod',
       data: "{'getId':'+ getText +'}",
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function (msg) {
       $("#divResult").html(msg.d);
       },
       error: function (e) {
       $("#divResult").html("WebSerivce unreachable " + e.name + " " + e.message);
     }
   });  
  //  return false;       This does not work      
}
function searchKeyPress(e) {
   if (typeof e == 'undefined' && window.event) { e = window.event; }
       if (e.keyCode == 13) {              
           serviceCall(e)   
           //  return false;       This does not work         
       }          
 }
 </script>
</head>
<body>

<form id="form1" runat="server">      
    <div id="divResult" style="margin-top: 20px;"></div>
    <asp:TextBox ID="tbSearchName" runat="server" onKeyPress="searchKeyPress(event); "></asp:TextBox>      

</form>
</body>
</html>

If anyone knows how I can accomplish this, please let me know.

so you do not want the page refresh ? is that what you want ? — Harish, Apr 22 '13 at 11:31
Are you sure the searchKeyPress is getting as far as serviceCall? Have you tried e.preventDefault() ? — Chris Dixon, Apr 22 '13 at 11:31
opensourcelover: yes, i do not want the whole page to refresh/postback when the user hits the enter key in the textbox. instead, if the user hits enter in the textbox, it should call the serviceCall method (which calls the webmethod) — jason, Apr 22 '13 at 11:33
Chris Dixon: yes, I am sure the serviceCall method gets called (I have placed break points in the JS and code behind. Also, I can see the printed out message prior to the page posting back). I am not aware of e.preventDefault(). Can you explain what this is and how it may help? — jason, Apr 22 '13 at 11:35
Chris, e.preventDefault doesnt seem to work in IE but it did lead me to e.returnValue = false;. If you post this as a response, i can mark it as correct — jason, Apr 22 '13 at 11:42
you're passing event object to jquery post function i.e. serviceCall(e) . comment your Ajax post code and put alert and see what happens. — Nilesh Thakkar, Apr 22 '13 at 11:48

score 3 · Accepted Answer · answered Apr 22 '13 at 11:34

3

Have a look at the following functions on the event object:

In your case, you can use

e.preventDefault()

This will stop the default action from happening.

answered Apr 22 '13 at 11:34

Peter

13,733
11
75
122

Thanks. While e.preventDefault doesnt seem to work in IE, this does: e.returnValue = false; Thanks for the response and I will mark this with an upvote but Chris Dixon responded first, so i think i should mark his as correct, if he posts his comment as a response. Thanks again! – jason Apr 22 '13 at 11:44
I think marking Chris's response as correct is... correct :) Sorry, I only scanned over the comments. Funny it won't work in IE, I'm pretty sure I've use the preventDefault with IE before. Oh well, glad you got it working. – Peter Apr 22 '13 at 11:47
Yeah, not sure why it does not work in IE or if its a version of IE that is the problem. Found it here: http://stackoverflow.com/questions/1000597/event-preventdefault-function-not-working-in-ie Thanks again for your response! – jason Apr 22 '13 at 11:50
Ah yes, I see now. Your preventDefault (a member of the browser event object) isn't supported in IE. The preventDefault() function of jQuery's event object would solve that for you (but you'd have to wire your textbox to the keypress event differently). – Peter Apr 22 '13 at 11:53

jQuery asp.net, stopping postback

1 Answers1

Linked