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/
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
In my jsp page , I have 2 different select option tags menü . I fill first one with a list from mysql database. when i select one value from this List ,I want to fill second select tag with a List which sended from Mysql . So , In Ajax , When i send a List from servlet to jsp , how to fill second Select option menu with this list in Jsp page ?
Use a javascript library like JQuery (that is well known and widely used/tested)
http://api.jquery.com/jquery.ajax/
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.
I am using antisamy.xml and antisamy.jar for preventing XSS.
So when i enter a script tag in the text box it truncates it and the other text apart from the tag is stored in the database.
I want to store the script/tag in the database too, but without applying the script/tag.
For example,
If i enter alert(); in the text box on the jsp page.
I want the whole thing saved in db but i should not get the alert on ui.
Hello i need some help to figure out what to do .
I am trying to create a page that has a list of events and each time I click one of the list's elements a different photo gallery should load. I did this by loading each gallery in a different iframe.
The problem is that right now the only thing it dose is loading the first galery and the other ones don't seem to manage loading any pictures (if I refresh each frame than they work fine)
What should i do?
This is the script I used in the webpage
You can find the page source here http://www.avantsolutions.ro/exp.txt
You can try with jQuery UI Plugin instead of iFrame.
On clicking of list item(West pane), you can load center pane div with corresponding images.
Check the examples here.
You can use jQuery's load function to load a gallery via ajax.
$(selectorForYourGalleryDisplayDiv).load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )
Load will take the result from url, if you need to pass it data it will use a HTTP POST, and replace the inner html of the wrapped set it is called on.
I don't know the internals of your architecture, but the main process is giving your galleries Ids, pass them to the server using the JSON format, your code will use that id to get what's needed for the gallery, render the html and return it.
load will drop that html into the elements that match selectorForYourGalleryDisplayDiv.