I have a Freemarker template displaying a list of things, now I want to add some pagination.
I have changed the server-side code so that I can put into the backing form the page number (default 1) and page size (default 20) along with a bunch of query parameters. The Controller will handle this correctly and return the list of things, the page number and the last page number in the model.
But what I don't know (as I haven't done much web layer stuff before) is what to do in the template so that the user can click on next/previous/page-3 etc.
The template currently has:
<button type="submit" id="searchButton">Search</button>
I guess I could add buttons for each of the actions, but how could I then detect in the controller which button was clicked?
Cheers
Paul
You could add an onClick event on buttons (or A HREF links) in your template, linked to a bit of Javascript that sets a value for a hidden element in the page. This element (say ACTION) would hold the value of which button you clicked (NEXT or PREVIOUS), so that on the server side, the controller can do the right thing according to the value of ACTION.
form.elements["ACTION"].value = 'NEXT'
Or that could also be a PAGE element, which holds the target number of the page (if you want to allow direct linking to all pages)
So if you're currently on page 4:
form.elements["PAGE"].value = '5' // for the 'NEXT' button
form.elements["PAGE"].value = '3' // for the 'PREVIOUS' button
Related
I have used Fresh MVMM. I need to pass a data from one page model to another page model without using init and reverse init.
Eg: I have one toggle button in first content page.
I need to toggled the button based on the selection in second popup page without popup the second PopPopupPageModel.
ReverseInit is worked when popup the second PopPopupPageModel and can easily pass data.
But I need to toogled the button in first page without popup the second page.
Please help...
I have form which has some checkbox. I want to display a fragment when I user click (checked) on checkbox.
Is there a way in Thymeleaf by using any th:* function or how Can I display fragment in thymeleaf on checkbox click.
There are two ways to solve your requirements...
Create a simple JavaScript handler on checkbox click event and submit your form with some parameter/hidden value. When the server handles "onSubmit" request, check this value and if chackbox was chacked, render view (Thymeleaf template) with included additional fragment. Vise versa when checkbox is unchecked render view without this fragment. This solution is not ideal as your server will get hits every time the user checks ckeckbox.
Always render the view with the fragment included into the page. By default hide top-level fragment element with style display:none;. create a simple JavaScript handler on checkbox click event and toggle this style from none to block and vise-versa. This solution works completely in the user's browser and doesn't require to submit to your server.
I am working on a xamarin forms project which have a carousel page container, and content pages as its children are created dynamically on different condition checks. (Minimum 8 children in my case)
Let's take the mentioned minimum case. I enter some values in entry/picker controls in the 1st child and then navigate/swipe pages till 5th child. When I came back to the first child page, the values I entered/selected are now vanished/refreshed.
I have noticed that carousel page saves only 3 pages data in it. i.e. (Left Page, Current Page and the Right Page).
And Tabbed page saves 4 pages data.
I want the values to stay in the child page where I entered whether I navigate to the last most page or in the middle and navigate back to that page.
I have googled via the letters as "Carousel page/ Tabbed page Saved states" etc. but unable to find something useful.
So, I need to know the property name/ method name etc. by which xamarin forms setting the limit of carousel page as 3 and tabbed page as 4.
Waiting for your response.
Thanks.
OK I found that I was using a Custom Picker Control and the value refreshing issue is with it. I just forget to set the selectedIndex of the picker on OnElementChanged event.
I am converting an old web application. In the legacy version, there is a page which displays some default content when the user navigates to it. There is a link within that page which reloads the page but with a querystring showform=yes which causes a form to be displayed instead of the content.
In the old version, the page was like this:
http://site.com/directory.asp - for the main page with the content
http://site.com/directory.asp?showform=yes - called when the user
clicked the button to show the form.
In the new version of the web app, that same page is set up with ajax, in that there is a div which contains the default content when someone visits http://site.com/directory. There is a button, which, when clicked (from within that page), some ajax is invoked which swaps out the content and displays the form. There is no change in the URI/querystring.
Here is my question - In the legacy version of the web app, there are some other pages which link the user directly to the page with the form (http://site.com/directory.asp?showform=yes) e.g. so they don't need to click the button once the arrive at directory.asp.
Is there a what I can mimimc this behavior based on how I have that page set up now e.g. displaying the form via ajax in a div?)
Initially I thought that perhaps ajax can be triggered based on the presence of a querystring or an anchor in the URI e.g. /directory#form but I am not sure if that is possible.
I would prefer a solution that is not dependent on jQuery, but will consider it if there are no other options.
Thanks in advance for looking, and please let me know if I can further clarify.
Thanks,
Gary
yes you can trigger AJAX call on the basis of a boolean variable which you can set through the query string.
The default value for the boolean variable is false which forces the user to click on the button to refresh the form section.
But when the comes back on the same page the query string will set the boolean variable to true whereby the javascript function containing the AJAX code is invoked from your JSP/ASP or HTML.
When a user double clicks on a row on my page, I navigate them to an edit screen which shows them some important information. When they submit that patient I gerimander jqGrid to take them page to the page that they were just viewing...
serializeGridData: function (postData) {
//debugger;
var pagInfo = $(this).se
debugger;
if ((rowFromTemp != "") && (pageFromTemp != "")) {
//debugger;
postData.page = pageFromTemp;
pageFromTemp = "";
rowFromTemp = "";
}
return postData;
},
I basically edited the postData in the serializeGridData function.
My question is, when I navigate to a different page lets say page 3 of 10 after I have edited information and returned to the correct page, when I click refresh of the whole page...
I want the user to return to the page that they just navigated to. Right now, it will return them back to the page that they initially returned from after editing information. So If I were to construct a timeline of events...
1) user see's paged information...
2) user selects row to edit
3) user navigates to edit page and does his thing then submits
4) user now is sent back to page where he came from...
5) user goes to a different page (either next or last)
6) user refreshes page
7) !! user is sent to page X from step 3 and 4 and Not 5 !!
I was hoping to to some kind of refresh of page event and set the correct page in there.
Is my methodology or thinking in correct here? Is there a way to ensure that the correct page is selected no matter what?
I just checked again. It would seem that if a user
1) navigates to page X
3) refreshes a page
he will be sent to page 1.
Maybe I am setting an unrealistic expectation. Maybe if they reload the whole page, they should expect to go back to page 1.
Well even so, how could I accomplish that task with the first workflow
In my opinion the real problem which you have is the usage of step 3: "user navigates to edit page and does his thing then submits". The step makes all the problems which you try to solve. Instead of going to another page one can create dynamically some controls which allows to edit the selected row. jqGrid provide inline editing or form editing for the purpose. You need just include editable: true property in the columns which you need to edit implement starting of inline/form editing on select of row or on double click. Alternatively you can use buttons from the navigator bar (see navGrid and inlineNav) or in addition column of the grid (see formatter: "actions").
If you still don't want to use any editing mode which provide jqGrid you can just place the whole content of the body of the main page inside of a div. You can hide the div using jQuery.hide instead of redirection to "edit page". You can load the content of "edit page" on the same main page (per jQuery.load for example). Then you can remove the loaded "edit page" and show the original main page. As the result the main page will be shown in exactly the same form as it was before starting of editing.