I know its a basic question and please bear with this.
I'm new to struts frame work and I'm creating a sample application using struts 1.2. I've inserted few values into the database using form beans. And i'm displaying all the database records in the jsp page using function. and i also placed the radio button for each row..
Now my question is, i want to select a particular data from the records displayed in the jsp page by clicking the radio button and i need to store the selected records into the another table.
Give me some suggestion regarding the condition specified above...
Thanks in advance..
Once you set those unique values in radio button, you can get the values for your purpose. Like using jquery,
var selRadio = $('input:radio[name=cname]:checked').val();
You can find out fiddle explains how to get checked value.
Use some ajax for send that value to server (servlet) and add the values to new table without refresh entire page.
$.ajax({
url : "ur_servlet_url" + selRadio,
type : "POST",
async : false,
success : function(data) {
alert("success");
}
});
Let me know if this helps.
Related
I have a situation that i can't handle and thats why need your help.
I have a jsp page (mention as A in below pic) where there are many rows and each of them can be edited.
At the end of the A jsp page, there is an option to print the page data.
Now, if some body clicks on the edit link/button, another page will open contain the data for that particular row and user can modify the data in the second page(i,e B).
Now, i want, as soon as the user save the B page, A page should be refreshed automatically to provid the updated data for printing.
Please guide me on how to acheive that . I'm using Spring MVC framework for the java application.
The Spring MVC way to meet your requirement is:
the Edit buttons in page A should be links calling page B with the id of the line to edit, something like Edit
the SaveAndClose button in page B should be a submit button that posts the edited values to a controller method. After server side processing, the controller method should redirect to page A. As a side effect, you use the PostRedirectGet pattern which avoids the ugly do you want to send again ... ?"
#RequestMapping(path = "...", method = RequestMethod.POST)
public String saveAndClose(...) {
...
return "redirect:/path/to/pageA";
}
Of course this will display all pages in same window.
If you want to redisplay the window containing pageA on the Save & Close from page B, still allowing the save to be known to the server, you should redirect to a special page (say pageC) that just contains javascript code asking the browser to redisplay pageA. You can either pass the name of the window containing pageA in a hidden field, or you can decide that as the programmer of the web application you know where it should be.
It can be achieved like this. Follow the steps mentioned
1] When you click on edit button in Page A, pass the id of the row to Page B as request parameter.
2]In Page B JSP receive the id of the row and store it in a hidden element.
3]Create a JavaScript function in Page A which should receive row Id and Modified data as parameter. Lets name it this function as updateRows(rowId,modifiedData). In this function write code to update the with id 'rowId' with modified data using javascript
4]Now When you click on 'Save & Close' Button in Page B. Save the data using call to server. If save succeeds then invoke the function updateRows passing it rowId stored in hidden element and modified data as parameters. This function will update the DOM with latest data.
This way you will avoid making server call to refresh the data
There is one more way if you don't want to use ajax.
In Page A define a javascript function refreshPageA(). In this function add page refreshing logic.
When you click on 'Save & Close' button in Page B save the data in server and forward to a plain jsp. In this JSP declare a onload handler. Inside onload handler add following code
opener.refreshPageA();
window.close()
This will refresh pageA and close page B window
Let me explain clearly what i am doing and what i want to achieve. I have jsp page, which holds two drop downs along with search button and a table with four columns. Two of the table columns data is same as drop downs data.
Initially when the jsp loads, these dropdowns set to ALL and by defaults all the results are showed in jsp table with single query fire to DB.
What i want is when a particular item is selected in both the dropdowns. I would like to display the results related to this search in table.
Do i need to fire a query for every search? because i have already got the total data at the beginning.
Any help would be appreciated?
Once you get all the data from DB
Store the values in a Pojo
Once your drop down is filled and pressed search button
Go for a ajax call and pass your drop down select to your controller
Filter your new ArrayList\Object based on your drop down select and update
your object which holds the value needed to populate your table
Populate your table with the updated object upon returning to your jsp.
Ajax Code
$.ajax({
url:'filterTableData.do',
cache:false,
type: 'POST',
dataType: 'text',
data: ({'dropdownValue1' : dropdownValue1 ,'dropdownValue2' : dropdownValue2 }),
error: function (res, textStatus, errorThrown) {
alert(' Error :' + errorThrown);
},
success: function(res){
window.location.replace("jsptobedisplayed.do");
}
});
Java code -
#RequestMapping("/filterTableData")
#ResponseBody
public String deleteProd(#RequestParam String dropdownValue1,#RequestParam String dropdownValue2){
----> your logic <--------}
Alternate was is once you press search , then go back to java and do the filter based on the drop down value and return the updated table object and populate the table.
I am using jquery FormWizard and would like to use submit button on last screen as a way to submit the form and go to next screen.
Issue is I am embedding this jquery script in my Java code. Right now I have a "submit" button from jquery form wizard and I have a "continue" button from my Java code. So user submits the form by pressing "submit" and then press "continue" to go to next screen. Not an ideal situation for user.
If I just use "continue" without pressing submit, it doesn't store any information of the form. Once I press "submit" and then "continue", all information on the form will be saved in the database. How can I use continue button as submit and also to proceed to next screen so that I don't need that submit button on last screen.
Script sc = new Script();
sc.add("$(function(){$('#formScreenQuestions').formwizard({formPluginEnabled: true,validationEnabled: true,focusFirstInput : true,disableUIStyles : true});});");
HEADER.add(sc);
Form form = new Form("criteria");
form.set(ID, "formScreenQuestions");
Div dh = new Div();
dh.set(ID, "lastStep");
dh.set(CLASS,"step");
Table vt = new Table();
vt.row();
vt.cell(text("Please press SUBMIT before pressing CONTINUE"));
==== showing some questions with checkboxes to select =====
dh.add(vt);
Div db = new Div();
db.set(ID,"navigation");
Table bt = new Table();
bt.row();
bt.cell("<input type='reset',id='back',value='Back' />");
bt.cell("<input type='submit',id='next',value='Next' />");
db.add(bt);
form.add(dv);
form.add(db);
You could add an "on submit" event to your form.
http://api.jquery.com/submit/
Make a server-side redirection if submit is ok, to the next page.
OR
On the submit callback make a
$("#continueButton").click();
If I understand correctly, formWizard just helps you divide your form in multiple steps using a wizard.
You cannot just bind click the button because it would trigger when ever one clicks next.
What you should do is use this event from formWizard, then you wouldn't be adding complexity since you wouldn't be overriding any of the functionalities of the plugin you're using :
$("#demoForm").bind("after_remote_ajax", function(event, data){
if(event.success && event.currentStep === finalStep) {
windows.location.href="URL to be forwared to";
}
});
Propably the best way is to use jQuery's submit event and using AJAX submit it to server:
$("#form-name").submit(function(){
$.post("submit-path", function(result){
// do something with result
});
return false;
});
If you are using JQuery -- why not used the Power of AJAX and make it more better user experience -
Define a jQuery event on Continue button :
$("#continue-button").click(function(){
windows.location.href="URL to be forwared to";
}):
Submit an AJAX Request on click of Submit Button(Look at the documentation of AJAX method of jquery has how to show processing icon"
AJAX Request :
$.ajax({
url : actionURL,
dataType : <your dataType>,
contentType : <your Content Type>,
type : 'post',
data : <bla bla>,
success : function(data) {
//Show Continue button
}
});
};
wouldnt it be better if you use the continue button in the jquery form, and remove the submit button from Java?
$(function(){
// bind a callback to the before_step_shown event
$("#demoForm").bind("before_step_shown", function(event, data){
if(!data.isBackNavigation){
doSubmit();
}
});
});
I think this is a design issue. If you are trying to create a multistep form where data are saved between each step, you should have a submit button on every step of the form, submit the data to the server, keep the track of the step using an input hidden value then send the next part of the form to the client. It is safer because your form will work even if javascript is not enabled client side. In such design, the process could be improved later to add an AJAX functionality.
If you do not need the data to be send between each steps, then you can do a single form with some kind of panel for each subforms that would be shown or hidden depending where the client is.
I m working on a Spring MVC java web application . The app contains a JSP page , on it I have a table in which I display data from the DB. The data is diplayed in text inputs which belong to the class .editable
I implemented a script that does the following :
-select the text inputs from the table ,
-create a span with the data from the text inputs
-hides the text input
function editableInput() {
$('.editable').each(function() {
var input = $(this);
input.before("<span class='spanEditable'>" + input.val() + "</span>");
input.hide();
});
}
I later use a script to display the text input for a row , when the row is selected from a radio input.
All of this for making a good looking table that permits CRUD operations , on a row , when the row is selected , when no row is selected , it displays all the table content like plain text , not using a text input.
The problem i am facing : When the page is loading it displays all the table rows like it is initially made , with all the data in text inputs , after the script is being completed all the data is displayed in the spans. This looks really bad , until all the stuff is loaded.
How can i use a loading gif , until the function editableInput() is completed ?
If i would use a AJAX call i would know how to add the loading gif , but this is how i`m calling the function :
$(document).ready(function() {
editableInput(); )};
You may experiment with jQuery BlockUI Plugin (v2)
Well you can try this one, though rather crude but will work. On loading the page wrap your table into another div using:
$("table#table1").wrap("<div id='dvWrapp' style='background-color:#000;'/>");
then after completing the editableInput call just unwrap it:
$("table#table1").unwrap();
You can set style for the wrapper div to show loading image or some message also.
Please try this example: http://jsfiddle.net/amantur/FkjkR/
I have two dropdowns in html. Both dropdowns are getting data mysql first dropdown is "hostgroup" having value like "windows,linux" and second dropdown is "host" having value like"office,home,sidearea,localhost"
Basically I want to do it so when I select "linux" is hostgroup combobox it will filter "host" dropdown box and show only localhost in "host" dropdown and when I select "windows" in hostgroup dropdown it will filter it and remove localhost from host dropdown
My code for filling dropdown in html is,
html.append("<select id='hosts' name='hosts' style='width: 180px' onchange=\"document.forms['form1'].submit();\">>");
//if(rs != null)
//{
while(rshostgroup.next())
{
html.append("<option value='"+rshostgroup.getString(2)+"'>"+rshostgroup.getString(1)+"</option>");
//html.append("<option value='web'>web</option>");
}
//}
html.append("<select>");
html.append("</td>");
html.append("</tr>");
html.append("<tr>");
html.append("<td>");
html.append("Host");
html.append("</td>");
html.append("<td>");
html.append("<select id='hosts' name='hosts' style='width: 180px' onchange=\"document.forms['form1'].submit();\">>");
//if(rs != null)
//{
while(rshost.next())
{
html.append("<option value='"+rshost.getString(2)+"'>"+rshost.getString(1)+"</option>");
//html.append("<option value='web'>web</option>");
}
//}
html.append("<select>");
Please dont get confuse that what html.append is and what is option value comming from
Actually I am using string builder appending my string builder html in .java(class) file and calling class html appended method in jsp. It is working fine and the option value of drop down is filling from ResultSet rs and rshost having data from mysql.
Firstly using java to build HTML element is a terribly bad idea.
Use JSTL to loop through the dropdown options instead of using Java to spit out HTML code.
Secondly the problem you mention has nothing to do with Java and everything to do with JavaScript.
Well, not entirely true as you might have to make an AJAX request to server get values to populate your secondary dropdown box.
What you need to do is attach a onChange listener for the primary dropdown so that when it changes your javascript code either makes a AJAX call to server to get values for your secondary dropdown box, or use hardcoded values held in some javascript variables.
You will have to loop through the secondary dropdown to remove all previous values and add new dropdown options to it or alternately you can remove the secondary dropdown box entirely and recreate it with the new values based on the selection of the primary dropdown box.
There's already more than enough articles in the internet so use your fiend Google to find the ones that suits your needs closely.