Revision history [back]

click to hide/show revision 1
initial version

asked 2013-03-03 07:17:05 +0800

mindcrime gravatar image mindcrime

Search button in tutorial does not work

Hi all, I'm going through the ZK tutorial and working with the provided sample app, as documented at books.zkoss.org/wiki/ZKGettingStarted/GetZKUpandRunningwithMVC#ImportandRunExampleApplication

I have the app deployed to Tomcat successfully and hitting localhost:8080/tutorial/search.zul renders the search page. But when I type a keyword in the search box and click the Search button, nothing happens. No call is made to the backend (verified by setting a breakpoint and running in debug mode), and nothing appears in the Javascript console in the browser.

I've tried with with both Chrome and Firefox and the behavior is the same in both cases.

I have not modified the tutorial sample app code, but here is the contents of my search.zul in case it helps:

<window title="Search" width="600px" border="normal"> <hbox align="center"> Keyword: <textbox id="keywordBox"/> <button id="searchButton" label="Search" image="/img/search.png"/> </hbox> <listbox id="carListbox" height="160px" emptymessage="No car found in the result"> <listhead> <listheader label="Model"/> <listheader label="Make"/> <listheader label="Price" width="20%"/> </listhead> <listitem> <listcell label="product name"></listcell> <listcell label="make"></listcell> <listcell>$<label value="price"/></listcell> </listitem> </listbox> <hbox style="margin-top:20px"> <image id="previewImage" width="250px"/> <vbox> <label id="modelLabel"/> <label id="makeLabel"/> <label id="priceLabel"/> <label id="descriptionLabel"/> </vbox> </hbox> </window>

Search button in tutorial does not work

Hi all, I'm going through the ZK tutorial and working with the provided sample app, as documented at books.zkoss.org/wiki/ZKGettingStarted/GetZKUpandRunningwithMVC#ImportandRunExampleApplication

I have the app deployed to Tomcat successfully and hitting localhost:8080/tutorial/search.zul renders the search page. But when I type a keyword in the search box and click the Search button, nothing happens. No call is made to the backend (verified by setting a breakpoint and running in debug mode), and nothing appears in the Javascript console in the browser.

I've tried with with both Chrome and Firefox and the behavior is the same in both cases.

I have not modified the tutorial sample app code, but here is the contents of my search.zul in case it helps:


<window title="Search" width="600px" border="normal">
    <hbox align="center">
        Keyword:
        <textbox id="keywordBox"/>
        <button id="searchButton" label="Search" image="/img/search.png"/>
    </hbox>
    <listbox id="carListbox" height="160px" emptymessage="No car found in the result">
        <listhead>
            <listheader label="Model"/>
            <listheader label="Make"/>
            <listheader label="Price" width="20%"/>
        </listhead>
        <listitem>
            <listcell label="product name"></listcell>
            <listcell label="make"></listcell>
            <listcell>$<label value="price"/></listcell>
        </listitem>
    </listbox>
    <hbox style="margin-top:20px">
        <image id="previewImage" width="250px"/>
        <vbox>
            <label id="modelLabel"/>
            <label id="makeLabel"/>
            <label id="priceLabel"/>
            <label id="descriptionLabel"/>
        </vbox>
    </hbox>
</window>

Search button in tutorial does not work

Hi all, I'm going through the ZK tutorial and working with the provided sample app, as documented at books.zkoss.org/wiki/ZKGettingStarted/GetZKUpandRunningwithMVC#ImportandRunExampleApplication

I have the app deployed to Tomcat successfully and hitting localhost:8080/tutorial/search.zul renders the search page. But when I type a keyword in the search box and click the Search button, nothing happens. No call is made to the backend (verified by setting a breakpoint and running in debug mode), and nothing appears in the Javascript console in the browser.

I've tried with with both Chrome and Firefox and the behavior is the same in both cases.

I have not modified the tutorial sample app code, but here is the contents of my search.zul in case it helps:


