Show animated progress loading gif on submit without ajax

前端 未结 1 1131
日久生厌
日久生厌 2021-01-24 15:06

I want to show a progress bar when a button is clicked, and remove it when the action is finished and refreshes/navigates the page.

I have a h:panelGroup wh

相关标签:
1条回答
  • 2021-01-24 15:41

    So, you basically want to display it before the webbrowser sends the form submit request to the server and waits for its response. The only way to achieve that is manipulating the HTML DOM tree using JavaScript. You probably already know, JSF is just a HTML code generator and all the webbrowser has at hands it the HTML DOM tree, and that JavaScript runs in webbrowser and is able to listen on UI events which you can specify in a.o. HTML element's on* attribute.

    Given a

    <img id="progressbar" src="progress.gif" style="display:none" />
    

    You can show it on click of a command button as below

    <h:commandButton ... onclick="document.getElementById('progressbar').style.display='block'" />
    

    Once the page refreshes, it will be display:none again all by itself.

    See also:

    • HTMLDog.com HTML tutorials
    • HTMLDog.com JavaScript tutorials
    0 讨论(0)
提交回复
热议问题