CODEWITHSUNDEEP
javascriptcssiconsloading
Blackjack
Blackjack

Reputation: 1065

PHP: How to display loading icon using jQuery?

I've a Yii2 project, and in my project I've script inside my php file that I used to send data and to show loading icon (.gif).

Script jQuery:

<script>
function displayResult() {
    var x = document.getElementById('bootstrap-duallistbox-selected-list_CustomizeHeader[list_header][]');
    document.getElementById("show").style.visibility = "visible";
    if (x.length == 24) {
        var txt = "";
        var val = "";
        for (var i = 0; i < x.length; i++) {
            txt += x[i].text + ",";
            val += x[i].value + ",";
        }
        window.location = 'result?txt=' + btoa(txt) + '&val=' + btoa(val);
    } else {
        alert("At least 24 Headers!");
    }
}
</script>

Style CSS:

<style>
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }

#show{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../../web/img/ajax-loader6.gif) center no-repeat #fff;
}
</style>

Php Code:

<p>
    <button type="button" onclick="displayResult()" class="btn btn-success">Process the headers</button>
</p>
    <div id='show'></div>

You can see in my CSS, I call a .gif file. All code and script above successfully display the icon, but the icon showed as .jpg file. It doesn't show moving graphic (.gif).

Anyone know how to display icon .gif (moving graphic) in script?

Thanks

Edited:

I've try to use $("#loading").show(); or $("#loading").fadeIn();, and it give me nothing, this method didn't display the icon.

But if I use document.getElementById("loading").style.visibility = "visible";, it give me an icon displayed, but the icon didn't display as a .gif file, it's displayed as a .jpg file (non-moving graphic).

Upvotes: 0

Views: 1354

Answers (2)

CODE_17
CODE_17

Reputation: 51

You can show the elements by using 

$('#show').show();

and to hide the same use 

$('#show').hide();

Make sure you are using the correct format in gif file (just changing jpeg format to gif won't work). You can try using a sample gif file from google to check this or create a gif here http://www.ajaxload.info/

Upvotes: 1

Kenziiee Flavius
Kenziiee Flavius

Reputation: 1949

This is exactly how i do it in my live project 

//Example function called get accounts
    getAccounts: function () {
     //You can start loading here if the loading icon isnt already displayed by default
            $('.loading').show();

    //Do some function here
    this.$http.get('getRequestRoute', function (data) {
        this.accounts = data;

        //When the function is complete you can hide the loading icon
        $('.loading').hide();

    })

},

The basics here is to show the loading icon where ever you want to show it, either by default or display it when you want it to display, then when a set of actions has been completed you then hide the loading icon.

In the example above my loading icon has a class of loading so it can be easily accessed using jQuery $('.loading').

I use the hide and show methods of jquery which do exactly what you think they do, hide and show an element on the web page. this is essentially how you display and hide a loading icon.

Upvotes: 0

Related Questions