<window title="Search" width="600px" border="normal">
    <hbox align="center">
        Keyword:
        <textbox id="keywordBox"/>
        <button id="searchButton" label="Search" image="/img/search.png"/>
    </hbox>
    <listbox id="carListbox" height="160px" emptymessage="No car found in the result">
        <listhead>
            <listheader label="Model"/>
            <listheader label="Make"/>
            <listheader label="Price" width="20%"/>
        </listhead>
        <listitem>
            <listcell label="product name"></listcell>
            <listcell label="make"></listcell>
            <listcell>$<label value="price"/></listcell>
        </listitem>
    </listbox>
    <hbox style="margin-top:20px">
        <image id="previewImage" width="250px"/>
        <vbox>
            <label id="modelLabel"/>
            <label id="makeLabel"/>
            <label id="priceLabel"/>
            <label id="descriptionLabel"/>
        </vbox>
    </hbox>
</window>
 

and SearchController looks like this:


public class SearchController extends SelectorComposer<component> {

    private static final long serialVersionUID = 1L;

    @Wire
    private Textbox keywordBox;
    @Wire
    private Listbox carListbox;
    @Wire
    private Label modelLabel;
    @Wire
    private Label makeLabel;
    @Wire
    private Label priceLabel;
    @Wire
    private Label descriptionLabel;
    @Wire
    private Image previewImage;


    private CarService carService = new CarServiceImpl();

    @Listen("onClick = #searchButton")
    public void search(){
        System.out.println( "doing search" );
        String keyword = keywordBox.getValue();
        List<car> result = carService.search(keyword);
        carListbox.setModel(new ListModelList<car>(result));
    }

    @Listen("onSelect = #carListbox")
    public void showDetail(){
        Car selected = carListbox.getSelectedItem().getValue();
        previewImage.setSrc(selected.getPreview());
        modelLabel.setValue(selected.getModel());
        makeLabel.setValue(selected.getMake());
        priceLabel.setValue(selected.getPrice().toString());
        descriptionLabel.setValue(selected.getDescription());
    }
}
 

Search button in tutorial does not work

Hi all, I'm going through the ZK tutorial and working with the provided sample app, as documented at books.zkoss.org/wiki/ZKGettingStarted/GetZKUpandRunningwithMVC#ImportandRunExampleApplication

I have the app deployed to Tomcat successfully and hitting localhost:8080/tutorial/search.zul renders the search page. But when I type a keyword in the search box and click the Search button, nothing happens. No call is made to the backend (verified by setting a breakpoint and running in debug mode), and nothing appears in the Javascript console in the browser.

I've tried with with both Chrome and Firefox and the behavior is the same in both cases.

I have not modified the tutorial sample app code, but here is the contents of my search.zul in case it helps:


<window title="Search" width="600px" border="normal">
    <hbox align="center">
        Keyword:
        <textbox id="keywordBox"/>
        <button id="searchButton" label="Search" image="/img/search.png"/>
    </hbox>
    <listbox id="carListbox" height="160px" emptymessage="No car found in the result">
        <listhead>
            <listheader label="Model"/>
            <listheader label="Make"/>
            <listheader label="Price" width="20%"/>
        </listhead>
        <listitem>
            <listcell label="product name"></listcell>
            <listcell label="make"></listcell>
            <listcell>$<label value="price"/></listcell>
        </listitem>
    </listbox>
    <hbox style="margin-top:20px">
        <image id="previewImage" width="250px"/>
        <vbox>
            <label id="modelLabel"/>
            <label id="makeLabel"/>
            <label id="priceLabel"/>
            <label id="descriptionLabel"/>
        </vbox>
    </hbox>
</window>
 

and SearchController looks like this:


public class SearchController extends SelectorComposer<component> {

    private static final long serialVersionUID = 1L;

    @Wire
    private Textbox keywordBox;
    @Wire
    private Listbox carListbox;
    @Wire
    private Label modelLabel;
    @Wire
    private Label makeLabel;
    @Wire
    private Label priceLabel;
    @Wire
    private Label descriptionLabel;
    @Wire
    private Image previewImage;


    private CarService carService = new CarServiceImpl();

    @Listen("onClick = #searchButton")
    public void search(){
        System.out.println( "doing search" );
        String keyword = keywordBox.getValue();
        List<car> result = carService.search(keyword);
        carListbox.setModel(new ListModelList<car>(result));
    }

    @Listen("onSelect = #carListbox")
    public void showDetail(){
        Car selected = carListbox.getSelectedItem().getValue();
        previewImage.setSrc(selected.getPreview());
        modelLabel.setValue(selected.getModel());
        makeLabel.setValue(selected.getMake());
        priceLabel.setValue(selected.getPrice().toString());
        descriptionLabel.setValue(selected.getDescription());
    }
}
 
Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More