0

I am reloading the div every 30 seconds without reloading the whole page and also the user can see loading image when the refresh is happening meaning once the refresh starts it will gray the background and show the loading image and everything is working fine.

Below is the image I am using which is on this url -http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif

enter image description here

<script>
$(document).ready(function(){
    // Create overlay and append to body:
    $('<div id="overlay"/>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: $(window).height() + 'px',
        opacity:0.4, 
        background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
    }).hide().appendTo('body');

    // Execute refresh with interval:
    setInterval(refresh, 30 * 1000);
});
</script>

<script>
//Create a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    // Retrieve data:
    $.ajax({
        url: 'dataInfo.jsp',
        type: 'GET',
        success: function(data){
            // onSuccess take only the container content
            var content =  $($.parseHTML(data)).filter(".container"); 
            //Replace content inside the div
            $('.container').replaceWith(content);
            // HIDE the overlay:
            $('#overlay').hide();
        }
    });
}
</script>

And below is my div which I am reloading every 30 seconds -

    <div class="container">
        <!-- some table here -->
    </div>

Now everything is working fine. The only issue is when I will deploy this code in production, it will not work since I am using the image url as it is http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif which will get blocked in production because of firewall issue.

So to avoid this issue, I have downloaded the image locally in my webapp/resources/img folder in my project and now I am not sure how should I modify my code in such a way so that I can use the image from my local directory instead of using it from the URL directly?

I know I need to use img tag but how do I modify my code accordingly?

Any example will be appreciated on this.

1 Answer 1

1

Just replace http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif with an absolute url. Change it to webapp/resources/img/page-loader.gif. Or you can put the file in the same directory as your page and simple use page-loader.gif, which is a relative url.

Sign up to request clarification or add additional context in comments.

3 Comments

Thanks. I tried using the fully qualified name of that gif file like this background: 'lightgray url(/testweb/src/main/webapp/resources/img/page-loader.gif) no-repeat center' and it doesn't work for me and I was not able to see the image somehow when I restarted the server.. There is something wrong I am doing for sure. Any thoughts?
Is testweb a folder at the root of your web app?
@AKIWEB Than I don't know what's wrong, it should work. Try ~/testweb/src/main/webapp/resources/img/page-loader.gif maybe?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.