Dynamic JSP input boxes? - javascript

How can I create a JSP page with dynamic selection/input boxes?
The first one will show all table names:
<select name="table">
<option value="" disabled selected>Tabela</option>
<% while(rset.next()){ %>
<option font color="black" value="<%= rset.getString(1)%>"> <%=rset.getString(1)%>
</option>
<% } %>;
<%TableDAO.closeConnection();%>
</select><br>
this part is working good, in the start of the page Im getting rset to have a result set from a search that return table names.
So, I have the first selection box, user will pick the Table in which he wants to add a new entry. When the user picks a table name from that selection box, I want the program to create X input boxes below, being X the number of columns from that table, each one with the column's name as placeholder.
Is this possible? JSP is always processed before display right? how could I do this dynamic part, Js? Could someone give me some samples?

Display a page with the first selection box
User picks an option
User submits the form
JSP receives the data
Use that data to query the database
Use that data to display a second page with the next set of inputs on it
If you want to avoid loading entire new pages then you'll need to write an API using your JSP (generally speaking, people follow the RESTful pattern and return JSON these days). Then you can use JavaScript to make HTTP requests (i.e. Ajax) to that API.

Related

Angular.js: Input class not changing / pre-populating data as expected

I have the following structure:
I have a list which is filled from JS (100% verified the the list is being filled and no data is missing).
In Angular's HTML, I go over the list with ng-repeat:
<div ng-repeat="attr in x.list track by $index">
Basically, the list is filled out of a JSON file containing FE elements data.
So, in each iteration of the Angular loop, I check what is the type of the element and have it as input.
One of the types is a textbox, and it should be pre-populated with data.
So if the type is a textbox, I fill it according to the following:
<input ng-if="attr.type=== 'textbox'"
name= etc
class=etc
id=etc
ng-minlength= etc
ng-pattern= etc
ng-maxlength= etc
ng-model= etc
value= etc
ng-init= etc
placeholder= etc
mdn-input= etc
ng-paste= etc
ng-required= etc
ng-disabled= etc
To explain it further, the loop fills all of the elements. For the user, there is a dropdown, and once he chooses anything, the Front End page loads the elements accordingly.
The issue is: When the page loads, the pre-populated data are loaded correctly. However when the user changes the option in Dropdown, the pre-populated data is sometimes NOT ALL loaded! So for example only 2 textboxes out of 4 is loaded.
Any ideas?
Thank you.

Select HTML Table Row and Identify DB Record ID

