[CLOSED] JS Error on "smart search"

  1. #1

    [CLOSED] JS Error on "smart search"

    Support,

    found in: 4.2.1

    The problem is that if you search again in some case, it causes a JS error. the problem in PROD is that this causes ALL the searches to stop working and we need to reload the page to fix it.

    Steps:
    1. load screen
    2. type "test" (no quotes) into the combobox,
    - it will search the controller and return whole bunch of results
    3. when the dropdown shows, hit ESC (dropdown will disappear)
    4. now click the "down arrow" trigger of the combobox and you get a JS error

    thanks
    /Z

    aspx
    <%@ Page Language="C#" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html  lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Search </title>
    </head>
    <body>
        <form id="Testsetset" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">          
                <Items>  
                    <ext:FormPanel 
                        ID="blah" 
                        runat="server" 
                        Title="Search" 
                        AutoWidth="true"
                        AutoScroll="true"
                        Height="200"
                        BodyPadding="3"
                        CollapseMode="Default"
                        Collapsible="true"
                        Icon="ClockGo"
                        >
                        <Items>
                            <ext:ComboBox ID="ComboBoxTestCC1" 
                                runat="server" 
                                Padding="5" 
                                DisplayField="description" 
                                TypeAhead="false"
                                ValueField="id" 
                                EmptyText="Select an item" 
                                PageSize="10"
                                Width="300"
                                FieldLabel="Cost Center 1"
                                        
                                MinChars="1" >
                                <Store>
                                    <ext:Store ID="StoreTestCC1" runat="server" AutoLoad="false">
                                        <Proxy>
                                            <ext:AjaxProxy Url="/ta/Support/GetData3">
                                                <ActionMethods READ="GET" />
                                                <Reader>
                                                    <ext:JsonReader IDProperty="id" RootProperty="data" TotalProperty="total"/>
                                                </Reader>
                                            </ext:AjaxProxy>
                                        </Proxy>
                                        <Model>
                                            <ext:Model ID="Model2" IDProperty="id" runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="id" Type="Int" />
                                                    <ext:ModelField Name="description" Type="String" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <Triggers>
                                    <ext:FieldTrigger Icon="Clear" Hidden="true" />
                                </Triggers>
                                <Listeners>
                                    <Select Handler="if (this.editable) { this.getTrigger(0).show(); } " />
                                    <BeforeQuery Handler="this.getTrigger(0)[ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                    <TriggerClick Handler="if (index == 0) { this.clearValue(); this.getTrigger(0).hide(); }" />
                                </Listeners>
                                <ListConfig LoadingText="Loading..." ItemSelector="div.search-item">
                                    <ItemTpl ID="ItemTpl1" runat="server">
                                        <Html>
                                            <tpl for=".">
                                                <div class="search-item">
                                                    <h3>{id}</h3>Description: {description}
                                                </div>
                                            </tpl>
                                        </Html>
                                    </ItemTpl>
                                </ListConfig>
                            </ext:ComboBox>
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    controller
            public ActionResult GetData3(int? start, int? limit, string sort, string dir)
            {
                List<TestData3> l = new List<TestData3>();
                for (int i = 0; i < 245; i++)
                {
                    TestData3 t = new TestData3();
                    t.id = i;
                    t.description = "test_" + i;
                 
                    l.Add(t);
                }
    
    
                var query = l.Select(dt => new
                {
                    id = dt.id,
                    description = dt.description
                }).OrderBy(d => d.id);
    
    
                return this.Store(query.Skip(start.HasValue ? start.Value : 0).Take(limit.HasValue ? limit.Value : 500), query.Count());
            }
    class
        public class TestData3
        {
            public long id;
            public string description;
        }
    Last edited by fabricio.murta; Jun 26, 2017 at 2:24 PM.
  2. #2
    Hello @Z!

    The reason this breaks is because you are letting the search option be set as the combo box's value. As it does not exist, when expanding the list of entries, it tries to find and select that entry.

    I believe best would be to clear the combo box value when the user dismisses the dropdown picker without making a selection. You can bind a Collapse handler to the combo box like this:

    <Collapse Handler="if (item.store.findExact('description', item.getValue()) < 0) { item.clearValue(); }" />
    This will ensure that, if the user didn't make an actual selection in the combo box, it won't have it selected when the picker is expanded again. A similar result can be attained if you just set the combo box's ForceSelection to True.

    In the event you need the combo box to act actually as a combo box (that is, it accepts and keeps both typed in values and picked up values), give the store the rawQuery setting, for example, on load:

    <Load Handler="store.lastOptions.rawQuery = true;" />
    This is particularly needed because you are using remote paging and querying in the store and there's no guarantee the entry, even if previously selected right, will be on the store when it reloads (once the user expands the picker).

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    I utilized the Collapse handler solution and this fixed the issue.
    you can close
    Thanks,
    /Z
  4. #4
    Hello @Z!

    Thanks for the feedback, and glad it helped you out!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Apr 06, 2016, 12:05 PM
  2. Replies: 3
    Last Post: Jan 28, 2016, 6:13 PM
  3. [CLOSED] The function "addScript" causing the error "Syntax Error"
    By Woyciniuk in forum 3.x Legacy Premium Help
    Replies: 22
    Last Post: Sep 26, 2015, 8:56 AM
  4. [CLOSED] autocomplete ä la "Custom search example"
    By mirwais in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 19, 2012, 8:12 AM
  5. Replies: 18
    Last Post: Jul 20, 2011, 8:59 PM

Posting Permissions