I'm working on a Spring MVC app, which should let user alter contents of a list.
The list consists of Book-objects with simple properties like name and author. The view is a JSP page that displays the list of books and lets the user alter the contents.
Altering the list can mean adding books, removing them or changing the order of the books in the list.
Question is, how do I get the altered list back to the server? I can write JavaScript to control the list, but how do I post it to the Spring controller? On the other hand I can write a JSP form for altering the model which would be trivial to submit back to the server, but am I then limited to basic text fields in form input?
EDIT:
In JSP it is very easy to alter a single model's properties using a form like
<form:form action="myaction" method="post" commandName="mybook">
but if your model is a (ordered) list of objects then how do you edit it?
In Javascript I can get the list of objects from the response and change it as needed, but how do I submit it back to the server? Something like
$.post("/modifybook.do",{ name: "Spring in Action", author: "Graig Walls" } );
works, but only for single objects.
Having never used Spring this may well not be appropriate but could you not convert the list into XML and then post that back to Java and then work on it retaining all intricacies and changes?
You should avoid manipulating the whole list, period. I can't see a scenario where populating entire list of items and sending it back to the server is desired, when only one list element is being changed (edited, added or removed).
What I usually do in my app is I create a handler (controller) for returning a whole list of objects in one go and then add another handlers for adding, editing and removing single entries within that list. I also try to stick to REST in such scenarios, so that I have a clean API which represents server resources and the frontend (AJAX + jQuery) makes use of it.
This solution works really well for me so I suggest sticking to it as well.
Related
Page 1, complete a HTML form. Submitting form links to page 2.
Page 2+, shows a story populated by the answers to the HTML form.
I can't find a why to bring back elements of the HTML form to complete gaps in future pages. Should I be looking at trying to use Javascript or to learn some PHP to store and then re-use the form data?
Yes, you will some sort of server side programming, store data locally and then retrieve it with javascript or passing the information to the page using query strings. Maybe other options are possible but those are the things that come to mind right now. Have a look at this answer for an example of the last method I mentioned.
I'm trying to build a custom UI control in alfresco to display the associations of an object type that I have.
Basically I have two object types; Code, which is a key value pair, and CodeScheme which contains multiple child associations to codes, it's essentially a mirror of a map structure I have in a different system.
The problem I have is that the codes are automatically generated, so they get the UID names, whereas really I'd like to present them as 'key=value', 'key=value', etc (ideally I'd like to present it as a table).
I've already created a custom control and added it to share-config-custom, and confirmed that the configuration is working correctly. What I'm not really clear on now is:
a) How to attach a javascript to the control so that I can process the association data.
b) How to get hold of the codes in javascript, and read their properties.
I'm just looking for a push in the right direction.
Thanks :)
One idea would be to use a form filter. Your form filter could iterate over the child references, fetch each child node, grab the data you want to display and then add one or more new properties with that data.
Then, your form control is hooked to the fields your form filter dynamically added to the form data. It can then read and display the data as needed.
Without a form filter I think you'd have to use JavaScript to parse the child association refs and use AJAX calls to fetch each child's node data, then format that as needed. The form filter idea would be less traffic from the browser.
I'm working on an internal tool using spring-mvc and thymeleaf.
A section of this tool is used to create an entity we save in the database.
This entity is quite complex; it contains many properties and relations. Some of these relations contain list and other properties.
I have 2 constraints:
Single page. No "wizard".
To only save a completed object in the database.
Now, I'm not really asking for a specific issue. I know my way around thymeleaf, spring #ModelAttribute, etc.
My question is mostly which strategy are you choosing or how to deal with really complex object creation.
Now I can see 3 ways to do it :
Rendering page with thymeleaf. Every time a new element need to be added to a list, I use Ajax to add the new element on the server and rerender the specific fragment. So doing back and forth to the server with my #ModelAttribute and only save at the end.
Rendering a basic page with thymeleaf. Using JavaScript to create html elements and instead of submitting to a #ModelAttribute, I'm serializing my form to JSON and submit this JSON to the server. (kind of client side model)
Rendering a basic page with thymeleaf. Create the html element dynamically with JavaScript when I need to add list item (being sure I'm putting proper name="" to fit with my Java form object) and submit the whole thing at the end.
I'm personally unsure between 1 or 2.
I feel dealing with complex object is much more easier using JSON than form submission. Also, the input value/field with sub object and property can be quite nasty. Having this kind of syntax
does not sound great to me...
3 can probably work but the way spring data binding is done with sub property is lacking some detail in my humble opinion (section 7.4.1 - http://docs.spring.io/spring/docs/current/spring-framework-reference/html/validation.html).
What do you think ?
Personally I use Thymeleaf's own dynamic field management to ensure clean addition of objects and fields to object.
So I will recommend option 4: Dynamic Field management by Thymeleaf.
Have a read of http://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#dynamic-fields.
I use that for both single field additions as well as addition of nested forms. Does the trick no questions asked.
Hope that helps.
I am planning to create a website which will let you iteratively construct an SQL query.
The idea is the following:
while(user wants more where clauses)
{
show selection (html select) for table columns
let user choose one column
upon selection, show distinct values of that column
let user choose one/multiple value(s)
}
I know how to handle the SQL part, but I am not sure how to tackle the iterative building of the page.
So my questions are:
What is the best method to build the page iteratively with the idea sketched above?
What do I do, if the user changes one of the previous selections?
The website will be build with Perl and I am thinking of utilizing Ajax for the dynamic part.
Any help is much appreciated.
If I were to do this, I'd use SQL::Abstract.
UPDATE:
If you don't want to redraw the whole page, you're going to be using AJAX. So find yourself a JavaScript library that you feel comfortable with that includes ajax calls. Jquery has this, a bunch of others do too. People have differing opinions on various libraries.
Anyway, your workflow looks like this:
user submits form
javascript performs client-side validation
javascript submits AJAX-style to the server
Server performs server-side validation, data manipulation, etc.
Server responds with data paylod
client updated the screen based on the contents of the payload.
So let's concentrate on 5 and 6.
Data Payload: The X in AJAX means XML, but many apps send back JSON, or HTML.
Update the Screen:
You can apply HTML directly to the existing page by setting a tag's innerHTML or outerHTML attribute. But that doesn't update the DOM. If you don't dig around the DOM in your clcinet code, then this can suffice. If you dig around, then you need to build nodes and add them to you page's DOM, so you might want to consider sending back JSON or XML.
So let's say that you have a div with id='generatedSQL' when your AJAX call retruns, it will fire a callback method (let's call it updateSQL()) and inside the callback you'll have code that looks approximately like:
$(#generatedSQL).innerHTML = theVariableHoldingTheHtml;
Your other option is to parse the JSONXML/etc. and using createNode(),etc, build new DOM bits and plug them into your page. I don't have the jquery chops to write this for you. I look it up every time I need to do something like it.
If the query text is only ever display-only, and you never try to dig around in it on the client side, just use the innerHTML method, whether you pass HTML or pass JSON and generate HTML from it. If the query text is important to the inner workings of the client, then you'll need to write bunch of DOM manipulation code.
No sure what you would be using but, if uses clicks on something then use the Onload event of the element with ajax call to script which brings back the data/content and on readystate just update the innerHTML of the container DIV.
Hope following link will help you understand the concept will give you a code to start with as well.
http://www.w3schools.com/php/php_ajax_database.asp
I'm building what I am hoping to be a fairly simple, quick and dirty demo app.
So far, I've managed to build a bunch of components using only html and javascript. I know that eventually I'll hook-up a db, but at this point I'm just trying to show off some functionality.
In the page, a user can select a bunch of other users (like friends). Then they go to a separate html page and there is some sorting info based on the selected users.
So my first attempt was to put the selected users object into a cookie, and retrieve the cookie on the second page. Unfortunately, if the user changed their selection, the cookie wasn't getting updated, and my searches on StackOverflow seemed to say that deleting and updating cookies is unreliable.
I tried
function updateCookie(updatedUserList){
jQuery.cookie('userList',null);
jQuery.cookie('userList',updatedUserList);
}
but though it set the cookie to null, it wouldn't update it on the second value.
So I decided to put the selected users object into a form. Unfortunately, it looks like I can't retrieve the contents from the form on the client-side, only on the server-side.
Is there another way to do this? I've worked in PHP and Rails, but I'm trying to do this quickly and simply before building it out into something larger and am trying to avoid any server-side processing for now, which I have managed to do up to this point.
Since this is a demo, can you use HTML5? If so, you can use local storage: link text.
Another option is to use AJAX to load the other HTML page (replace whole body of the current document). Your storage variables would be stored in the <head>. This is a tightly coupled design, but again you're making a quick and dirty demo.
Is updatedUserList a string? If it's an array you might have to stringify it first:
jQuery.cookie('userList', JSON.stringify(updatedUserList))
(and of course parse it when you're retrieving it.)