Display data from preloaded list (Spring+JSP) - javascript

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

Related

Populating listbox with a function that gets values from a table

I have 2 listboxes on my web page. I want to populate second listbox by a value selected in first list box. When I select an option in firstlistbox it queries a table on my backend and populates the secondlist box based on the results. I cannot use php script inside a javasript so what should I do?
You are asking how create a sub categories list box. You need create it easily using AJAX.
Here are the steps you need to do.
Populate first list box and call function loadData() when you change item.
send ajax request to getdata.php with selected category_Id parameter
Make getdata.php to output second list box according to category_Id
Display ajax response on page as html
I found this article for you.
Hope it helps.

Dynamic JSP input boxes?

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.

PHP-JS Button click take onyl the last inserted value

First of all sorry for my bad english ^^
I've a table named CLIENT with some records. Coloumns of the table are ID-NAME-DESCRIPTION
My purpose is to edit these record, with a button EDIT which is located in another column next to the record. I have a button for each record.
At the click of EDIT button I want that clients data (NAME-DESCRIPTION) will be displayed in a form (that have 1 textbox for NAME and 1 textarea for DESCRIPTION).
In this way, with edit button I'll edit the values of the record, but this it's another thing, not important now.
The problem is that, whatever the record associated with the edit button in the table, in the form It's showed only the data of the last customer on the table. No matter what if I click the first, second or another record .... it always displays the last.
I do all the procedure in the same php page, using javascript for show the values in the form.
Pratical expample.
NAME DESCRIPTION EDIT
Cat Kitten button
Dog Puppy button
If I click the button of cat, or the button of dog, in the form I see dog puppy...the last record.
Here the code.
Table with the script
http://pastebin.com/44xCC3aw
Form where I want see the values of the record
http://pastebin.com/vNTimhJ5
Thank you in advice
You are using PHP (server-side) and Javascript (client-side) with eachother. This is a bad idea.
You are now overwriting the Javascript function funzione by having the PHP side loop through it and creating the same function over and over.
A better practice would be to have the function generate once, and retrieve the information from the server when you've clicked on the button. This is common practice and done using AJAX.
In the less save solution, you could keep an array (created by the PHP part of the script) in Javascript, where you keep track of the IDs. You then make sure you have only 1 function funzione that takes an ID like this: funzione(id). The function retrieves the ID from the created array and shows the correct information in your textfields.

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.

How to refresh CGridView control using values from other controls

I have set up a CGridView widget in my application. It displays a list of user accounts. I also have two other drop down lists that basically filter out the users. My problem is that I cannot use the values from the drop down lists to filter out the users. What I actually need is to refresh the list of user accounts based on the selected values from the drop down lists.
How am I supposed to do that with Javascript?
Yes you use Javascript to do this. CGridView's jquery.yiigridview.js has $('#id-of-grid').yiiGridView('update', options) function which can be used for such things:
function(){// in your function
$('#id-of-grid').yiiGridView('update', {data: {value_of_list: $(this).val()}});
}
This will call the url that renders this view with a parameter value_of_list with the value selected in the drop down.
Edit:
The $('#id-of-grid').yiiGridView('update', options) signature indicates that you can specify which grid to update, and also the specific options to be sent. In the above example i have sent only data, i could have also specified which url to send the data to using url option. The full list of options can be seen in the link i have specified above.

Categories