CODEWITHSUNDEEP
javajspservlets
LGAP
LGAP

Reputation: 2463

Displaying .gif file in JSP form using Servlet program

I have written a servlet java program.

During the execution of one particular loop of the program, I need the a gif file to be displayed in the JSP form indicating that the process is going on.

I am not aware of implementing the same inside the loop.

Kindly advise on how the same has to be done, such that a gif file is displayed in the JSP form and it would be of great use if u can suggest any .gif file for the purpose of processing display. Am a beginner in java.

Thanks in advance

Upvotes: 2

Views: 5335

Answers (1)

BalusC
BalusC

Reputation: 1109122

JSP is supposed to output HTML. Images in HTML are to be displayed using <img> tag. This tag has a src attribute which is supposed to point to a public web resource. Here's an example:

<img src="progress.gif">

When opening the JSP page by http://example.com/context/page, this assumes the progress.gif file to be present in http://example.com/context/progress.gif (i.e. in the root of the public webcontent folder).

Now, you want to display the image only when the submit button is pressed in order to wait for the response to be finished. You can do this by initially hiding the image using CSS and redisplaying it using JavaScript.

HTML:

<input type="submit" onclick="showProgress()">
<img id="progress" src="progress.gif">

CSS:

#progress { 
    display: none;
}

JavaScript

function showProgress() {
    document.getElementById('progress').style.display = 'block';
}

When the response is finished, it will refresh the page with the new target page and the progress image will "automatically" disappear.

Update: here's how the complete JSP file can look like:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <style>
            #progress { 
                display: none;
            }
        </style>
        <script>
            function showProgress() {
                document.getElementById('progress').style.display = 'block';
            }
        </script>
    </head>
    <body>
        <form>
            <input type="submit" onclick="showProgress()">
            <img id="progress" src="progress.gif">
        </form>
    </body>
</html>

Or when CSS/JS is externalized in its own file (recommended):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body>
        <form>
            <input type="submit" onclick="showProgress()">
            <img id="progress" src="progress.gif">
        </form>
    </body>
</html>

See also:

Upvotes: 5

Related Questions