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(); )};