Populating form components from database using innerHTML - javascript

I need to populate form components(either select,checkbox) from database. The fields of the form depend on each other, i.e I need to populate a component based on user selection on the previous component. To do that, I am using onchange method, from which I raise a AJAX request for the data that need to populate the next tag. Right now, I am returning the string(HTML data) from the controller in backend and setting the corresponding id's innerHTML to these string. I am curious, whether the approach is correct way or should I take the json as the output from AJAX call and generate the HTML in js and then set the innerHTML value to the corresponding id. I am using JSP as View.

i think building the json and building up the components in the page side is safer becuse it makes your business login separate from the view. If it is required to construct a dynamic table without a POJO then there is no other go you have to use the html string data as the output of ajax

Related

Spring MVC Ajax Request to Refresh Dynamic Table

I currently have a spring mvc app that gets a list of users from a database and displays their information in a table using JSP to basically loop through each object in the list and create a table row for them.
Each user has an expiry date attribute as part of their record in the database. What I want to achieve is basically a button that when toggled shows or hides all users that have expired (i.e. their expiry date is less than today's date).
For this I am trying to use AJAX calls to my controller to fetch me all users expired or not OR only users that haven't expired depending on how the button is toggled.
What I would like help on is the best way to achieve this as I can think of a few nasty ways of doing it like having a separate page and refreshing but I am confused on a few things.
Should I just ditch the JSP looping through to make the table and make a method in JavaScript that creates that table when given the data? If so how do I get the data from the controller to JavaScript, can an AJAX call to a controller return me a list of my user objects?
My best guess is that instead of adding a list of objects to a model and letting JSP do the work, that I instead return a JSON with the data and use JavaScript to build the table. I can then call an update method to re-build the table.
You are correct. You have 2 options:
Have AJAX call return html (i.e. jsp) for the table and then replace
the body of the table
Use JavaScript to build the table and then
update the table with AJAX call which returns JSON.
If you want to get more sophisticated, you could use a JavaScript framework like Knockout.js which would let you mark up the table and refresh the table without too much of JavaScript writing.
Blurgh I'm not sure why this question has received so much attention, especially now in the days of angular but if you are struggling with this then I would strongly recommend the following library:
https://www.ag-grid.com/

Javascript dynamic list POST/GET interaction design

This is a design question.
I have a dynamically changing list that works by creating DOM elements and populating them with the fields and these list elements can be added and removed. However, I'm not sure how to design the interaction with the backend server through POST/GET requests. If it helps, I'm using mongoDB and python flask.
My problem is that I'm not sure how to, given an list element (a div container as a list element), retrieve sufficient information about said list element to complete the POST/GET requests.
Should I attach additional fields to the div element itself that holds data like name, description, timestamp? Or should I have a JSON object that keeps track of each list element by id (or something) and it's associated identification data? Or should I be doing something else altogether?
As a side node, where can I turn to learn these design/stylistic things? Thanks!
That's what forms are for.
<form name="form1" action="index.htm" method="GET">
(put fields here)
<input type="submit" value="Submit"></input>
</form>
Change index.htm to the name of the page. Put any fields you want to pass to a POST/GET request in there. Any input fields with a name attribute should have their value passed. Change GET to POST if that's what you prefer. Then you must use a server side language like PHP to interpret the sent data.

Storing data in collection forms in Symfony2

Why do they store HTML tags with values in data-prototype instead of storing it just as values?
This leads to big amount of duplicated data.
data-prototype attribute hold the html of collection item. You can get this html, insert in form and you get new collection item. You can`t store it as real html in form cause it would be sended to server spite of the fact that this field can be invisible. You can put it iutside the form using render tag and access later using js.

JSF Post serialized form to JSF Method without binding value

I've got the following problem: I made a js that generates multiple hidden fields with the same name (in this case 'vak')
I want to be able to post all that data to a JSF method so I can write it to the database.
Thing is, I want to do this without binding the data to variables in the controller
in short, I have a save button that serializes a form(with js generated fields) on click
vak=0&vak=1&vak=2&vak=3
I want this to end up as an array(list) in the JSF controllers method "handleSave()"
EDIT: this can be closed. I ended up doing it the proper way by handling each change to the calendar as an ajax request and the js just be in charge of the rendering
You can get all parameter values by ExternalContext#getRequestParameterValuesMap().
String[] vak = externalContext.getRequestParameterValuesMap().get("vak");
You'll only need to write some boilerplate code yourself inside the action method in order to convert, validate and update the values (which is what JSF would basically already be Do for you when used the right way).

Sending parameters with the autogenerated post submit/create button in MVC 3 razor

I read online about how to send a variable from javascript with ajax but I am not sure that solution fit my needs.
What I am trying to do is this:
I have an automated form for creating a row at my DB.
What I Want to do is run a javascript code that will create a variable with logic based on the user input and than send this variable along with all the other fields that are automatically being sent because of the automated creation and binding of the model.
Basically what I want is to add another array to the automated post call that I didn't wrote because it is being generated automatically by mvc. and than I can retrieve this variable (array at my case) at the create method on the controller
Do you have a solution for this?
Thank you very much
You could add some hidden fields to the form and use Javascript to fill their values in the submit event.

Categories

Resources