PDA

View Full Version : [CLOSED] how to avoid textfield autopostback?



hdsoso
Jun 02, 2015, 7:19 AM
a textfield and a button , when input some words in textfield, click "enter" key, then trigger the button's click event,
but when click the "enter" key, the page is post back to the server , how to avoid it?


<ext:TextField runat="server" ID="tfProj" FieldLabel="project's name" >
<Listeners>
<SpecialKey Handler="
if(e.getKey()==13){
App.storeProj.reload();
}
">
</SpecialKey>
</Listeners>
</ext:TextField>
<ext:Button runat="server" Text="search" ID="btnSearch" Icon="Find">
<Listeners>
<Click Handler="
App.storeProj.reload();
"></Click>
</Listeners>
</ext:Button>
<ext:GridPanel runat="server" Title="xxx">
<View>
<ext:GridView runat="server" EmptyText="no data" />
</View>
<Store>
<ext:Store runat="server" ID="storeProj" OnReadData="LoadProj" >
...

geoffrey.mcgill
Jun 02, 2015, 8:25 AM
Hi hdsoso,

I tried to run your sample, but it was throwing errors. Can you revise and make a runnable sample that we can copy+paste into our test project.

hdsoso
Jun 02, 2015, 9:06 AM
full example:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="tanksystem.WebForm3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script runat="server" >
public class Student
{
public int ID { get; set; }
public string Name { get; set; }
}
protected void ReadData(object sender, StoreReadDataEventArgs e)
{
var name = tfName.Value;
var students = new List<Student>
{
new Student {ID = 1, Name = "s1"},
new Student {ID = 2, Name = "s2"}
};
if (name == null)
{
store.DataSource = students;
}
else
{
var stds = students.Where(v => v.Name.Contains(name.ToString())).ToList();
store.DataSource = stds;
}
store.DataBind();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server"></ext:ResourceManager>
<ext:TextField runat="server" ID="tfName">
<Listeners>
<SpecialKey Handler="
if(e.getKey()==13){
App.btnS.trigger('click');
}
"></SpecialKey>
</Listeners>
</ext:TextField>
<ext:Button runat="server" Text="click me" ID="btnS">
<Listeners>
<Click Handler="
App.store.reload();
"></Click>
</Listeners>
</ext:Button>
<ext:GridPanel runat="server">
<Store>
<ext:Store runat="server" ID="store" OnReadData="ReadData">
<Fields>
<ext:ModelField Name="ID"></ext:ModelField>
<ext:ModelField Name="Name"></ext:ModelField>
</Fields>
<Proxy>
<ext:PageProxy></ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="ID" Text="ID"></ext:Column>
<ext:Column runat="server" DataIndex="Name" Text="Name"></ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Jun 02, 2015, 5:40 PM
That is a browser's behavior. If there is the only input text field on the page and Enter is pressed, a browser submits the page.

Also there is no .trigger() method on a Button.

I can suggest the following solution.

<SpecialKey Handler="if(e.getKey() === e.ENTER) {
App.btnS.fireEvent('click');
e.stopEvent();
}" />
</Listeners>
</ext:TextField>