How do I use select component to reload page?

Question

I'm building my own PageRow component and I'm trying to figure out how to reload the page after changing the select value from say 10 results to 50. I need to set a query parameter during the refresh too, I thought I could do this using the onChanged event, but that does not work. Any one have any thoughts on how to do this?

Answer 1

Since you don't need to POST the value, you don't actually need to use the select component.

Java

@Property private int currentRows;

@Inject private ComponentResources resources;

public Link getEventLink(int rows) {
    Link link =  resources.createEventLink("setRows", rows);
    link.addParameter("foo", "bar");
    return link;
}

Object onSetRows(int rows) {
    ...
    return this;
}

TML

<select id="rows">
    <t:loop source="[10,20,30,40,50]" value="currentRows">
        <option value="${getEventLink(currentRows)}">${currentRows}</option>
    </t:loop>
</select>

Javascript (jQuery)

$('#rows').change(function() {
    document.location.href = $(this).val();
});

You could easily adapt this and use a proper SelectModel and the select component.

Answer 2

On the serverside, @Inject ComponentResources and use createEventLink(...) to generate event urls for each option (10-50).

On the clientside, attach a change listener to the select which sets window.location.href and causes an event url to load.