0

By Now on clicking a button it loads Visualforce Page in on click Javascript mode in a Button. My New Requirement is, In on click javascript Before Loading Visualforce page progress bar should appear.

Like this,

I have Referred this Links

https://jsfiddle.net/kimmobrunfeldt/mxjj6jom/

I can do it with Visualforce page mode in a bUtton instaed of that i Want in Onclick Java script mode

1
  • Can you add your code?
    – RCS
    Jan 11, 2017 at 7:05

1 Answer 1

4

Here's a self-contained example that demonstrates this. I did not use jQuery at all; you can write this fully native in Visualforce. Feel free to replace any parts you don't like.

Controller

This code just waits approximately 3 seconds so you can see how the page loads.

public class LoadingDemo {
    public void wait3Seconds() {
        Long startTime = DateTime.now().getTime();
        while(DateTime.now().getTime()-startTime<3000);
    }
}

Page

We use apex:actionStatus to render a pretty animation while the page loads.

<apex:page controller="LoadingDemo">
    <apex:form id="form">
        <apex:actionFunction name="loadPageContent" action="{!wait3Seconds}" status="loading" reRender="form" />
        This area hosts the main content. You can put whatever you want here.
    </apex:form>
    <apex:actionStatus id="loading">
        <apex:facet name="start">
        <div style="z-index: 1000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: black; opacity: 0.25">
            
        </div>
        <div style="z-index: 1001; text-align: center; vertical-align: middle; position: fixed; top: 50%; left: 50%; padding: 1em; margin: -2em -10em; width: 20em; height: 32px; background: white; border-radius: 5px">
            <img src="/img/loading32.gif" style="vertical-align: middle; padding-right: 1em" />
            Loading...
        </div>
        </apex:facet>
    </apex:actionStatus>
    <script>
        loadPageContent();
    </script>
</apex:page>
3
  • @sfdcfox..Here i need to first check whether user had entered some value then only display the progress bar..I had written <apex:input required="true""> which checks for blank after value is filled the loading screen should appear..Can you guide me? Oct 1, 2017 at 13:15
  • @DeepakAgarwal you'd have to call some JS to verify the input values, then call an actionFunction to call the server.
    – sfdcfox
    Oct 1, 2017 at 16:58
  • Input fields i am verifying with <apex:input required="true">.After every value is filled i just need to show that loading icon. Oct 6, 2017 at 8:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .