Alright so what I want to do is save text from my table to the database. The table is dynamically generated via a hibernate connection to the db. A sample of the html in the .jsp for the table:
display:column property="ticketId" href="/ossWeb/displayTicketEdit.do" paramId="ticketId" title="Ticket ID"/>
<display:column property="ATCNotes" title="ATC Notes" class="notes" />
<display:column property="issue" title="Issue"/>
<display:column property="status" title="Status"/>
Each property maps directly to a column of a view in the db.
I use this jQuery to allow any cell in the ATC Notes column to be clicked and turn into a text box:
$(".notes").live('click',(
function(){
var text = $(this).text();
$(this).text('');
$('<input type="text" />').appendTo($(this)).val(text).select().blur(
function(){
var newText = $(this).val();
$(this).parent().text(newText).find('input:text').remove();
});
}));
When you click off the cell, the text replaces what was already in the cell. Each row corresponds to a ticketId as can be seen in my first line of the jsp. Now my question is, how do I get that entered text to the db? I have a check box on each row, and for that, I can just assign it a value of "${ATCQueue.ticketId}" but there doesn't seem to be any similar way to differentiate each cell in the ATC Notes column.
I've heard of AJAX being used for something somewhat close to this, but honestly I'm pretty new to this and know next to nothing about AJAX.
I don't think you mandatorily need AJAX for this. You can write an action servlet and submit the form.
Or you can go for native AJAX using XMLHttpRequest/Response. Another way would be to use DWR framework.
1.First thing if you want to save bulk amount of data I i.e; multiple row and multiple column then you need to set a flag(a hidden field or
local storage in html 5) for modified rows.
2.Iterate through th rows of the table and generate xml or json .
3.yes you heard it right the Ajax, now send the data to your code behind through Ajax call.
Related
I want to pass a javascript variable to my servlet, where I need to use it.
In javascript, the variable count returns the rows of my table and I can show count in the jsp, using $('#counter').html(count); , but I cannot pass count's value to my servlet. I tried document.getElementById("hiddenField").value=count; but it doesn't work.
Javascript
<script>
var count = 3;
$(function() {
$('#counter').html(count);
$('#addButton').bind('click', function() {
count = document.getElementById("dataTable").getElementsByTagName("tr").length;
$('#counter').html(count);
});
$('#deleteButton').bind('click', function() {
count = document.getElementById("dataTable").getElementsByTagName("tr").length;
$('#counter').html(count);
});
});
document.getElementById("hiddenField").value=count; // ???
</script>
JSP
Count: <span id="counter"></span> <%-- it works --%>
<form method="post" action="newteamsubmit">
...
<input type="hidden" id="hiddenField" name ="countRows" />
<input type="submit" name ="button1" value=" Submit " />
<input type="submit" name = "button1" value=" Cancel " />
</form>
Servlet
String cr = request.getParameter("countRows"); //I' ve tried also to convert it
// to int, but that's not my problem, since I cannot pass the value as a start
I've spent many hours, trying to figure out how I can access a javascript variable in jsp, but I haven't found any solution.
Thanks in advance.
The count is computed each time the add button or the delete button are clicked. But you only set the hidden field value once, when the page is loaded (and its value is thus hard-coded to 3).
You must set it, as you're doing for the #counter element, in your click handlers:
$('#addButton').bind('click', function() {
count = document.getElementById("dataTable").getElementsByTagName("tr").length;
$('#counter').html(count);
$('#hiddenField').val(count);
});
$('#deleteButton').bind('click', function() {
count = document.getElementById("dataTable").getElementsByTagName("tr").length;
$('#counter').html(count);
$('#hiddenField').val(count);
});
Also note that you're repeating exactly the same code in two click handlers here. You should do that only once, for the two buttons:
$('#addButton, #deleteButton').bind('click', function() {
count = document.getElementById("dataTable").getElementsByTagName("tr").length;
$('#counter').html(count);
$('#hiddenField').val(count);
});
or even, since you're using jQuery:
$('#addButton, #deleteButton').bind('click', function() {
count = $("#dataTable tr").length;
$('#counter').html(count);
$('#hiddenField').val(count);
});
document.getElementById('hiddenField').value is not set because it is outside your document.ready. Put it inside your click handler.
Make sure of 2 things -
There is only one element with id "hiddenField" on your page.
Make sure that the following code
document.getElementById("hiddenField").value=count;
is after in the page.
Just make sure that js sets the hiddenField after the element has been loaded.
3. check for any JS errors using Javascript console.
Rest it looks good
The main issue here is that you are trying to access from the server, a variable that only exists at the client. To access that variable you have to send it from the client to the server using AJAX to trigger some form of API in the backend. REST, SOAP or XML-RPC are common technologies used for this sort of thing. The server side code is used for generating the UI and providing it with data from a database or such. Commonly the UI is generated only once, and then the client calls the server asking for more data in response to user actions, like clicking a button.
Imagine a table filled with information about books: title, author, publish date etc. This table can get quite large, and traditionally this table will be split up over several pages and possibly a dynamic filter. To save bandwidth and increase the user experience by not loading the entire page from scratch you can use AJAX to ask the server for just the relevant data. Doing so the page updates dynamically and smoothly for the user.
In your case, you can use this technique to update the server every time the user clicks the button.
If however you are really just looking to update a hidden field in a form with a value as the user performs actions, and the server wont do anything with it except show it you can just use javascript.
Remember also that the request variable contains the data you post to the server when you submit the form. The servlet will get the data after the client has posted it, which is after the JSP has generated the page. The sequence of the code execution is JSP -> Javascript -> Servlet.
Hope this helps!
You can use this way:
document.forms[0].countRows.value = counter
Hope this will help you
I am trying to make an editable table in jsp. I want to include also a delete button, on the other hand when i click the delete button i want to remove the row and also to remove the entry in the database.
I am using jsp and MySQL on Liferay portlets.
Can you please help me?
Thanks in advance!!
You can put a link called "Delet entry" in front of each row in your JSP. This link will execute a Servlet py getting aparameter from the JSP. Something whcih will look like this:
<a href="/DeleteServlet?id=<%=your_id_row%>"Delete entry</a>
Then in your Servlet's doGet method
get the id param by String id = request.getParameter("id");
and then delete the row by an SQL query.
Here is the situation. I have a drop down menu. The option sin this drop down menu are being populated by fetching some values from the database. To do this following is what i have done.. :-
<select name="product_list" onchange="selectProduct(this.value)">
<option value="none">Select one</option>
<%
List<String> options = new ArrayList<String>();
DynamicCombo comboBox = new DynamicCombo();
options = comboBox.generateComboBox();
Collections.sort(options);
int tempVar = 0;
while (tempVar < options.size()) {
out.print("<option value=\"");
out.print(options.get(tempVar));
out.print("\">");
out.print(options.get(tempVar));
out.print("</option>");
tempVar++;
}
%>
</select>
DynamicCombo is a class that has a method called 'generateComboBox()'. This method simply returns an array list containing all the values that are fetched from the database, which is what i need to show in my drop down box in the front end (jsp page). On my jsp page i simply iterate through this list and print it as options appropriately.
This works absolutely fine.
Now i have another text box on my form, say 'textbox1'. Now the requirement is that this text box value should be updated depending on what the user has selected from the above drop down box.
So for example if the user selects 'prod1'(which is a primary key in the backend database table) option from the drop down box, then the corresponding value ( the product name) should be fetched from the database table and should be updated in the textbox named 'textbox1'.
The other thing is this entire thing is contained in a form which is supposed to be finally submitted to the servlet for further processing.
So how can i achieve this.
i figured out the solution to my own problem. It might not be the most elegant way of doing it, but it does the job pretty well.
So as per my requirement, what i exactly wanted to do was.... insert a value (that will be fetched from the database) into a text box on my form depending on what the user chooses from the drop down box that is already present on my form.
To achieve this, i went about and thought if some how i could nest a form withing my main form, it'd solve my issue. But i discovered that nesting of forms is not allowed. So the next option i thought of was to some how submit the same form without the user clicking on the submit button and also handle it appropriately as an 'incomplete' submit (in the sense that the form is still to be submitted manually by the user by clicking on the submit button) on the server.
So i simply made use of the 'onChange' event of a drop down box. I created an additional hidden field on my form.I wrote a simple javascript function that would simply set the value of the hidden field to the string-"partial Submit" and would submit my main form (say named 'form1') as :-
document.getElementById("hidden_id").setAttribute("value","partial submit");
form1.submit;
The function that does the above will be called whenever (and everytime) the onchange event of the drop down box gets fired.
When the user finally clicks on the submit button on the form to submit the finally completed form, then another javascript function is called that simply sets the value of the hidden field on the form to the string, "final submit" and would submit the form as :-
document.getElementById("hidden_id").setAttribute("value","final submit");
form1.submit;
Now on my server, i checked for the value of this hidden field as :-
if(request.getParameter("hidden_id").equals("partial Submit"))
{
// make a database connection, pass the value user selected from the drop down box
// to a prepared statement that does the query for getting the 'productName' from
// the database, collect the returned string in a variable and set a
// request attribute with this returned value. This value can simply be used in the
// jsp to fill in the value part of the textbox1.
}
else
{
if(request.getParameter("hidden_id").equals("final Submit"))
{
// do the rest of the final processing that needs to be done when user finally
// submits the completed form.
}
else
{
// throw an exception to take care of the possibility that the user might send
// in a 3rd value as a value for the hidden field.
}
}
Since you havent provided the code for selectProduct(this.value) , i presume that it submits the jsp page as when you change the value in the drop down.
If that the case in the servelt, set the value that you want to show in jsp in request object
request.setAttribute("valuetodisplay" ,valuetodisplay);
and now in jsp
<input type="text" value ='<%= request.getAttribute("valuetodisplay")%>' />
I am using the following code to develop a dropdown list in a html form.
<html:select property="complaintCategory" onchange="showfield(this.options[this.selectedIndex].value)" >
<html:option value="option1">option1</html:option>
<html:option value="option2">option2</html:option>
<html:option value="option3">option3</html:option>
<html:option value="Other">Other</html:option>
</html:select>
<div id="div1"></div>
I want to create a text box so that user can write something when they select Other option. The function showField(name) is creating the new text box.
function showfield(name)
{
if(name=='Other')document.getElementById('div1').innerHTML='<input type="text" name="complaintCategory" />';
else document.getElementById('div1').innerHTML='';
}
The problem I am facing is that when I select "Other" option from the dropdown list and then write something on it, it is not saving the texts, it is saved as value Other only. I want to pass the texts written in the text box as the complaintCategory. Would really appreciate someone's help on this, i am stuck.
Thanks in advance...
(I'm working on the assumption that <html:select property="complaintCategory" will output <select name="complaintCategory". It is usually helpful to narrow down the problem to server side code or client side code and provide only one of them.)
When you submit the form (after selecting other) you will have 2 elements with the same name.
Whatever server side code you are using to read the submitted form data, it appears to be taking the first value.
Either:
Modify your server side code to get the second value (I don't know the API you are using to parse the form data so I can't tell you the specifics for that)
Call the generated input by a different name and an if statement.
e.g.
client side:
if(name=='Other')document.getElementById('div1').innerHTML='<input type="text" name="otherComplaintCategory" />';
server side (psuedo code):
IF complaintCategory is "Other":
THEN complaintCategory = otherComplaintCategory
I have a table which has certain attributes and a button in the last column of each row.
<tr>
<td>B001</td>
<td>The Catcher In The Rye</td>
<td>199</td>
<td><select>
<option>1</option>
<option>2</option>
<option>3</option>
</select></td>
<td><button>Add To Cart</button></td>
</tr>
I have to get the entire row value in id, name, price, quantity respectively in the Servlet I am using. How do I do that?
Using forms we do something like -
String name = request.getParameter("LoginName");
But there is no id here for the table. So how to achieve the same so that I can retrieve a particular row's values?
Put some hidden fields inside your page to carry selected row data.
Set those hidden fields with the clicked row data using javascript when button is clicked.
And submit the form.
try this http://jsfiddle.net/LBJWQ/7/
This is JSP & Servlets 101. You should be reading up on HTML and Javascript as well.