I’m developing a simple CRUD based application for upskilling purposes.
Currently, the application outputs the result of a select query to a HTML table using JSTL. The last column of this table has a Delete link for each record which sends the parameters action=delete&id=1 to the server. The id param value part of the href of these links are obviously dynamically generated with JSTL based on the database record key that is passed into the JSP with the database results.
Instead of having this Delete column, I want the user to “select” a row and click a Delete button at the bottom of the table, which will send the above parameters to the server.
I am unsure how to accomplish the following to achieve this:
(1) In Javascript, how can I allow the user to “select” a table row. I don’t want the table to have radio buttons. The behaviour should be that the user clicks the row, the entire row colour changes and JS retains the index of the selected row. Only one row can be selected at a time. If the user clicks the row again, it becomes deselected, i.e. the colour is returned to its original colour and JS no longer identifies that row index as being highlighted.
(2) If I don’t have a Delete link specific to each db record, how can I identify the key of the db record to be deleted and return this to the server when the Delete button is clicked. For example, currently if the record in the db has an PK of 123456, my JSTL will generate a href action=delete&id=123456 for that specific Delete link. So, how can I link that id to the selected table row without having to actually display that id in the HTML table.
1) There are plenty of ways to do it. I suppose all of them will involve the use of something like var rows = document.getElementsByTagName("tr"); or its jquery (or other framework) equivalent. Or some other selector, maybe by CSS classname, could be used. Followed by a loop in which you deselect all the rows that were not clicked and select only the one that was recently clicked. Changing the color equals just changing the css class assigned to the DOM element basically.
2) You will use Javascript either to append to the DOM an html form with hidden inputs (<input type='hidden'.../>) and then submit it via Javascript (if you're Ok with moving to a different page and back). Or you can use Javascript to send an Ajax request to the delete servlet, and then remove the particular tr from the page when you receive a success response back.

Display data from preloaded list (Spring+JSP)

In a jsp, I have generated a table consisting of records from the database - trivially, using
<c:forEach var="activity" items="activities" varStatus="loopCounter">
...<td><c:out...
</c:forEach>
This is shown in a modal. When the user selects one from the items and clicks 'OK', I want the selected item to load it's details in the description div on the same page.
<dl>
<dt>Title</dt>
<dd>{Title of selected item here}</dd>
....
</dl>
An approach I think of is to get the selected item's id and load it from the database, then display - although it'll be superfluous, since the record is already loaded. I am using Spring to return the list.
#RequestMapping(method = RequestMethod.GET)
public String index(Model model){
List<Activity> activities = activityService.listActivities();
model.addAttribute("activities", activities);
return "index";
}
Not all columns are displayed in the modal table, so using javascript to "set text" from modal to desc div is not a solution (I think).
Any ideas on how can I display the details from the list without requesting it again from the database?
Or more importantly, is there a better approach in achieving my requirement?
How about loading the description in your JSP directly in hidden divs (display:none;) and then make it visible (dispaly:block;) on user action via only JavaScript, so you don't need to make another request to the server to load the data again from the database

Birt report design validating report parameters while running the report

How to validate the report parameters while running the report in WebViewer. I am using the eclipse to design the reports. I am using the date fields and some select boxes as parameters. But my requirement is - user should not type the date, he should select the date from date picker(jquery UI) and at select boxes I want some kind of validation at server side that is From Category select box should not be greater than To Category select box. I need to do this validation at server side with ajax calls. Is there any way to customize the dialog box to get this functionality or I should design new page to do that and link that report after validation.
I need export functionality also in my page, if i want that how to pass the selected parameters(Export Format, Pages, Auto) to report.
1 Validate Selectbox Parameters
For the validation of your Select Parameters, you could use a Cascading Parameter Group.
First you create a Data Set that is returning the possible values for your "from Category". Then you reate a New Cascading Parameter Group and select Multiple Data Set add a new Paramter(your "from Categroy Prameter") and select the just created Data Set to display.
Close the Parameter group for now, and create a second Data Set that is returning the possible values for your "to Category". Here you can use the Input of your "from Categroy Prameter" form the just created Cascading Parameter Group to limit the results to display.
Now go back to your Cascading Parameter Group and add a second Paramter based on your second Data Set. Make sure both parameters are configured as List Boxes.
If you now select a value for your "from Category" the allowed values for "to Category" will be dynamically updated.
2 Export input parameters for export formats
To export your input parameters simply add them by drag and drop to your Report Page. Parameters can be displayed in every Expression Field with be binding params["parameterName"]. If you just want to display them for a limited kind of Export Formats (e.g. display in .xsl but hide for .html) select the visibility Tab in the Property Editor and select "hide Element" "for specific outputs..." and select the format where you want to hide the field.
3 Datepicker Input
there is no plugin that I know that is providing the Requirement to BIRT out of the box. You can edit the .jsp that is taking the input parameters but here you are on your own. I would prefere to display the Input-Format of a date e.g. dd.MM.yyyy to reduce typo errors.

How do I display the selected values in an <html:select> when the page loads?

I have a JSP page which contains an HTML <select> populated with all countries loaded from a database. Say for example, on "create user" all the country values are loaded in the select menu and I select 5 countries. Those 5 values are loaded into database for that particular user.
Now when I click on "modify user" for that userid again there will be a select menu and all the countries will be loaded in the select menu but those 5 countries should be highlighted/selected.
How do I accomplish this using javascript?
I am not sure if I understand the question correctly, but here is a multiple selection list:
<select multiple="multiple">
<option value ="UK">UK</option>
<option value ="France" selected="selected">France</option>
<option value ="Germany">Germany</option>
<option value ="Italy" selected="selected">Italy</option>
</select>
As I understand it, no javascript is required. If you want to use AJAX to update the list dynamically, then you need to add the selected attribute to the items that need to be highlighted. You can easily do that with a javascript library.
javascript may not be the best answer, although it is certainly doable that way.
In the JSP page, I'm assuming you have a loop that populates the HTML <select> options. In that loop, place a test to see if the current value was selected for the user. If so, add a selected="selected" attribute/value pair to the <option> for that country.
If you really want to do this in javascript, the same logic applies: loop through the option elements for the select, and set selected to true for the appropriate elements.
As an alternative, you can have your JSP generate the appropriate javascript lines to set only those options that are selected, saving a loop through all countries on page load.
Have the javascript function invoked through the page load event so that the selections are made when the page is displayed.

Categories